Introduction to your website/product with intro.js

This would be the best way to introduce your product to your visitors or a website with a tour.
Intro.js is javascript plugin features in providing a step a step guide to a product.

Example of intro.js




Let us directly jump to How to use?

Download the files from Recent upload

Let us create a basic HTML page by including the required CSS and JavaScript files from the downloaded files.

     <html>
     <head>
     <link type=”text/css” rel=”stylesheet” href=”introjs.min.css”>
     <script src=”jquery.js”></script>
     <script src=”intro.min.js”></script>
     </head>
     <body>
     <h1>Web-Worker.in</h1>
     <ul>
     <li>Home</li>
     </li>Blog</li>
     <li>Labs</li>
     <li>Resume</li>
     </ul>
     </body>
     </html>

I assume you’re ready with these things, and have all the required files in a single folder. Before calling the plugin we have got to do some tiny changes to the html. The change would be adding the some attributes to the elements which take part.

data-step to specify the step number at which the element should be shown,
data-intro to specify the information to be displayed in the tooltip

In the above html just to explain i would start the tour from h1 element and move on to the list elements one by one.

     <h1 data-step=”1″ data-intro=”header”>Web-Worker.in</h1>
     <li data-step=”2″ data-intro=”link 1″>Home</li>
     <li data-step=”3″ data-intro=”link 2″>Blog</li>
     <li data-step=”4″ data-intro=”link 3″>Labs</li>
     <li data-step=”5″ data-intro=”link 4″>Resume</li>

Now we are ready to invoke the plugin by calling it as soon as the screen load is complete.
Add the below script in the html page either inside head or body tag and open the page in a browser.

     <script>
         $(document).ready(function(){
         introJs().start();
         });
</script>

Using Templates

The library also provides some awesome templates which you will get as part of download. To use them in your page you just need to include the respective CSS file along with the introjs.css.

For complete information on API calls, attributes and options provided, visit intro.js on github

For more Examples visit intro.js Examples

Happy coding……………………………:)

Tagged as: