Intro.js – Create a Step by Step Tour of your Website or Product

Are you looking for a website tour plugin or software that will guide your users to your entire website structure? Then we have the free solution for your hunger.

Intro.js – An open source jQuery plugin that will guide you to create a step by step tour of your own website or a particular product.

Every webmaster has experienced the guided website tour either this way or that way, so if looking at the website tour on others website initiates your hunger then you are at the right place to learn how to build a guided tour of your own website.

intro.js

How to use Intro.js – Complete Guide:

First step first: Download the intro.js and introjs.css from here.

Then just include both the files in the web page.

Include the intro.js before the </body> tag and include the intro.css in the <head> tag.

Note: Don’t forget to include the Jquery library using the CDN or the file.

 

Now let’s start with the first step the Start Tour button

The HTML Code to create a tool tip and a button

The Javascript Code:

This was the code to start with Intro.js

Know More about these Technologies:

Let’s learn more about the above code:

data-step=”n”: data-step signifies the numerical step of the tour (where n = 1,2,3,4,5….) basically the ordering of steps.

data-intro: text to be displayed in the tooltip or we can call the explanation text.

Here is our tutorial:

At the very first we created the Start Button using the HTML & Javascript code snippets.

intro js start

Now we created the navigation menu on the right.

intro next step

Now let’s start with our Intro.js, by clicking on Start Tour we check this out.

thisistuluzz

Now going further, click the next button we go further:

we are tuluzz

Let’s go further and check out next:

know more about tuluzz

Similarly, we go further and check out our next tabs:

lasttabtuluzz

Now navigating to the last step, Done. here comes the end of the guided tour using the Intro.js

Below is the full code of the demo mentioned above:

Now if you want the position of the tooltip to auto, you can set the position of the tooltip using the below function:

This is how you can introduce your website users to any of your product or even website using Intro.js

Let’s learn more about Intro.js Attributes:

Intro.js Attributes:

data-position: This defines the position of the tooltip, top, left, right, bottom, bottom-left-aligned, bottom-middle-aligned and bottom-right-aligned. The default is the bottom.

data-highlightClass: This attribute appends a CSS class to the helperLayer

tooltipPosition: Default tooltip position

These were some of the basic tips to play and tackle with Intro.js, for more tips and tricks you can go through the official website and official docs of the library.

Now it’s your time to go and try Intro.js on your website and introduce your users and clients to a new level of your website.

(Visited 189 times, 1 visits today)
Share is Caring...!
This entry was posted in Web Design and tagged , , , , . Bookmark the permalink.
Amazon and the Amazon logo are trademarks of Amazon.com, Inc. or its affiliates.
Tuluzz.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for website owners to earn advertising fees by advertising and linking to Amazon(.com, .co.uk, .ca etc) and any other website that may be affiliated with Amazon Service LLC Associates Program.

Leave a Reply