intro.js

What is intro.js?

Intro.js is a lightweight, user-friendly library for creating step-by-step guides and feature introductions for web applications. It helps users understand the functionality of an application by providing a guided tour with tooltips and highlights.

What are intro.js's main functionalities?

Step-by-Step Guide

This feature allows you to create a step-by-step guide for your application. You can define multiple steps, each with a specific element and description.

const intro = introJs();
intro.setOptions({
  steps: [
    { intro: 'Welcome to the tour!' },
    { element: '#step1', intro: 'This is step 1' },
    { element: '#step2', intro: 'This is step 2' }
  ]
});
intro.start();

Highlight Elements

This feature highlights specific elements on the page to draw the user's attention to them. It is useful for emphasizing important parts of the UI.

const intro = introJs();
intro.setOptions({
  steps: [
    { element: '#highlight1', intro: 'This element is highlighted' }
  ]
});
intro.start();

Tooltip Customization

This feature allows you to customize the appearance of tooltips by adding custom CSS classes. It helps in maintaining the design consistency of your application.

const intro = introJs();
intro.setOptions({
  steps: [
    { element: '#customTooltip', intro: 'Custom tooltip', tooltipClass: 'customTooltipClass' }
  ]
});
intro.start();

Interactive Navigation

This feature provides interactive navigation controls, such as next and previous buttons, to allow users to move through the steps at their own pace.

const intro = introJs();
intro.setOptions({
  steps: [
    { element: '#navStep1', intro: 'Navigate to step 1' },
    { element: '#navStep2', intro: 'Navigate to step 2' }
  ],
  showStepNumbers: true,
  showButtons: true
});
intro.start();

Other packages similar to intro.js

shepherd.js

Shepherd.js is a JavaScript library for guiding users through your app. It uses Tether.js to position all of its steps and enables you to create feature tours with more advanced positioning and customization options compared to Intro.js.

hopscotch

Hopscotch is a framework for creating guided tours of your web application. It provides a similar step-by-step guide functionality as Intro.js but offers more flexibility in terms of tour management and event handling.

driver.js

Driver.js is a lightweight, no-dependency library for highlighting elements and guiding users through your app. It offers a more modern API and better performance compared to Intro.js, making it suitable for high-performance applications.

README

Intro.js

User Onboarding and Product Walkthrough Library

Where to get

You can obtain your local copy of Intro.js from:

1) This GitHub repository, using git clone https://github.com/usablica/intro.js.git

2) Using yarn yarn add intro.js

3) Using npm npm install intro.js --save

4) Download it from CDN (1, 2)

How to use

Intro.js can be added to your site in three simple steps:

1) Include intro.js and introjs.css (or the minified version for production) in your page. Use introjs-rtl.min.css for Right-to-Left language support.

CDN hosted files are available at jsDelivr (click Show More) & cdnjs.

2) Add data-intro and data-step to your HTML elements. To add hints you should use data-hint attribute.

For example:

<a href='http://google.com/' data-intro='Hello step one!'></a>

See all attributes here.

3) Call this JavaScript function:

introJs().start();

Optionally, pass one parameter to introJs function to limit the presentation section.

For example introJs(".introduction-farm").start(); runs the introduction only for elements with class='introduction-farm'.

Documentation

Please visit Documentation.

Using with:

Intro.js has many wrappers for different purposes. Please visit Documentation for more info.

Build

First you should install nodejs and npm, then first run this command: npm install to install all dependencies.

Now you can run this command to minify all static resources:

npm run build

Contributors ✨

Afshin Mehrabani 💻 📖

bozdoz 💻 📖

Support/Discussion

• Stackoverflow

License

Commercial license

If you want to use Intro.js for a commercial application, theme or plugin the commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a commercial license at introjs.com

Open-source license

GNU AGPLv3