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:

3 – jquery joyride feature tour plugin

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.

5 – jQuery myTour plugin

6 – Crumble

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.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.

9 – jQuery Tour Bus

10 – Feature Walkthrough

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.

12 – Hopscotch

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 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

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.

16 – TourTip – jQuery Overlay Tour

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

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.

21 – quicktour.js

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.

28 – anno.js

29 – EnjoyHint

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.

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

Comment

Name *

Email *

Website

Follow:

Ninodezign is a blog dedicated for sharing knowledge, top quality open source resources for web developer and web designer daily . It consists of topics that are of wide range including inspiration designs, tutorials, SEO, tools and resources.Continue Reading