email@encode8.com
CollectionJavaScript

9 JavaScript Plugins for Interactive Website Tour

guided website tour

Visiting a website can be daunting if the data is not structured properly. If your visitors don’t have any idea how the website works, user retention can be very hard. This is more so since mobile devices have taken charge of the web and people just write it off whenever they don’t get how a particular site works. There are several JavaScript based solutions available that let website owners create fancy website tours. These guided tours are helpful when you are introducing new features to your existing website or application. Even if you creating a tutorial, this type of guides go a long way to make the point across. In this post, we will list some feature-rich tour plugins that can be helpful for your next project.

Shepherd

shepherd-tour-library

Shepherd is a very active and fairly new javascript plugin that offers website owners create a detailed tour of their website. The plugin is built on top of Popper.js, a js library for making elements stand out. Shepherd is responsive by nature; so you don’t have to worry about mobile users being left out.

Enjoyhint

enjoyhint-page-product-min

Enjoyhint is a jQuery plugin that is created to guide users through a site or app in the simplest way. It gives an excellent way to create interactive tutorials with hints and tips, and embed them into your web apps, thus, enhancing their usability and value/effectiveness. EnjoyHint adds simple hints that prompt users to navigate a website or an app intuitively and easily. It comes along with instant auto-focus highlighting, as the user moves into a new field. A nice demo of To-do application is here to showcase how the plugin can be used.

Bootstrap Tour

bootstraptour

BootstrapTour is an open-source javascript tour library built on top of popular front-end library Bootstrap. It uses Bootstrap’s popovers to create interactive tour guide. The plugin is very simple to integrate to any bootstrap powered website.

Intro.js

introjs-demo

Intro.js is a very popular open-source Javascript tour library. It doesn’t require any additional dependency and is very lightweight — 10KB javscript and 2.5KB CSS. The guided tour can be navigated by keyboard.

vue-tour

vue-tour

Vue-tour is a javascript tour library based on top of Vue library. The plugin provides a quick and easy way to guide your users through your application. You can control the tour on this page by clicking the following buttons.

Tourist.js

tourist.js

Tourist.js is a simple library for creating guided tours through your app. It’s better suited to complex, single-page apps than websites. One of our main requirements was the ability to control the interface for each step. For example, a step in the tour might need to open a window or menu to work correctly. Tourist gives you hooks to do this. It is based on Bootstrap.

Hopscotch

hopscotch

Developed by LinkedIn, Hopscotch is another popular javascript library that makes it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress.

aSimpleTour

asimpletour

aSimpleTour is a jQuery plugin for interactive website tours. The plugin works using a very easy jSON Structure that gives it to the plugin all the elements, configurations, tooltips and help texts.

Bootstro.js

bootstrojs

Bootstro.js (not to be confused with Bootstrap) is a tiny javascript library that uses Bootstrap’s popovers to build interactive tour guides. The guides can be navigated through keyboard as well. However, it doesn’t support Bootstrap 4.

Conclusion

Website tours are useful in order to demonstrate its features as well as showcase important content. The above plugins are just a handful of many other js libraries. I have intentionally left out few other libraries which are either not compatible with all major browsers or not actively developed in last one year. I hope the list of plugins will be helpful for your project when you introduce new features.