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.
Why using Intro.js?

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.

Who uses Intro.js?
Examples
 Hello world

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
 Progress bar

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
 Hint NEW

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
 Programmatic Hint NEW

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
 SVG NEW

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
 Bootstrap v3NEW

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
 Enable/disable options

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
 Programmatic

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
 Right to Left

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
 Multi-page guide

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
 HTML in tooltip

You can use all HTML tags for step's tooltip. For instance you can use b or code tags in tooltips.

Demo Source
 Auto-positioning

Another great feature of Intro.js is that you can define the position of tooltip box. Furthermore, you can set tooltipPosition to auto to align the tooltip boxes automatically.

Demo Source
 Floating guide

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
 Customize it

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 Commercial

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 [email protected].

Starter
USD$9.99
Personal Package
  • 1 Project
  • Lifetime License
  • No support
  • 1 customized theme
  • No code review
  • Future updates
Business
USD$29.99
With support
  • 5 Projects
  • Lifetime License
  • 1 month support
  • 5 customized theme
  • Code review
  • Future updates
Premium
USD$99.99
Premium Package
  • Unlimited Projects
  • Lifetime License
  • 1 year support
  • 10 customized theme
  • Code review
  • Future updates