Bootstrap Tour in your Backbone.js App

What is the best way for new users to know your product inside out in the shortest time?

At SupportBee, we want to make sure that people can learn to use our Help Desk Software in less than 10 minutes. Although screenshots and videos are a great way for people to learn about your product before signing up, a product tour is a better way to onboard them. It makes the onboarding more enjoyable and interactive. Users learn your app by trying out simple actions and navigating through your product.

If you are a fan of Twitter Bootstrap, you’re going to love Bootstrap Tour. It is a quick and easy way to build your product tour. Don’t use Twitter Bootstrap? Not a big deal. This library does not depend on the full Bootstrap package. The only dependencies are the tooltip and popover files.

Using Bootstrap Tour in a Backbone.js web app

In this post, we will share how we built a product tour in our Backbone.js app SupportBee.

Applying Bootstrap Tour in static web pages is pretty simple. However, it can be quite tricky to handle in a one-page app. Let’s see a quick and dirty solution first-

The product tour will start by greeting user right after the login. After they create their first ticket, the ticket view will be displayed. For the tour to continue with the steps in ticket view, we write the following codes in the ticket view. You might notice that the code is scattered all over the place, which is bad. Behold, we will refactor it later.

Cleaning up the code

We create a class for the tour and putting everything related to tour inside that class. An instance of the tour will be initialized in the Main View. No other views should know about the tour.

Given the fact that the ticket view doesn’t know about the tour, we need to refactor the code that continues the tour at the right step in the ticket view. Well, we bind to an event in Tour Class and trigger the event in Ticket View.

We continue this event binding technique at other places where we want the tour to automatically go on to the next step after some user action. The events are generic and can be used to dive some other actions as well.

Feel free to comment or share your own experience on using Bootstrap Tour. We hope that you also pick up useful tips from this blog post.

blog comments powered by Disqus
Anh Do
Anh Do