To define steps manually using JSON configuration, the steps property is useful. In the Quick start section, we discussed this option, which has a JavaScript Object (JSON) type.

The next Label option holds the text to be displayed in the tool tip box of the Next button. The type of this option is string and its default value is Next →.

The prevLabel option saves the text to be displayed in the tool tip box of the Back button. Its type is string and its default value is ← Back.

The skipLa bel option is used to set the Skip button text in the tool tip box. The type of this option is string and Skip is its default value.

The doneLa bel option holds the Done button's text in the tool tip box. When the user reaches the last step of the introduction, this button will appear. Also, its type is string and its default value is Done.

The tooltipPosition option is used to hold the default position of the tool tip boxes in the introduction. The default value of this option is bottom, and it means that all tool tip boxes will appear at the bottom of the highlighted area that is available in the introduction. Also, possible values for this option are top, bottom, right, and left.

The exitOn Esc option is a true or false option that defines if the user can exit the introduction by using the Esc key or not. The type of this option is boolean and its possible values are true and false, which by default is set to true. By setting it to false, Esc will be disabled.

The exitOnOverlayClick option is a true or false option that is useful to define if the user can exit the introduction by clicking on the overlay layer (dark background in the introduction) in the introduction or not. The type of this option is boolean and its possible values are true or false, which by default is set to true.

The showStepNumbers option is another true or false option. By setting it to true, the number of each step will be shown on the top-right side of the highlighted area. Its possible values are true or false and its default value is true.

As mentioned before, introJs.start() is the main function of IntroJs that lets the user to start the introduction for specified elements and get an instance of the introJS class. The introduction will start from the first step in specified elements.

This function has no arguments and also returns an instance of the introJS class.

Jump to the specific step of the introduction by using this function. As it is clear, introductions always start from the first step; however, it is possible to change the configuration by using this function. The goToStep function has an integer argument that accepts the number of the step in the introduction.

introJs().goToStep(2).start(); //starts introduction from step 2

As the example indicates, first, the default configuration changed by using the goToStep function from 1 to 2, and then the start() function will be called. Hence, the introduction will start from the second step.

Finally, this function will return the introJS class's instance.

The i ntroJS.exit() function lets the user exit and close the running introduction. By default, the introduction ends when the user clicks on the Done button or goes to the last step of the introduction.

introJs().exit()

As it shows, the exit() function doesn't have any arguments and returns an instance of introJS.

As mentioned before, IntroJs has some default options that can be changed by using the setOption method. This function has two arguments. The first one is useful to specify the option name and the second one is to set the value.

introJs().setOption("nextLabel", "Go Next");

In the preceding example, nextLabel sets to Go Next. Also, it is possible to change other options by using the setOption method.

It is possible to change an option using the setOption method. However, to change more than one option at once, it is possible to use setOptions instead. The setOptions method accepts different options and values in the JSON format.

introJs().setOptions({ skipLabel: "Exit", tooltipPosition: "right" });

In the preceding example, two options are set at the same time by using JSON and the setOptions method.

The oncomplete event is raised when the introduction ends. If a function passes as an oncomplete method, it will be called by the library after the introduction ends.

introJs().oncomplete(function() {
  alert("end of introduction");
});

In this example, after the introduction ends, the anonymous function that is passed to the oncomplete method will be called and alerted with the end of introduction message.

As mentioned before, the user can exit the running introduction using the Esc key or by clicking on the dark area in the introduction. The onexit event notices when the user exits from the introduction. This function accepts one argument and returns the instance of running introJS.

introJs().onexit(function() {
  alert("exit of introduction");
});

In the preceding example, we passed an anonymous function to the onexit method with an alert() statement. If the user exits the introduction, the anonymous function will be called and an alert with the message exit of introduction will appear.

The onchange event is raised in each step of the introduction. This method is useful to inform when each step of introduction is completed.

introJs().onchange(function(targetElement) {
  alert("new step");
});

You can define an argument for an anonymous function (targetElement in the preceding example), and when the function is called, you can access the current target element that is highlighted in the introduction with that argument. In the preceding example, when each introduction's step ends, an alert with the new step message will appear.

Sometimes, you may need to do something before each step of introduction. Consider that you need to do an Ajax call before the user goes to a step of the introduction; you can do this with the onbeforechange event.

introJs().onbeforechange(function(targetElement) {  alert("before new step");});

We can also define an argument for an anonymous function (targetElement in the preceding example), and when this function is called, the argument gets some information about the currently highlighted element in the introduction. So using that argument, you can know which step of the introduction will be highlighted or what's the type of target element and more.

In the preceding example, an alert with the message before new step will appear before highlighting each step of the introduction.

Ruby on Rails is one of the most popular frameworks for developing web applications. It is used by many developers, and it is easy to use IntroJs in Rails.

Installation

There are a few simple steps for installing IntroJs in the Rails framework. First, install the IntroJs package using the following command:

gem install introjs-rails

You will then see the following output:

The other way to do this task is by adding the introjs-rails package to your Gem file and installing the package using the bundle install command. You can find IntroJs Gem packages at https://rubygems.org/gems/introjs-rails.

After finishing the installation step, add the related files to your Rails project. Finally, add IntroJs resources to the code.

Add this line in app/assets/javascript/application.js:

//=require introjs

Also, add this line in app/assets/stylesheets/application.css:

*=require introjs

Now everything is ready for using the IntroJs library. All the IntroJs features that we mentioned before are accessible in your Rails project. Also, it is possible to update IntroJs after releasing new versions of the library.

Yii is one of the best frameworks for PHP. If you're using this framework, you can easily use benefits of integration of Yii and IntroJs.

Installation

First, go to the Yii-IntroJS page on GitHub (https://github.com/moein7tl/Yii-IntroJS).

To download the compressed file, use the following link: https://github.com/moein7tl/Yii-IntroJS/archive/master.zip.

The .zip file includes the introjs directory, which should be copied in the protected path. Now, everything is ready to start.

$this->widget('application.extensions.introjs.IntroJs',array(
    'data'=>array(
        array('id'=>'introID1','step'=>1,'intro'=>'Hello World!','position'=>'right'),
        array('id'=>'IntroID2','step'=>2,'intro'=>'Step two'),
        /* all step and data should be defined here*/
        array('id'=>'introIDStart','start'=>true,'event'=>'onclick'), // define one element as starter,default event is onclick
        array('id'=>'introIDExit','exit'=>true,'event'=>'onclick'), // you can define elements to exit before ending IntroJs,default event is onclick
    )
));

array('id'=>'introIDStart','start'=>true,'event'=>'onclick'), // define one element as starter,default event is onclick

array('id'=>'introIDExit','exit'=>true,'event'=>'onclick'), // you can define elements to exit before ending IntroJs,default event is onclickStyle Customization

<!-- Add IntroJs styles -->
<link href="introjs.css" rel="stylesheet">
<!-- Here you should add your own style -->
<link href="mystyle.css" rel="stylesheet">

On opening the introjs.css file, the first available class is introjs-overlay, which includes all properties of the overlay. It is possible to overwrite properties in your own CSS file and change the overlay appearance.

This is another important class in introjs.css is introjs-tooltip that includes all the properties of your introduction tool tips. For example, to change the tool tip's color to red, add the following code to the CSS file:

.introjs-tooltip {
    background-color: red;
}

It is also possible to change a button's style by overwriting a few classes.

.introjs-tooltipbuttons {
    text-align: left;
}

.introjs-button {
    text-shadow: 1px 1px 0 #fff;
    color: #333;
    background-color: #ececec;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
    background-image: -moz-linear-gradient(#f4f4f4, #ececec);
    background-image: -o-linear-gradient(#f4f4f4, #ececec);
    background-image: linear-gradient(#f4f4f4, #ececec);
}
.introjs-button {
    text-shadow: 1px 1px 0 #fff;
    font: 11px/normal sans-serif;
    color: #333;
    background-image: linear-gradient(#f4f4f4, #ececec);
}

To change the style of the step number's CSS properties, which are in the introjs-helperNumberLayer class, overwrite this class in the CSS file.

To change the highlight area's style, overwrite introjs-helperLayerclass.

IntroJs has four buttons for various situations, and these buttons are in tool tip boxes. All these options could be changed via the setOption or setOptions method.

In order to change these buttons and set the preferred text, change the following options:

All the preceding options are changeable with the setOption method. The following is an example of using this function:

introJs().setOption("skipLabel", "Exit");

In the preceding example, we changed the Skip button label from Skip to Exit. With the same approach, change all the button's labels.

If you need to change two or more button's labels at once, use the setOptions method. An example of the setOptions method is as follows:

introJs().setOptions({ nextLabel: 'Go', prevLabel: 'Previous' });

In the previous example, we changed both the Next and Previous buttons' labels to Go and Previous using one function call. Finally, the result should be something like this:

IntroJs was released in the Left to Right version, but it is possible to update it to the Right to Left stylesheet. IntroJs has an RTL stylesheet to change the introduction to Right to Left, and it is easy to use this stylesheet.

To have the RTL version, add introjs-rtl.css to the page after the main IntroJs stylesheets. Be sure to use the RTL stylesheet after the main IntroJs stylesheets.

<!-- Add IntroJs styles -->
<link href="introjs.css" rel="stylesheet">
<!-- Add IntroJs RTL styles -->
<link href="introjs-rtl.css" rel="stylesheet">

After changing the page like we did in the preceding example, everything should be RTL, such as tool tip boxes and buttons. An example of the RTL version in action for the Persian language is as follows:

Sometimes a developer needs to change, develop, and customize IntroJs for his/her usage. For developing or customizing IntroJs, use the development files (the intro.js and introjs.css files) and after changing, prepare files for production use. It is possible to use development files for the production environment. All you need is to minify them and remove redundant comments and whitespaces.

The production environment is where your users will be and is the final release. Users don't like to waste their time on downloading files. Hence, minimize the size of the files as much as possible.

Creating the production code from development files is easy with IntroJs; all you need is to run a single line of command in your command-tools application. Then, MakeFile will manage everything to prepare and create production files. However, you need to prepare your workspace before running the commands.

IntroJs MakeFile works with NodeJs, so before doing anything, if you don't have NodeJs, install it. You can use the following link to download NodeJs: http://nodejs.org; Select your operating system and download the installer file. After downloading it, run and install NodeJs. Now, you should have the NPM package manager in your system. To make sure the installation has been done correctly, open the command prompt, type the npm command, and press Enter. The Node Package Manager (NPM) manual will appear.

Now, everything is ready to go ahead. Open the command prompt and the folder of IntroJs, which has files as shown in the following screenshot:

Install other dependencies to minify and compress CSS and JavaScript files. In the command prompt, type the npm install command and hit Enter; after a moment the result should appear, as shown in the following screenshot:

As shown in the preceding screenshot, all the dependencies are installed automatically.

Run a command-line tool to create production code snippets. To do this, go to the folder of IntroJs and run the make build command. After running the command, a result as shown in the following screenshot will appear:

If the successful message from the application appears, it means that you have your production-ready files. All production files are stored in the minified folder inside the IntroJs folder. An example of the minified folder is as follows:

Also, production-ready files have the .min postfix in their filenames, which means minified. Now these files are ready for production in the minimum possible size.

The oncomplete event happens when all introduction steps have been passed and the user reaches the last step. It is possible to access this event whenever the user presses the Done button or the right arrow key.

introJs().oncomplete(function() {
alert("end of introduction");
});

This event doesn't pass any parameter to your callback function. In the callback function, this points to the current instance of introJS.

In the preceding example, the end of introduction message will appear after the introduction ends.

onexit happens after the user exits from the introduction, which means that the user can exit from the whole event just before the introduction is completed by pressing the Esc button, or by clicking on the Skip button on the tool tip.

introJs().onexit(function() {
  alert("exit of introduction");
});

The callback method doesn't get any input parameter for this event. As the preceding example code indicates, the imported event doesn't have a parameter. Also in the callback method, the this value points to the current instance of introJS. Hence, it can be useful for controlling actions and also receiving more data for the introduction, which already has been launched on the page.

In the preceding example, as soon as the user exits from the introduction, the exit of introduction message will appear.

After each level of introduction changes (by clicking on the Next or Back buttons in the tool tip panel or pressing right or left arrows on the keyboard), the onchange event happens. It can be useful whenever a developer wants to make a new action after the user enters one of the introduction's levels, such as calling a file as Ajax or to show data that had been read to the user.

introJs().onchange(function(targetElement) {
  alert("new step");
});

In the preceding event, the callback event receives an input parameter that includes the element while the introduction is running on it.

In the preceding code, the new step message pops up to the user after entering each level of the introduction.

Before entering a new level of the introduction, the onbeforechange event happens (just before the onchange event). Hence, it is useful to have an action just before the user enters a new level of the introduction, and after the action is finished, the new level will come up.

introJs().onbeforechange(function(targetElement) {  
  alert("before new step");
});

In the callback event, one parameter is added; this includes an element that is placed by the introduction and the highlight area. Also, in the callback event, the this value points to the current introJS class' instance.

In the preceding example, before entering the new level of the introduction, the before new step message will pop up.

As it indicates, to make the introduction multipage, two blocks of code snippets have been added. But how does it work? Let us go through it in this section.

window.location.href = 'second.html?multipage=true';