In this section, we will cover the following points:
What are the IntroJs requirements?
How to download?
How to install?
IntroJs is a client-side library, which means all routines and events manage and execute on the client environment. All installation and running steps are related to client segments, and there is no requirement to install it on the server.
There are four simple steps to install and run IntroJs.
As mentioned before, to run IntroJs, there is no need to install anything on the server, and all the work is on the client side; all you need is just a web browser.
To run IntroJs, you need to have one of the following web browsers:
IE 8 or higher
Firefox 20 or higher
Google Chrome 26 or higher
Safari 5.1 or higher
Opera 12.1 or higher
There are some requirements for mobile or tablet browsers as well:
iOS Safari 3.2 or higher
Opera Mini 5.0-0.7 or higher
Android Browser 2.1 or higher
BlackBerry Browser 7.0 or higher
To install and run IntroJs, download the latest version. All necessary files of each version should be sorted in a separated folder.
The GitHub page for IntroJs is the simplest and easiest way to download the latest version, which is available on https://github.com/usablica/intro.js/tags.
As the screenshot indicates, all versions are available in the .zip and tar.gz formats. Download the latest version. At the time of writing this book, the latest available version was 0.4.0.
Also, an unstable version is available at https://github.com/usablica/intro.js/archive/master.zip.
Note that the version under development may have some problems or bugs. It is only available for introducing the latest features, updates, and changes in the library; it won't be useful for production.
After download, extract the compressed file. It usually includes the following files and directories:
The following is an explanation for a few of these:
The
BUILDfolder is useful to build and make production filesThe
examplefolder includes some samples of how to use IntroJsThe
minifiedfolder contains the minified files that you need during productionThe
intro.jsandintrojs.cssfiles are the library's main files useful for development or fixing bugs (they are not recommended for production; for production purpose, use minified files)Also,
component.jsonandpackage.jsonare package-management tools for configuration purposes
IntroJs can run on any HTML page by performing the following steps.
The intro.min.js and intro.min.css files are the two main files for installation that are available in the minified folder. These two files are made for the production environment. They are available in the compressed mode, and all the extra comments and descriptions have been removed from them.
There are two methods to call IntroJs files. However, it is possible to use either way, but to achieve higher speed and accuracy, the second method has been approached.
To use the <script> tag, include the following JavaScript and CSS files in the HTML document:
<!-- Add IntroJs --> <script type="text/javascript"src="intro.min.js"></script> <!-- Add IntroJs styles --> <linkhref="introjs.min.css"rel="stylesheet">
Another useful feature of IntroJs is its compatibility with AMD and CommonJs patterns. It is possible to call JavaScript and CSS files using these patterns, and it doesn't need to use the <script> tag. Also, by using this, it would be possible to call JavaScript and CSS files asynchronously.
This approach increases the document's loading speed, and also, the web page won't block while loading. As mentioned before, this method has been recommended instead of the other one.
require(["intro"], function(introJs) {
//This function is called when intro.js is loaded.
//Hence, you can write `introJs().start();` here
});This code is written using the RequireJs library. By using this method, the scope or closure of the IntroJs program will be determined. Also, the request to load the file will be sent asynchronously, and it won't wait for the flow of calling to be finished. Moreover, it also increases the loading speed.
To use this feature, you need to have one of the following libraries in your page:
RequireJs
curl
LSJS
Dojo 1.7 or higher
Also, by using this method, it is possible to call introjs.css. However, due to the problems that this method can cause in different browsers, it is not recommended to be used, and the <link> tag has been preferred to call CSS files instead.