Intro.js is a lightweight library for creating step-by-step customer onboarding. Demo page.
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>
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();