Quick walk through IntorJs

Introduction :  IntroJs is basically used to give the brief introduction about the web page in an web application. It is open source vanilla Javascript/CSS library to add the hint or introduction about the page that what the page is about. It doesn’t have any dependency, we only have to add CSS and Javascript file. Here are the following steps which will help you to add IntroJs into your web applications.

Here is the following steps to implement :-

Step1

Using NPM

npm install intro.js --save

Step2

After installation you need to add it to the page and it mainly consist of two parts i.e. CSS and Javascript files.

API

1. introJs([targetElem])

parameter

targetElem:- It creates an IntroJs object. String should be explained to start the introduction for specific element. For example #intro-farm

Example

introJs():- without selector, it starts introduction for whole page.

introJs(“intro-farm”):- It starts introduction for the element id=’intro-farm’.

Returns

introJs object

2. introJs.start()

It starts the introduction for defined elements

parameter

introJs object

Example

introJs().start()

3. introJs.goToStep(step)

It goes to the specific set of introduction

Parameter

step:number

Returns

introJs object

Example

introJs().goToStep(2).start(); // It starts the introduction from step2

4. introJs.goToStepNumber(step):-

This is different from the previous name because the data-step does not need to be continuous. It runs in a random number.

Parameter

step:number

Returns

introJs object

Example

<div id=”first” data-step=”2”></div>

<div id=”second” data-step=”5”></div>

introJs.goToStepNumber(9).start()

5. introJs.addStep(options)

It is used to add new step to the introJs

Example

introJs().addStep({

element:document.querySelectorAll(‘#step2’)[0],

intro:”How are you”,

position:’right’

});

6. introJs().nextStep()

It goes to the next step of introduction

Example

introJs().start().nextStep();

So these are the methods which are used in introJs and many more methods are also there in introJs. We can also use JSON to setup introJs because it not convenient to manually add the introjs attributes for the specific element we can also make the array for the specific elments.

For Example

Let steps=

[{

element:’#step1’,

intro:”This is the title of the web page’,

Position:’right’

},

{

element:’#step2’,

intro:’This is the description of the web’,

Position:’left’

}]

We create the instance of the introJS and load the data using the setOptions and we frequently start the tour.

// Initialize the introJs instance

Var intro=introJs();

Pass in the steps array which is created earlier

intro.setOptions({steps:Steps});

Here the introJs starts

intro.start();