Countdown Redirect for Website

(Comments)

Libraries are using and updating many third party websites nowadays. We easily run into issues with switching vendors, and as a consequence, we need to decide how to make it obvious to users that an old service or an old website are getting switched over to new ones.

Most of the times, the third party vendor would give you the authority to add customized headers, javascripts or css to your hosted service. If so, it is pretty easy to add a straightforward and immediate redirect to a website. Upon opening the website url, the site itself will load, and in a slit second, it will get redirected to the new url. 

The following code will do the trick, just replace the url with anything you want it to redirect to and put this code inside the <header> tag in your webpage:

<script type="text/javascript"> 

window.location="http://google.com";

</script>

Often though, I prefer the method to give users a warning and an opportunity to linger on the old website a bit, or probably even have the opportunity to continuously use the old site, before redirecting them. This is creates a better user experience and it provides a smoother way of transferring users from your old library catalog to a new one. 

The following code shows how to give users a warning (click on the tab Result to view the result): 

The gist lies in the javascript code. It would look for an specific tag ID and update that tag's inner code automatically. In this case, we would like the warning message to count down the seconds for users. When time is up, the page will get redirected.

You can add customized CSS to make the warning message more obvious. 

I am using the code onInnovative Interfaces' Encore site, so it will automatically redirect to our new catalog after giving our users the 5-second window to choose to continue using Encore. 

If you are interested in doing something similar, following these steps:

1. Log in to the Encore admin website

2. From the left side bar menu, choose Custom Encore Admin

3. Inside the Header box, paste in the javascript code inside <header> and the html code to a place you would like it to appear.

 

Currently unrated

Comments