logo
image
Timotheus Bendan
Sales Manager
Profile Inbox Settings Logout
IntroJs
  • Shopping Cart
    ...
    Digital clock
    1 x $1.190,90
    ...
    Toy Car
    1 x $139.58
    ...
    Sunglasses
    2 x $50,90
    ...
    Cake
    1 x $10,50
    Sub Total : $1.442,78

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();