A Beginner’s Guide to Creating an Interactive Website Tour with Intro.js
Have you ever wondered how to help new visitors navigate your website more easily? Well, with the help of a guided tour, you can introduce them to all the important features and menu links in a fun and interactive way.
In this tutorial, I will show you how to use Intro.js, an open-source jQuery plugin, to create your own step-by-step website tour. What makes Intro.js stand out is its page dimming effect and the easy customization of the tooltips’ appearance using CSS. Plus, it has simple dependencies, requiring only jQuery and its own custom CSS and JS files. If you’re already familiar with jQuery, you can have this plugin set up and running in just 30-60 minutes of development time.
Hey there! Today, I want to take you on an exciting journey by using the USamerica’s CSS Equal Height demo as our guide. Together, we’ll explore all the essential elements of the demo page interface. To get a sneak peek of what we’ll be creating, check out the demo link below.
Contents
Let’s Get Started!
First things first, we won’t be diving too deep into the nitty-gritty of HTML or CSS. After all, those aspects are specific to your own page. However, there’s one thing I do want to focus on – using Intro.js (which I didn’t cover in this tutorial). Essentially, you have two options for setting up the different “steps” of the tour.
You can either hard-code these steps into a JavaScript array, like I did, or you can add HTML attributes to the various elements on your page. It’s totally up to you!
For example, take a look at this snippet from the main plugin’s demo page:
Hey there, everyone! Welcome to Intro.js. This little project is all about making your web experience more interactive and engaging.
So, what exactly do these fancy terms like data-step and data-intro mean? Well, they’re just a way for us to keep track of different steps and display relevant information in tooltips.
Instead of cluttering up our HTML with all the details, I like to keep things neat and tidy by storing all the important code in one file, a JavaScript file. This way, our HTML remains clean and organized.
But hey, if you’re just dipping your toes in the water and want to give it a try without diving deep into JavaScript, you can use a simpler technique with HTML5 data attributes.
So, let’s get started and make your web pages come alive with Intro.js!
Now my document head also has some scripts related to the original usamerica demo page. I don’t need to go deep into these styles since they don’t impact the tour. But it’s important to know that I need jQuery, along with introjs.css and intro.js as dependencies.
All these files will be included in the plugin download from Github.
Small CSS Tweaks
When it comes to your tooltip effects, the introjs.css file has some useful default styles. If you want your page to have a different look and feel, you can overwrite these styles in your own stylesheet. As for me, I only made a couple of changes. I increased the size of the font to make the letters bigger, and I also adjusted the line height so that it’s taller.
#tourbtn {
position: fixed;
right: 15px;
bottom: 35px;
}
#tourbtn a {
background: #bac081;
padding: 8px 15px;
font-size: 12px;
line-height: 22px;
font-weight: bold;
color: #454a50;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#tourbtn a:hover {
/* No changes made to this CSS rule */
}
When you visit a webpage, you may notice a special button in the bottom-right corner called the tour button. It’s only there to give you a quick tour of the page in case you need it. You’ll see it once, right after you arrive.
A Simple Introduction to jQuery Codes with Intro.js
Understanding JavaScript may seem difficult at first, but don’t worry! I’ll break it down into smaller sections to make it easier to understand. These code snippets are all located at the end of my HTML page.
If you find it more convenient, you can put the code in a separate JS file.
Let me show you how this code works. First, we define a crucial variable called “introguide” by calling the main introJS plugin function. This variable will be used to create the tour feature. To make things even more user-friendly, we can also set up a tour button on the page using the “startbtn” variable.
Now, let’s move on to setting up the tour itself. We need to create an index that contains all the necessary information for each step of the tour. This includes the targeted element and the content of the tooltip that will be shown to the user.
By following these steps, we can create an interactive tour that guides users through the different elements and features of the page. It’s a great way to help users navigate and understand the functionality of the website.
Remember, the code provided here needs to be copied exactly as it is, including all the HTML tags. This ensures that the code is valid and functions properly.
introguide.setOptions({
steps: [
{
element: ‘.nav-bar’,
intro: ‘Hey there! Welcome to the usamerica demo page. Let me guide you through the interface. Use the arrow keys or hit ESC to exit the tour anytime.’,
position: ‘bottom’
},
{
element: ‘.nav-logo’,
intro: ‘If you click on this main logo, you will see a list of all the usamerica demos.’,
position: ‘bottom’
},
{
element: ‘.nav-title’,
intro: ‘Hover your mouse over each title to get a longer description of each demo.’,
position: ‘bottom’
},
{
element: ‘.readtutorial a’,
intro: ‘To learn more, click on this orange button to view the tutorial article in a new tab.’,
position: ‘right’
},
{
element: ‘.nav-menu’,
intro: ‘Each demo will have links to the previous and next entries for easy navigation.’,
position: ‘bottom’
}
]
});
When setting up this data, you’ll be using the introguide.setOptions() function from the plugin. Inside this function, we’ll pass an array that contains the steps for our guided tour. You can use any jQuery selector for these steps, although it’s generally recommended to avoid using classes unless there’s only one on the page.
You can also specify the position of each step using the data-position attribute, which will default to the bottom if not specified. I’ve included this attribute in each step just to make it clear.
The only line of code we need to start the tour is introguide.start(). You can put this line of code inside an event handler that only triggers when the user clicks on a link or button. However, it’s not required, and the tour can also start as soon as the DOM finishes loading.
I can show you around the website with a guided tour. Just click the “Start Tour” button below to begin exploring!
introguide.start(); /** when the start button is clicked, start the tour */
Once you start the tour, you won’t see the button anymore. But don’t worry, if you want to exit the tour or if it ends, the button will reappear.
introguide.oncomplete(function() { if(startbtn.css(‘display’) == ‘none’) { startbtn.show(); } }); introguide.onexit(function() { if(startbtn.css(‘display’) == ‘none’) { startbtn.show(); } });/** these functions will display the button again when the tour ends or when you exit it */
It’s good to know that we can take advantage of these callback functions to run any customized JavaScript code after the tour finishes or when the user chooses to exit the tour at any point.
I love the Intro.js plugin because the documentation is so clear and easy to comprehend. You can easily incorporate it into any webpage by including jQuery as a library. What I particularly enjoy is the example running on the usamerica demo layout because it perfectly showcases what can be achieved with a typical website tour. If you’re interested in this technique, I highly recommend keeping an eye out!
There are plenty of new social networks and startups that utilize guided tours. When you come across such examples online, they can be incredibly helpful for creating your own website tours.
Other Libraries to Consider
While I personally prefer Intro.js, there are many other website tour plugins that are worth mentioning. Here are a few other options you might find useful:
- Shepherd.js
- Bootstrap Tour
- Driver.js
- Hopscotch
My Final Thoughts
A guided website tour can be incredibly valuable for a new startup or a redesigned layout. Good usability is essential for a successful website, and a guided tour can greatly enhance the user experience. I hope this tutorial has given you a glimpse into the world of Intro.js and how it can help you create informative and engaging tours for your users.
