If you use facebook, you must have seen that they asked you to take a tour to know what's everything about in the page. It's kind of introduction to the user to make them familiar with the feature. With Vanilla Javascript it will take a lots of time. Intro.js provides a simple and clean API that makes this job easier for you.
<script type="text/javascript" src="Assets/Intro.js/intro.min.js">
<link rel="stylesheet" type="text/css" href="Assets/Intro.js/introjs.min.css">
Now add data-intro and data-step attribute to your element.
<p data-intro="This is the Introducation 1" data-step="1"></p>
<p data-intro="This is the Introducation 2" data-step="3"></p>
<p data-intro="This is the Introducation 3" data-step="2"></p>
Now make a button and on click the button, execute the following to start the introducatio tour.
introJs().start();
Boom, Welcome to the Tour. This way you can implement simple tour on your page. This is very basic but it does a lot. It renders the full UI for the tour. Amazing. Very efficient to use.
Okay, there's a lot more. We generally don't like to include attribute in the element to look the code messy. Let's do it in Javascript way and let's stick to this way. We will introduce a Step feature. Play with the below demo -
Here is the full code -
<div class="boomBox box1">This is a box One</div>
<div class="boomBox box2">This is a box Tow</div>
<div class="boomBox box3">This is a box Three</div>
<div class="boomBox box4">This is a box Four</div>
<div class="boomBox box5">This is a box Five</div>
<div class="boomBox box6">This is a box Six</div>
<div class="boomBox box7">This is a box Seven</div>
<div class="boomBox box8">This is a box Eight</div>
<div class="boomBox box9">This is a box Nine</div>
<div class="boomBox box10">This is a box Ten</div>
<div class="boomBox box11">This is a box 11</div>
<div class="boomBox box12">This is a box 12</div>
<div class="boomBox box13">This is a box 13</div>
<div class="boomBox box14">This is a box 14</div>
<div class="boomBox box15">This is a box 15</div>
<div class="boomBox box16">This is a box 16</div>
let tour = introJs();
let Steps = [
{
intro : "Welcome To The Tour"
},
{
element: '.box3',
intro: 'Input tool will be used to bring in the Weekly Store Traffic data that was created in the data preparation workflow.',
position: 'right'
},
{
element: '.box8',
intro: 'Numeric measures are needed in order to match treatment stores to control candidates. Two of the best measures to use are trend and seasonality. In this case, the AB Trend tool will use weekly store traffic data – which we created in the data preparation workflow – to calculate these measures.',
position: 'right'
},
{
element: '.box9',
intro: "Numeric measures are needed in order to match treatment stores to control candidates. Two of the best measures to use are trend and seasonality. In this case, the AB Trend tool will use weekly store traffic data – which we created in the data preparation workflow – to calculate these measures.",
position: 'right'
},
{
element: '.box7',
intro: 'Numeric measures are needed in order to match treatment stores to control candidates. Two of the best measures to use are trend and seasonality. In this case, the AB Trend tool will use weekly store traffic data – which we created in the data preparation workflow – to calculate these measures.',
position: 'right'
},
{
element: '.box12',
intro: 'Numeric measures are needed in order to match treatment stores to control candidates. Two of the best measures to use are trend and seasonality. In this case, the AB Trend tool will use weekly store traffic data – which we created in the data preparation workflow – to calculate these measures.',
position: 'right'
}
]
tour.setOptions({
steps: Steps,
showBullets: false,
showButtons: false,
showProgress: true,
exitOnOverlayClick: false,
showStepNumbers: false,
keyboardNavigation: true
});
function showStepDemo(){
tour.start();
}
As you can see clearly we are using setOptions method to set the whole Step tour. The first argument is the steps that we want to create. It is an array of objects. Each object takes three keys. The required key is intro which takes the string. You can embed HTML in the string to render dynamically. Cool. The element key is the element that we want to target. And the position key specifies the position of the presentation window that shows.
If you don't specify the element key, presentation window is displayed in the center of the window. The step number are automatically generated in the order they are appeared in the array.
The showBullets option specifes wheather to show the bullets in the presentation window.
The showButtons option specifes wheather to show the buttons in the presentation window.
The showProgress option specifes wheather to show the progress bar in the presentation window.
If the exitOnOverlayClick is set to true, then if a user clicks outside of the presentation window, the tour will end. Set it to false so that if a user mistakenly clicks on the outside of the presentation window, the tour will stay.
If showStepNumbers is true, then you can see the step number on the left top corner.
If keyboardNavigation is true, the user can ineract with the keyboard. Right Arrow and Left Arrow and ESC button to interact.
Finally when the button is clicked we are calling start() method to start the tour.
There might be a situation where you want to do something after a user has finish up the tour. onComplete callback function is executed when the tour is finished.
tour.oncomplete(function() {
alert("end of introduction");
});
Set callback to exit of introduction. Exit also means pressing ESC key and clicking on the overlay layer by the user. The difference between oncomplete and onexit is that, oncomplete is called when a user successfuly roam the whole tour without skipping anything. On the other hand onexit occurs everytime you exit the introduction.
tour.onexit(function() {
alert("end of introduction");
});
This works same as onexit but if you return false from the callback, you can't exit.
tour.onbeforeexit(function(nextElement) {
alert("You are stuck");
return false;
});
This callback function is called everytime you go to the next step.
tour.onchange(function(nextElement) {
alert(nextElement.innerHTML);
});
The callback function receives the next step element as argument.
same as onchange but it executes before the it goes to the next step.
tour.onbeforechange(function(nextElement) {
alert("This execute before onchange");
});
It is called after you go to a step.
tour.onafterchange(function(nextElement) {
alert("We are Here finally !");
});