Walk Users Through Your Website With Bootstrap Tour

When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.

Questions, Questions

Bootstrap Tour is a jQuery-based plugin for Twitter Bootstrap which allows you to easily build interactive walkthroughs using a minimal amount of declarative JavaScript configuration in conjunction with your existing DOM structure.

If that doesn't make sense to you, read on - we're going to break it down so you can create valuable, engaging instructions for your users.

Why would I want to create instructions?

If your website requires some level of familiarity, showing your users what to do can be very helpful. Once complete, the user can, in a way, see the "shadow" of the instruction you provided in the walkthrough. This avoids the user having to interpret directions if you used a less clear medium such as video, or even worse, textual guides.

Another use case for an interactive tour is to describe a photo. Imagine you are building a site dedicated to showing off gorgeous panoramas of cities around the world. When a user clicks on a city, an interactive tour allows you to point out elements of the photo that may otherwise go unnoticed.

There are plenty of use cases for when you would want to use a tour.

When should I avoid using a tour?

If your interface follows very clear conventions and you haven't heard any complaints of confusion, adding a tour may block your users from doing what they want to do most: use your application.

While we're on the subject of what to avoid, it would be wise to keep your tour as short as possible. Users want to gather all necessary information to use your application or view your story, but they also want that to happen as quickly as possible. The only exception to this rule would be a site that relies almost exclusively on a tour as a core feature (the described photo site would be a possible example), but even in these cases, it should be easy for a user to exit the tour. Luckily, this is supported in Bootstrap Tour by default; an "End Tour" button is present at every step.

Get Started, Fast

Bootstrap Tour requires, of course, elements of Twitter Bootstrap, as well as its own CSS file and JavaScript file, in addition to jQuery. From the documentation, here are the required assets.


<!DOCTYPE html>
<html>
<head>
    ...
    <link href="bootstrap-tour.css" rel="stylesheet">
    <!--[if lt IE 9]><script src="html5shiv.js"><![endif]-->
</head>
<body>
    ...
    <script src="jquery.js"></script>
    <script src="bootstrap.tooltip.js"></script>
    <script src="bootstrap.popover.js"></script>
    <script src="bootstrap-tour.js"></script>
</body>
</html>

Notice that you will also need to include Bootstrap's base css file in order to display the Bootstrap popover.

Kick off the tour

Next, to get started with a tour, perform the following within your JavaScript file (which we'll cover shortly):


// Create a new tour
var tour = new Tour();

// Add your steps
tour.addSteps([
  {
    element: ".message.message-1", // element selector to show the popover next to;
    title: "Welcome to my tour!",
    content: "We're going to make this quick and useful."
  },
  {
    element: ".message.message-2",
    title: "Let's finish this thing off with a bang.",
    content: "Boom, bang, bam!"
  }
]);

// Initialize method on the Tour class. Get's everything loaded up and ready to go.
tour.init();

// This starts the tour itself
tour.start();

This example was taken almost directly from the documentation, and is the easiest way to get started with Bootstrap Tour.

Let's Go Deeper, Shall We?

Bootstrap Tour offers tons of options to customize each step of the tour you want to create. By default, it supports localStorage (to preserve your spot in the tour if you close the tab and return later), next and previous functions, plus all kinds of callbacks you can set up to respond to users' actions. It also provides nice polish features such as an element highlighter, "reflex mode" (we'll explain more below), auto-advancing steps, and even multi-page tours.

Starter theme

For the sake of this demo, we are going to start with a free template from StartBootstrap.com. StartBootstrap from Iron Summit Media Strategies is a collection of free and premium bootstrap themes.

Once you've downloaded the projects, your file structure should look like this.

. ├── css │ ├── bootstrap-tour.min.css │ ├── bootstrap.css │ └── landing-page.css ├── font-awesome ... ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff ├── img │ ├── banner-bg.jpg │ ├── doge.png │ ├── intro-bg.jpg │ ├── ipad.png │ └── phones.png ├── index.html └── js ├── bootstrap-tour.min.js ├── bootstrap.js └── jquery-1.10.2.js

Note: we've skipped FontAwesome's internal structure, as it won't be important to this tutorial.

Include assets

Next, you'll want to include Bootstrap Tour's CSS and JavaScript in the index.html file. The <head> of your document should look like this:


  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Landing Page Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom Google Web Font -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>

    <!-- Add custom CSS here -->
    <link href="css/bootstrap-tour.min.css" rel="stylesheet">
    <link href="css/landing-page.css" rel="stylesheet">

  </head>

And at the end of the document, you will see the JavaScript just before the closing </body> tag. Once you get the setup working, it's time to get started! Of course, you'll need to add in your own custom JavaScript, so we'll add a "script.js" after the Bootstrap Tour file.


    <!-- JavaScript -->
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-tour.min.js"></script>
    <script src="js/script.js"></script>

  </body>
</html>

You'll want to concatenate and minify these files in your build process. We won't be covering build processes in this tutorial, but you can learn more about this by reading Best Practices for Increasing Website Performance or Meet Grunt: The Build Tool for JavaScript.

Setting up some steps

Let's set up a few simple steps with the following code within our "script.js" file.


(function(){

    var tour = new Tour({
        storage : false
    });

    tour.addSteps([
      {
        element: ".tour-step.tour-step-one",
        placement: "bottom",
        title: "Welcome to our landing page!",
        content: "This tour will guide you through some of the features we'd like to point out."
      },
      {
        element: ".tour-step.tour-step-two",
        placement: "bottom",
        title: "Main navigation",
        content: "Here are the sections of this page, easily laid out."
      },
      {
        element: ".tour-step.tour-step-three",
        placement: "top",
        backdrop: true,
        title: "Main section",
        content: "This is a section that you can read. It has valuable information."
      },

    ]);

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();

}());

This code is very similar to the easy-start example above. We initiate our Tour instance, and for the sake of our tutorial we are disabling storage so that the tour starts at the beginning when the page loads every time. (Removing this option once you've finished creating your tour will allow the storage to work just fine.)

Then, we define a few step classes and associated arguments. Notice the third step's "backdrop" argument; this highlights the element we've selected to attach the popover above.

Making markup changes

Next, we'll add the step classes to the relevant elements. The top of our index file should now look like the following.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Landing Page Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom Google Web Font -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>

    <!-- Add custom CSS here -->
    <link href="css/bootstrap-tour.min.css" rel="stylesheet">
    <link href="css/landing-page.css" rel="stylesheet">

  </head>

  <body>

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://startbootstrap.com">Start Bootstrap</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="tour-step tour-step-two collapse navbar-collapse navbar-right navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav>

    <div class="intro-header">

      <div class="container">
  
        <div class="row">
          <div class="col-lg-12">
            <div class="intro-message">
              <h1>Landing Page</h1>
              <h3>A Template by Start Bootstrap</h3>
              <hr class="intro-divider">
              <ul class="list-inline intro-social-buttons">
                <li><a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a></li>
                <li class="tour-step tour-step-one"><a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a></li>
                <li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a></li>
              </ul>
            </div>  
          </div>
        </div>
  
      </div><!-- /.container -->

    </div><!-- /.intro-header -->

    <div class="content-section-a tour-step tour-step-three">

      <div class="container">
  
        <div class="row">
          <div class="col-lg-5 col-sm-6">
            <hr class="section-heading-spacer">
            <div class="clearfix"></div>
            <h2 class="section-heading">Death to the Stock Photo: <br>Special Thanks</h2>
            <p class="lead">A special thanks to Death to the Stock Photo for providing the photographs that you see in this template. <a target="_blank" href="http://join.deathtothestockphoto.com/">Visit their website</a> to become a member.</p>
          </div>
          <div class="col-lg-5 col-lg-offset-2 col-sm-6">
            <img class="img-responsive" src="img/ipad.png" alt="">
          </div>
        </div>
  
      </div><!-- /.container -->

    </div><!-- /.content-section-a -->
    <!-- ... omitted ... -->
    </body>
</html>

And our page should look something like this upon load:

On the third step we can see the backdrop feature in action:

Great! We've made a functioning tour in about thirty lines of JavaScript.

Utilizing Dynamic Content

Tours are much better when they are personalized, so let's ask our user what their name is at the beginning of the tour, and use it throughout the rest of the tour's steps. Here's the JavaScript we use to accomplish this.


(function(){
    var name = "Friend";
    var tour = new Tour({
        storage : false
    });

    tour.addSteps([
      {
        element: ".tour-step.tour-step-one",
        placement: "bottom",
        title: "Welcome to our landing page!",
        content: "What's your name? <br><input class='form-control' type='text' name='your_name'>",
        onNext : function(tour){
            var nameProvided = $("input[name=your_name]").val();
            if ($.trim(nameProvided) !== ""){
                name = nameProvided;
            }
        }
      },
      {
        element: ".tour-step.tour-step-two",
        placement: "bottom",
        title: function(){ return "Welcome, " + name; },
        content: "Here are the sections of this page, easily laid out."
      },
      {
        element: ".tour-step.tour-step-three",
        placement: "top",
        backdrop: true,
        title: "Main section",
        content: "This is a section that you can read. It has valuable information."
      },
      {
        element: ".tour-step.tour-step-four",
        placement: "top",
        orphan: true,
        title: "Thank you.",
        content: function(){ return "We can't wait to see what you think, "+name+"!" }
      },

    ]);

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();

}());

Note that the content and title arguments can be either a string or a function, which allows them to be evaluated at the time the popover is shown. The callback for the first step gets the user's name (using Bootstrap's built in classes for styling), and then we display that name in the second and last (new) step. If the user doesn't enter a name, or enters only whitespace, we set the default name to "Friend".

The last step also introduces a new property, orphan. This allows the step to be detached from any particular element. We've only left the element classes in for the sake of continuity, and in case we eventually do want to attach that step to an element. Here's what the final step looks like:

Get Creative!

If you want your tour to be useful, you need a good content strategy. Don't just put a few sentences into your JavaScript config and call it done; think about what you're trying to _inspire_ the user to do, whether that is to use your application or simply to be delighted.

Write a narrative

Before you write your tour, write out the story of the user who is going to experience the tour. Figure out who the user is, and what they will think and do throughout the process. A tour is inherently set on some sort of timeline; take advantage of this. Develop a plot line, with a dynamic introduction, rise, and conclusion, and apply the concept to the tour.

Inform and delight

Horace once said:

The aim of the poet is to inform or delight, or to combine together, in what he says, both pleasure and applicability to life.

Famed designer Milton Glaser expanded this by saying:

The purpose of art is to inform and delight.

This, too, can be the goal of a good website tour. Figure out how you can not only create information content, but entertain the user while in the process. For instance, give the user some sense of accomplishment when they complete the tour:


var tour = new Tour({
    onEnd : function(tour){
        giveAward();
    }
});

function giveAward(){
    $(".award").addClass("show");
    setTimeout(function(){
        $(".award").removeClass("show");
    })
}

This snippet could show the user something at the end of the tour as a sort of "thank you" from the tour guide (that's you) for completing the journey.

Utilize the medium

HTML is pliable. Don't just do things step by step; dive into using callbacks and watching user behavior to make experiences like tours more interactive. For instance, you could use this library to do a "choose your own adventure" style narrative that jumps between steps, using the goTo() method. Use callbacks to trigger rich behavior, like animations or iFrame injections. Get creative and remember the power of the medium.


<script>
// initialize/start tour, etc
// listen for a click on any element with the class "go-to",
// And take the tour to a step matching the data-go-to-step attribute
$(document).on("click", ".go-to", function(e){
    // just be sure we have an integer instead of a string,
    // to match the documentation
    var step = parseInt($(this).data("go-to-step"));
    tour.goTo(step);
});
</script>
<!-- inside a popover: -->
<button data-go-to-step="42">Get to the meaning!</button>

Conclusion

Bootstrap Tour is a powerful plugin that can get you started fast. If you apply best practices of UX and content design, a tour may be just the right thing to connect with your audience in a powerful way. Bootstrap Tour offers even more flexibility than we've covered here, so if you'd like a second article going even further with Bootstrap Tour, be sure to let us know in the comments! What other uses can you come up with? Let everyone know below!