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.

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.

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.

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.

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.

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.

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:

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!

I am the director of technology at Whiteboard, a company based in Chattanooga, TN. I hold a masters degree in Digital Media from Georgia Tech. I'm passionate about building incredibly useful and beautiful things, and inspiring others to do the same through teaching.