Create a website tour using Bootstrap-tour

August 15th 2017 - Create a website tour using Bootstrap-tour

Reading + Setup + Testing time: ~ 20 minutes

Hello again! Ever since I created this website and integrated it with Google Analytics (see this) I have been seeing the statistics and observed that most of the pages have been getting fewer views than the home page. That got me thinking "Hmmm, maybe viewers are not aware of the navigation bar... If only I could create a tour...". Then voila!

Enter bootstrap-tour!


Before we begin:

What is bootstrap-tour?

Step 1: Include the bootstrap-tour javascript and css files


Visit CDNJS official website and copy the links of bootstrap-tour.min.js and bootstrap-tour.min.css. This is applicable if you're using bootstrap already.
If you're not using bootstrap then copy the link of standalone bootstrap-tour-standalone.css and bootstrap-tour-standalone.min.css.
Include these files in the head tag.

HTML head section

                        
                            <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.min.css" rel="stylesheet">
                            <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js"></script>
                        
                    


Step 2: Define the steps necessary for the tour.

Now that you've added the JavaScript and CSS links, we need to define the steps for the tour. These are just highlights you wish to see in your website and can be tagged to any div element on your webpage.
Generally you would want to add this kind of feature on your home page but it also depends on you requirement. I added this to my homepage to show viewers to check every section.
We first create a new object instance of Tour(), then add steps using addSteps() method and initialize it. The restart() makes sure to fire the tour everytime the home page is loaded. This is optional. If you do not want to use this option then you can use start() or start(true).
Note: Make sure your webpage has the elements with the name enclosed in quotes.

HTML head section - Add JavaScript

                        
                        $(function () {
                            var tour = new Tour() ;

                            tour.addSteps([{
                                    element: "#profile",
                                    title: "Check out my profile 😎",
                                    content: "

Includes my work experience, projects, skill set, etc.

" }, { element: "#blog_post", title: "My latest blog", content: "

Check out my latest post!

" }]); // Initialize the tour tour.init().restart(); });

Step 3: Testing

If you had copied / edited the code correctly, then just launch your homepage / webpage (where the tour is configured) and check it out!
There are several other cool things you can do with bootstrap-tour which you can check out here.


Congratulations!! You have an awesome website tour for viewers who visit your webpage the first time (or everytime)!