IntroJs

Intro.js is a lightweight library for creating step-by-step customer onboarding. Demo page.

Usage

To use the plugin,you need to add the following files.

<!-- CSS --><link rel="stylesheet" href="libs/introjs/introjs.min.css" type="text/css"><!-- Javascript --><script src="libs/introjs/intro.min.js"></script>

Basic example

You can create your product tour using data-introand data-titleHTML attributes. Simply add those attributes to your elements and call introjJs().start():

<div data-title="Welcome!" data-intro="Intro.js can highlight on elements">... </div>
introJs().start();

You can define your tour settings using JSON as well.

introJs().setOptions({steps:[{title:'Welcome!',element:document.querySelector('div'),intro:'Intro.js can highlight on elements'},...]}).start();