Intro.js
Step-by-step guide and feature introduction
Download
Demo
Commercial use
No dependencies, fast and small
10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped).
User-friendly
Navigate using keyboard or mouse. Easily change the themes for your website.
Browser compatibility
Works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer.
●Documentation
●Download
●Demo
● Github
● Twitter
● Grid.js
●
Donate
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.
Intro.js is open-source and free to use. Share the project with your friends.
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.
Demo
Source
Add progress-bar to your step-by-step introduction. It's as easy as adding showProgress option to your Intro.js instance (e.g. introJs().setOption('showProgress', true).start();)
Demo
Source
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.
Demo
Source
You can add/alter hints using JavaScript objects (or JSON). Also, you can optionally bind a function to hint events (e.g. hint click, hint close)
Demo
Source
Intro.js works very well with all types of elements on the page, including SVG. All you need to do is adding the attributes to SVG elements.
Demo
Source
Do you want to use Intro.js with other UI frameworks? No problem! You can use Intro.js with almost all UI frameworks.
Demo
Source
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. setOption('showBullets', false))
Demo
Source
Instead of adding data-intro attribute, you can define your guide using JSON. There is a steps option that accepts an array of steps.
Demo
Source
If your website is right-to-left, you can use this example for your guides. This will change the direction of all introduction elements.
Demo
Source
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.
Demo
Source
You can use all HTML tags for step's tooltip. For instance you can use borcode tags in tooltips.
Demo
Source
Another great feature of Intro.js is that you can define the position of tooltip box. Furthermore, you can set tooltipPositiontoauto to align the tooltip boxes automatically.
Demo
Source
Also you can define a guide that doesn't focus on a specific element. This type of introductions can be defined using programmatic way.
Demo
Source
There are some options to customize your guide for your website. One of them is data-tooltipClass attribute that enables you to add custom CSS classes to your steps.
Demo
Source
Intro.js is a free and open-source library, however, if you are using the library for your business
you can subscribe to one of commercial licenses plus support, code review and support by Intro.js team.
Here you can find all available Intro.js licenses and plans for commercial use. If you have any questions, send us an email to support@introjs.com.
Starter
USD$9.99
Personal Package
●
1
Project
●
Lifetime
License
●
No
support
●
1
customized theme
●
Nocode review
●
Future updates
●
Once-off Payment
Business
USD$29.99
With support
●
5
Projects
●
Lifetime
License
●
1
month support
●
5
customized theme
●
Code review
●
Future updates
●
Once-off Payment
Premium
USD$99.99
Premium Package
●
Unlimited
Projects
●
Lifetime
License
●
1
year support
●
10
customized theme
●
Code review
●
Future updates
●
Once-off Payment