How To Include Intro Module Into Your Website

Have you ever wondered how you can explain about your website to the users?

If you have complicated UI or if there are lots of things to do in your webpage then, there is possibility that user might get lost.

Best method to tackle this is to include simple intro tour which can guide users

Are you wondering how

Ok let’s begin,

You can achieve this by Intro.js

Intro.js is open-source and free to use. It is an javascript library to provide your website a simple intro functionality.

Benefits of Intro.js:

Minified version of javascript and css file
User can navigate with arrow keys and mouse as well
Works on all browser
You can customize theme
You can control its behaviour

How to get started

Setting up Intro.js is not a hard task, that’s the reason I pick this up for my web projects.

Include the following css stylesheets in head tag of your website

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs-rtl.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.css">

After linking the css stylesheets, now you have to include the intro.js javascript library in your website.

Include the following script in your website, right before closing the body tag.

<script  src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.js"></script>

Now you are all set to use Intro.js in your website.

Lets talk about its usage now.

Add data-intro to the HTML elements which you want to introduce.

data-intro is the explanation which you want to show in the popup explaining the element in detail.

introJs().start();

You can also start an intro in particular class by doing this

introJs(".intro-this").start();

By following steps defined in this article, you will be able to include simple intro module in your website.

As per my experience, I had to change some CSS according to my needs. There is possibility that CSS of your website may collide with the intro.css which can cause in messy layout of popup, you can easily resolve that by inspecting the HTML in chrome.

Start Demo Now