Building A Step-By-Step Guide Using Intro.js [Tutorial]
There are numerous plugins for creating your own guided website tour. This animated page effect is very useful to new visitors who are just learning the ropes of your website layout. How do they know all the important interface features and menu links? By using a guided tour it is easy to explain all of these features to users who are interested.
I want to focus this tutorial onto an open source jQuery plugin called Intro.js. I really like this choice because of the page dimming feature, also the easy customization of CSS to change how the tooltips look. The dependencies are also simple with a requirement for jQuery and the plugin’s own custom CSS/JS files. If you are familiar with jQuery it is very simple to get this plugin working within 30-60 minutes of development time.
My demo page will be using the Hongkiat’s CSS Equal Height demo as an example. It will guide you through all the key aspects of the demo page interface. Check out the demo link below to see what we will be making.
Getting Started
I do not want want to focus much on the HTML or CSS because this is all relative to your own page. However there is something I want to point out in using Intro.js (which I did not do in this tutorial). Basically you have 2 different options for setting up the various “steps” of the tour. These steps may be hard-coded into a JavaScript array as I have done, or you may append HTML attributes onto the various elements in your page.
Here is an example from the main plugin’s demo page:
<h1 data-step="1" data-intro="Hello all! :) This project's called Intro.js.">Intro<span style="font-weight: normal;">.js</span></h1>
data-step signifies which numerical step should be used while data-intro will hold the text to be displayed in the tooltip.
I prefer to keep this stuff inside JS variables instead because it makes the HTML cleaner, plus all the important codes are located in one file rather than scattered throughout different page elements.
But if you just want to test the waters you may use this easier technique with HTML5 data attributes.
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery Live Demo Tour - CSS Equal Height on Hongkiat.com</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/demo-style.css"> <link rel="stylesheet" type="text/css" href="css/introjs.css"> <script type="text/javascript" src="js/nav.js"></script> <script type="text/javascript" src="js/intro.js"></script> </head>
Now my document head also contains scripts related to the original Hongkiat demo page. I don’t need to delve any further into these styles since they do not affect the tour in any way. But it is important to note that we need a copy of jQuery as a dependency, along with introjs.css and intro.js.
All of these files will come packaged with the plugin download off Github.
Tiny CSS Updates
Originally the introjs.css file contains a number of helpful default styles for your tooltip effects. These may be overwritten in your own stylesheet if you have a distinct look and feel to the page. All I have edited is the font size to make the letters bigger with a taller line-height property.
#tourbtn {
position: fixed;
right: 15px;
bottom: 35px;
}
#tourbtn a {
background: #bac081;
padding: 8px 15px;
font-size: 12px;
line-height: 22px;
font-weight: bold;
color: #454a50;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#tourbtn a:hover {
background: #cacf96;
}
These other alternate styles are only important for creating a tour button found in the lower-right hand corner of the page. This displays only once after the user initially visits the page and offers a brief tour, if needed. For my demo the guided page tour will start automatically, but some users would rather setup a tour button instead.
jQuery Codes with Intro.js
There is not a whole bunch of difficult JavaScript to understand but the syntax is rigorous when you are unfamiliar with the language. I will break it down into block sections; that way it’ll be easier to understand. Please note all of these codes are contained at the bottom of my HTML page.
However you could make a separate JS file to segregate codes if that is easier.
$(function(){
var introguide = introJs();
// var startbtn = $('#startdemotour');
}
First we setup an important variable related to the tour feature. We make a new tour variable named introguide which calls the main introJS plugin function. The startbtn variable can be used for setting up a related tour button in the page. Afterwards we need to setup a large index containing each tour’s step(s), targeted element, and tooltip content.
introguide.setOptions({
steps: [
{
element: '.nav-bar',
intro: 'This guided tour will explain the Hongkiat demo page interface.<br><br>Use the arrow keys for navigation or hit ESC to exit the tour immediately.',
position: 'bottom'
},
{
element: '.nav-logo',
intro: 'Click this main logo to view a list of all Hongkiat demos.',
position: 'bottom'
},
{
element: '.nav-title',
intro: 'Hover over each title to display a longer description.',
position: 'bottom'
},
{
element: '.readtutorial a',
intro: 'Click this orange button to view the tutorial article in a new tab.',
position: 'right'
},
{
element: '.nav-menu',
intro: "Each demo will link to the previous & next entries.",
position: 'bottom'
}
]
});
Notice this data is setup by calling introguide.setOptions({}) which is an inner function of the plugin. We pass an array set with the list of steps for our guided tour. The elements may be any typical jQuery selector although classes are often not recommended unless you only have 1 on the page.
The position value is also available using data-position but it will default out to the bottom. I am including this key in each step merely for clarity.
The only line of code we need is to call introguide.start(). This may be kept inside an event handler which triggers only after the user clicks on a link or button. However it’s not a requirement, and the tour can initiate right after the DOM finishes loading.
introguide.start();
/**
startbtn.on('click', function(e){
e.preventDefault();
introguide.start();
$(this).hide();
});
* oncomplete re-display the button
* hide by default since we don't need this functionality.
introguide.oncomplete(function() {
if(startbtn.css('display') == 'none') {
startbtn.show();
}
});
introguide.onexit(function() {
if(startbtn.css('display') == 'none') {
startbtn.show();
}
});
**/
There are callback functions to use whenever the tour finishes, and we can use these callbacks to re-show the button if needed. I have these codes commented out for this demo but you should know these callback methods are available to run any JS codes after the tour finishes, or after the user exits the tour at some point.
I really like the Intro.js plugin because documentation is straightforward and easy to understand. This can work in almost any webpage using jQuery as an included library. I like this example running over the Hongkiat demo layout because it shows exactly what is possible in a typical website tour. I would advise everyone interested in this technique to keep your eyes open!
Plenty of new social networks and startups are using guided tours, and when you find such examples online they can be immensely beneficial when crafting your own website tours.
Related Libraries
Although my personal preference leans towards Intro.js I cannot say this is the absolute best solution. There are so many other alternative website tour plugins which are worth mentioning in this article. Check out the small list below where I have compiled a roundup of related JS tour plugins which may be useful to developers.
Final Thoughts
A guided website tour can provide so much benefit to your new startup or redesigned layout. Usability is crucial for the successful performance of any website. And a guided webpage tour is an exceptional method to build up comfort using any layout. I hope this tutorial may offer a peek into the wonders of Intro.js and building guided tours for your users.
If I have glossed over any confusing topics or if you have further ideas please share with us in the post discussion area below.