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-intro and data-title HTML 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();