Intro.js

Fast and easy product introductions

Posted by on September 28, 2015 Intro.js

Usabli.ca has published a nice introduction tool for your products called Intro.js. They are known for their comparision table CSS Frontend Frameworks

Getting started

Download all sources with Bower

bower install intro.js --save

These sources will be loaded in your bower_components folder.

Tip

To find the correct bower folder, check out your .bowerrc and look for your "directory" option. If you don't have a .bowerrc file, your default folder will be bower_components

Build your HTML

Intro.js is providing a simple api. We could add a data-step attribute to an element to attach a step. Optionally we could set a step title by adding a data-intro attribute.

Now we need to attach a click event to any element - we use a button with an id - which is executing introJs().start().

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Intro.js sample</title>

    <link rel="stylesheet" href="./bower_components/intro.js/introjs.css">
    <link rel="stylesheet" href="./bower_components/intro.js/themes/introjs-dark.css">
</head>
<body>

<div>
    <button id="introStart">Start Intro.JS Demo</button>
    <p data-step="1" data-intro="Step 1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, consequatur corporis doloremque ea eius eligendi error nesciunt nisi non odio odit quas qui quis sapiente sequi veritatis, vero voluptate voluptatem.</p>
    <p data-step="2" data-intro="Step 2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, consequatur corporis doloremque ea eius eligendi error nesciunt nisi non odio odit quas qui quis sapiente sequi veritatis, vero voluptate voluptatem.</p>
    <p data-step="3" data-intro="Step 3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, consequatur corporis doloremque ea eius eligendi error nesciunt nisi non odio odit quas qui quis sapiente sequi veritatis, vero voluptate voluptatem.</p>
    <p data-step="4" data-intro="Step 4">Finish</p>
</div>

<script type="text/javascript" src="./bower_components/intro.js/intro.js"></script>
<script type="text/javascript">
    (function(introJs){
        //attach click event to start our intro
        document.getElementById('introStart').onclick = function(){
            introJs().start();
        };
    })(introJs);
</script>
</body>
</html>

Gratulations we build our own product presentation within minutes.

What’s next?

Intro.js is providing more custom data attributes, JavaScript functions and events (like introJs.start()) to create more interaction with the user.

Watch the examples or the api to get fancy with Intro.js. You also could use these nice angular directives for your awesome angular app.

At least…

Your a welcome to comment on this post with your own intros, questions or expierences.