11 Awesome “jQuery Site Tour Plugins” For Guiding Users With Style

25°

It is always hard to guess how users browse + how they perceive the content and flow of a website or web app.

There are tools to analyze these as much as possible and, using  methods like A/B testing, improving the usability is always possible.

However, it is always a great idea to guide users whenever they want. Nothing to lose on that for sure.

There are awesome jQuery plugins that ease guiding users and creating site/page tours for them. They are stylish, customizable and simple to use. Check them out:

Intro.js

Intro.js jQuery Plugin

A lightweight plugin that uses data attributes and has keyboard navigation support.

It focuses on objects beautifully and pretty easy-to-setup.

aSimpleTour

aSimpleTour jQuery Plugin

aSimpleTour uses a JSON data for all the configuration and content.

While a floating box helps managing the tour, tooltips (that can be positioned however wanted) help focusing on the elements.

Pageguide.js

Pageguide jQuery Plugin

Pageguide.js offers a very slick way to provide site tours.

The steps are highlighted beautifully and a sticky footer/header allows navigating through them while providing extra info about each step.

Joyride

jQuery Joyride Plugin

This is a very nice plugin by the talented ZURB team.

It is configure using data attributes, works well in responsive layouts and has almost everything customizable.

Website Tour

Website Tour

A simple-yet-useful plugin where all the details and content are defined in JS.

There are options to customize the color and position of the tooltips.

Bootstro.js

Bootstro jQuery Plugin

That is the Bootstrap version of Intro.js.

Bootstrap Tour

Bootstrap Tour jQuery Plugin

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.

jQuery Site Tour

jQuery Site Tour

The plugin has lots of options to customize the look or delay between steps, setting the initial item to be shown and more.

P.S. While writing this article, the demo had issues.

jQuery TourBus

jQuery TourBus Plugin

The plugin is written with CoffeeScript and has styles as Less + CSS.

jQuery TourBus is very customizable, can display the steps one-after-other manually or with auto-play.

There are functions to get the current step or display a specific one (also, prev-next).

Trip.js

Trip.js - jQuery Plugin

The steps and content for the guides are all defined in JavaScript with this plugin.

It has a complete API, callbacks, keyboard support and options to customize the look.

Crumble

Crumble jQuery Plugin

A visually different way for having a site tour.

Crumble uses a bubbled interface where all the steps are defined in an ordered list (which is good for accessibility).

4 Comments
  1. Reply Len December 8, 2015 at 4:12 PM

    Hello, there’s a lot of options, witch one do you recommend me ? (I’m not expert).

  2. Reply Rubens March 30, 2016 at 7:17 PM

    Any of thoses offers native support for autostart and run only once per browser/user?

  3. Reply Iza Bartosiewicz July 5, 2016 at 11:00 PM

    Crumble is nice and lightweight, but it will need some tweaking to make it accessible. The most obvious problem is lack of keyboard support (you can’t tab to activate the bubbles). And even if the instructions are marked up in an ordered list, they are hidden from view using display:none. This makes them inaccessible to screen reader users.

Leave a reply

Search