When new users visit your website or product you should demonstrate your product features using a step-by-step guide.
Even when you develop and add a new feature to your product, you should be able to represent them to your users using a user-friendly solution. Intro.js is developed to enable web and mobile developers to create a step-by-step introduction easily.
This is a basic usage of the library. You can define steps by adding
data-intro attribute to the HTML elements. This is the easiest way to setup your step-by-step guide.
Add progress-bar to your step-by-step introduction. It's as easy as adding
showProgress option to your Intro.js instance (e.g.
Hints are the new feature in Intro.js that enables you to add additional descriptions to any part of a web page. You can define hints by adding
data-hint attribute to the HTML elements.
You can enable or disable options like buttons, progress-bar and bullets. It's really easy to enable or disable options, call the
option function and pass option name (e.g.
Instead of adding
data-intro attribute, you can define your guide using JSON. There is a
stepsoption that accepts an array of steps.
If your website is right-to-left, you can use this example for your guides. This will change the direction of all introduction elements.
If your guide begins on a page and ends on another page, you can use multi-page option of Intro.js. This is a basic example of multi-page introductions.
You can use all HTML tags for step's tooltip. For instance you can use
code tags in tooltips.
Another great feature of Intro.js is that you can define the position of tooltip box. Furthermore, you can set
auto to align the tooltip boxes automatically.
Also you can define a guide that doesn't focus on a specific element. This type of introductions can be defined using programmatic way.
There are some options to customize your guide for your website. One of them is
data-tooltipClassattribute that enables you to add custom CSS classes to your steps.