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.