25+ Free JQuery Plugins For Doing Guided Tours Through A Website

When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. There are awesome jQuery plugins that easy guiding users and creating site/page tours. You would find these plugins really useful for improving your overall user experience on your website. They are stylish, customizable and simple to use. Check them out:

1 – intro.js

intro-js

Demo Download

Intro.js is a simple and fast javascript plugin for creating better introductions to websites and features with step-by-step guides with keyboard and mouse support.

 

2 – Website Tour with jQuery

tympanus-website-tour

Demo Download

A little script that allows to create a tour on a website with jQuery. This can be very useful if you want to explain your users the functioning of your web application in an interactive way.

 

3 – jquery joyride feature tour plugin

jquery-joyride

Demo Download

Joyride is extremely flexible and lets you take control of how people interact with your tour. We programmed it to be cross-browser compatible with modern browsers and even used some fancy CSS to avoid images. Now let’s see just how easy it is to take your first ride without getting the fuzz involved.

 

4 – Bootstro.js

bootstro-js

Demo Download

Bootstro.js is a tiny JS library taking advantage of bootstrap’s popover to help guide your users around.

 

5 – jQuery myTour plugin

jquery-my-tour

Demo Download

Mytour is a simple jQuery plugin used to create an interactive visual tour for your website to let your visitors learn about new features and functions.

 

6 – Crumble

crumble

Demo Download

Crumble allows you to quickly and easily build feature tours for your website or app using small bubbles!
The bubbles are visually interesting, will draw attention and due to the small size make sure that you will write using concise language that visitors will read.
The tour itself is defined as a standard ordered list in your html, making it accessible.

 

7 – Trip.js

trip

Demo Download

Trip.js is a jQuery plugin that can help you customize a tutorial trip easily with more flexibilities. Right now Trip.js support lots of useful stuffs like keyboard binding, animations, changing themes … etc.

 

8 – FAQtoid

faq-toid

Demo Download

FAQtoid is a simple free all-in-one help system for your website or web application. It reduces your support costs by giving visitors the tools to help themselves.

  • FAQ with Live Search
    Users see answers as they type.
  • Tours
    Walk users through the parts of each page.
  • Video Gallery
    Users can watch videos while staying on the webpage that a video explains.
  • Smart Email Form
    Handles crazy and junk messages. Automatically includes detailed information about your user, what they were trying to do, and any errors on the page.

 

9 – jQuery Tour Bus

jquery-tour-bus

Demo Download

A tour/walkthrough plugin for developers. It includes limited automatic behavior, more like a ‘toolkit’ than some of the others out there.

 

10 – Feature Walkthrough

feature-walkthrough

Demo Download

A JS plugin to add a feature walkthrough on your web page.
You can position the walkthrough callouts to appear on the right,left,top or bottom of the element you are describing. For the left/right position, give the width of the element. This positions the callout exactly the way you want it. Similarily, give the height of the element when using the top/bottom positioning of the callout. Future features, include a complete customization of the look & feel of the callouts.

 

11 – chaperone.js

chaperone

Demo Download

Chaperone is a simple jQuery plugin for doing guided tours through a website. Inspired by Joyride, Chaperone takes a list of items and uses them as a guide to show messages on targetted elements.

 

12 – Hopscotch

hopscotch

Demo Download

Hopscotch is a framework to make 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.

 

13 – pageguide.js

pageguide-js

Demo Download

pageguide.js is an interactive visual guide to elements on web pages. Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions.

 

14 – aSimple Tour Plugin

a-simple-tour-plugin

Demo Download

aSimpleTourPlugin is a jQuery plugin that will help you to make website tours. While a floating box helps managing the tour, tooltips (that can be positioned however wanted) help focusing on the elements.

 

15 – Bootstrap Tour

bootstrap-tour

Demo Download

This jQuery site tour plugin loads the content inside Bootstrap Popovers. Tour steps + the content are both defined in JavaScript and it has lots of options to customize the behavior.

 

16 – TourTip – jQuery Overlay Tour

tour-tip

Demo Download

TourTip is a simple library for creating guided tours through your application. It’s better suited to complex, single-page applications than websites. Our main requirement was the ability to control the interface for each step. For example, a step might need count seconds before moving to the next step, or wait for the user to complete a task. TourTip gives you the ability to manage these parameters all at once or for each step separately.

 

17 – jQuery Tour

jquery-tour

Demo Download

TourJS is a jQuery plugin for creating beautiful tours. Items are pulled out of the page, you can require an action from the user before moving to the next step of the tour, and TourJS will automatically scroll to hidden items.

 

18 – Website tours with jQuery UI

query-ui-tour

Demo Download

Lets you build website tours by providing tools to expose or annotate elements, also can step through a tour or run it automatically.

 

19 – Bon Vojage

bon-vojage

Demo Download

Bon Vojage is a tiny JQuery plugin that makes your cross-website tour simple!

 

20 – ddTour

ddtour

Demo Download

A simple uncomplicated lightweight site tour jQuery solution created by David Davis.

  • Unlike other tour solutions you keep your code in one place. The tooltip pops up right where you have a description of it.
  • Traverse to any element by designated class selector
  • This is a simple grunt stupid solution as they say in the Marine Corps.

 

21 – quicktour.js

quicktour=js

Demo Download

Quicktour.js uses an iterative loop to highlight each tour item in the order you add them. A dark frame will appear over the website, showing a title (if specified), and the tour will progress with each click.

 

22 – jQuery Tour

jquery-tour-js

Demo Download

My simple implementation of a Tour plugins out there.

  • I am relying on absolute positioned divs. These placeholders are to injected dynamically into DOM.
  • With every click, the DOM is 1st cleared of all the elements and then a dynamically created element has to be placed dynamically as positioned by the CSS class.
  • Takes an array of JSON objects containing the TITLE and DESCRIPTION of the placeholder. The array order determines the order of the placeholders to be displayed.

 

23 – lightsOff.js

lightsoff-js

Demo Download

A lightweight JQuery plugin (6kb minified) to show nice guided introductions of various elements on your page.

 

24 – usertour.js

usertour-js

Demo Download

It’s a jQuery widget for web applications that want to offer a step by step tour to their users.

 

25 – VTour.js

vtour-js

Demo Download

A jQuery library used for designing help pages for your website. Gives the user a guided walk through of your webpage and it’s functions.

 

26 – jquery-guide

jquery-guide-js

Demo Download

A jQuery plugin that new layout or new features using guide

 

27 – Concierge

concierge-js

Demo Download

Concierge is jQuery plugin that creates a walkthrough guide for use in educating users about stuff on the page. It basically just lets you set up a bunch of popovers that fire in order.

 

28 – anno.js

anno-js

Demo Download

Anno.js lets you add powerful step-by-step guides to your web-apps

 

29 – EnjoyHint

enjoyhint-jquery-plugin

Demo Download

A free web-tool that is created to prompt users to navigate a website or an app intuitively and easily. It gives an excellent way to create interactive tutorials with hints and embed them into your web apps, thus, enhancing their usability and value/effectiveness.

EnjoyHint adds simple hints that come along with instant auto-focus highlighting, as the user moves into a new field.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *