An Introduction to Product Tours with Intro.js

Selling products online has become a trend for catching the attention of a global audience. Among those products, it’s easier to sell purely web based products and services compared to tangible products. Marketing products online is a decisive factor in making higher sales. So, it’s important to show the features of your products and services in an interactive way to catch the attention of potential customers. Product tours, also known as feature tours, are a perfect solution for promoting a product. This tutorial is going to explain the importance of creating product tours, and show how Intro.js can be used to build an effective product tour.

What is a Product Tour?

A product tour is a series of steps that introduces the existing features of a product or features added in the latest version. There are various types of product tours, and until recently, the majority of product tours were created as presentations using Flash. Recently, JavaScript libraries have become much more popular in building product tours as they provide an interactive demonstration of product features, instead of static images and animations.

Why Do I Need a Product Tour?

Generally, web based products are associated with a website for marketing purposes. These websites contain user guides or documentation to illustrate the functionality and features of the product. But these user guides are not as effective as product tours for the following reasons.

• People don’t like to read long documentation.
• Documentation doesn’t provide interactive demo of each and every feature.
• People don’t regularly read the docs and hence it’s difficult to introduce new features.

As a solution, product tours are used to highlight features and catch the attention of new users to the product. The features of product tours may vary between different types of product tour creation libraries, but each library provides a common set of features required for building tours. Let’s take a look at the most basic features of a product tour creation library.

Features of Product Tour Creation Libraries

• Product tour start button – This button might come with the library, or the developer might be required to define a custom button to initialize the tour. This button should be designed such that it catches the attention of users and is normally larger than normal buttons.
• Product tour steps – Once started, the user should be able to navigate through a series of steps introducing its features until the product tour is completed. A product tour creation library should contain a simple and clear way of defining steps in the tour by assigning various HTML elements in the document. Even though it is not mandatory, it is valuable to have Previous and Next buttons to navigate through the steps of product tour.
• Product tour skip button – It is almost certain that not every user wants to go through the complete product tour. Sometimes the first few steps of the tour might be effective enough to make the decision of buying the product. In such situations, users should be allowed to skip the tour and move forward. So the library should contain a Skip button that lets the user skip the tour. This button should be available on every step of the tour.
• Product tour complete button – As the user reaches the final step, there should be a way to complete the tour. Generally, this will be a button available in the final step. We need to have an effective call to action for this button. Usually, the call to action will be to purchase or try the product. A Complete button will replace the Skip button on the final step.

These are the general features of a product tour. Next, let’s look at some of the popular libraries for creating JavaScript based product tours.

Product Tour Creation Libraries

There are several JavaScript based product tour creation libraries in existence. Each of them provides features unique to the library. Some of the more popular choices are shown below.

• Intro.js
• Bootstrap Tour
• Joyride
• Hopscotch
• Pageguide.js

Among these libraries, Intro.js provides all the essential features for a product tour. So, for the purposes of this article, we are going to use Intro.js to create an example product tour.

Building a Product Tour Using Intro.js

Intro.js is a lightweight open source library for creating step by step tours of a website or product. You can grab a copy of this library from Github. We can start the implementation by downloading the latest version. Once downloaded, you can extract the zip file and try the sample tours inside the example folder. Generally, all the features and necessary information is available on the web page, and the product tour is used to highlight the features with additional information. In this tutorial, we are looking at a slightly modified product tour, where none of the features is available initially on the web page. Each feature will be displayed as we move on with the tour. Let’s start by copying the necessary files to a new folder for this tutorial. Step 1 – Add Intro.js files First, we need to add the Intro.js related files into our project folder. Copy intro.js and introjs.css into the project folder. Step 2 – Creating the HTML file Create a new HTML file and include the JavaScript and CSS files as shown in the following code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="introjs.css" rel="stylesheet">
  </head>
  <body>
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="intro.js"></script>
  </body>
</html>

Step 3 – Designing the First Step As I mentioned earlier, all the steps will be hidden except for the initial step. The product tour start button and the first step are the mandatory things we need here. These are implemented using the following code.

<div class="main_container">
  <div class="flexi_form_title">
    <h1 data-step="1" data-intro="This is flexible forms tour">Flexible Forms</h1>
    <a id="flexi_form_start" href="javascript:void(0);">Start Tour</a>
  </div>
</div>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="intro.js"></script>
<script>
  $("#flexi_form_start").click(function() {
    introJs().start();
  });
</script>

The preceding code needs to be inserted inside the <body> tag of the HTML document. Please note that CSS styles for this elements are not included here as it’s lengthy. You can find the CSS code in the source files. At this point, you should have a screen similar to the following. Intro.js uses a custom data attribute named data-step for defining the steps of the product tour. This will be a numeric value used to define the ordering of steps. There is also a data-intro attribute for providing an explanation of each step. Once the button is clicked, we have to initialize the product tour by calling introJs().start(). Now, you should have the first step of the tour as shown in the following image. Step 4 – Designing Hidden Steps Once the first step is completed, we need to show the next set of steps, which are hidden during the initial page load. So let’s take a look at the following code.

<div id="form_container">
  <form class="flexi_form" data-step="2" data-intro="Flexible form default layout with multiple field types" style="display:none"  data-position="bottom">
    <ul>
      <li data-step="3" data-position="left" data-intro="Inline form validation">
        <div class="left">Text Field</div><input type="text" />
      </li>
      <li data-step="4" data-intro="Customizable Form Layouts">
        <div class="left">Dropdown Field</div>
        <select>
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
      </li>
      <li data-step="5" data-intro="Guidence for filling forms">
        <div class="left">File Field</div>
        <input type="file" />
        <div class="right">Please Upload PDF Files</div>
      </li>
      <li>
        <div class="left">Checkboxes</div>
        <input type="checkbox" /><input type="checkbox" />
      </li>
      <li>
        <div class="left">Dropdown Field</div>
        <select>
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
      </li>
    </ul>
  </form>
</div>

This code block is inserted after the first block of code and within the main_container element, and will be hidden initially.This block contains multiple steps of the product tour. Here, we have also used data-position attributes, which enable us to define the direction of the explanation box. As we move through the steps, we have to show the features dynamically. So, we are using custom JavaScript code to filter each step in the tour. Consider the following code.

<script>
  $("#flexi_form_start").click(function() {
    introJs().start().onbeforechange(function(targetElement) {
      $(".steps").hide();
      $(".left").css("float", "left");
      $("input").removeClass("error");
      $(".right").hide();

      switch($(targetElement).attr("data-step")) {
        case "2":
          $(".flexi_form").hide();
          $(targetElement).show();
          break;
        case "3":
          $("input").addClass("error");
          $(targetElement).show();
          break;
        case "4":
          $(".left").css("float", "none");
          $(targetElement).show();
          break;
        case "5":
          $(".right").show();
          $(targetElement).show();
          break;
      }
    });
  });
</script>

Intro.js provide a function called onbeforechange(), which executes before each step transition. The next step element will be passed as an argument to this function. We can filter the step using a simple switch statement as shown in the previous code. Then we filter each step inside the switch statement and add necessary code to show the product features. This demo is used for illustrating the power of product tours and most of the features are not directly related to Intro.js. Your product tour will look similar to following screen. You can view the complete demo and source code for this product tour at the end of this tutorial. Step 5 – Implementing Complete Functionality As mentioned in the introduction, it’s important to provide a call to action on completion of the tour. Here, we will be redirecting the user to another page after clicking the complete button. This is done using the following code.

<script>
  introJs().start().oncomplete(function() {
    window.location.href = "complete.html";
  }).onbeforechange(function(targetElement) {
    // The rest of the code
  })
</script>

The Intro.js oncomplete() method is used for executing code after completing the product tour. This is invoked when the user clicks the Done button on the final step. Here, we are redirecting the user to another page. You should have a strong call to action for the users once they click this button. Step 6 – Implementing Skip Functionality Users should be able to skip the tour any time and hence we have a Skip button on each step, except from the final one. Intro.js uses its onexit() method for implementing skip functionality. The following code has been modified to include a call to onexit().

<script>
  introJs().start().oncomplete(function() {
    window.location.href = "complete.html";
  }).onexit(function() {
    window.location.href = "complete.html";
  }).onbeforechange(function(targetElement) {
    // The rest of the code
  })
</script>

Conclusion

This article has looked at all the basic functionality of a product tour creation library. Feel free to download the source code and check out the demo using the following links. Download Source Code View Demo Now, it’s time for you to promote your product using an amazing product tour. Let us know about your product tours or any other unique product tours available online.

Frequently Asked Questions (FAQs) about Intro.js Product Tours