Telford 615787
Web Design • Beauty is in simplicity
Like on Facebook Circle on Google+ Follow on Twitter Follow on Pinterest Connect on LinkedIn

Bootstrap-Tour with “Not Now” option for user

Bootstrap Tour with “Not Now - Later” option for userI’m using the excellent Bootstrap Tour on a web application.  Whilst not overly complex, I was mindful that some of those who would be using the application I was developing were not as internet savvy as others.  So the Bootstrap Tour seemed the ideal tool to use.  It allows me to give users the option to take the tour to discover features of the application.  It is pretty straight forward to implement straight out-of-the-box and the application programming interface (API) details a host of options and methods to customise its use.

I intended to present options to user who land on the main page of the application.  Those who needed a little hand-holding could take the tour while those more able users, could choose not to bother with the tour at all.

The Problem

The standard implementation of the displays a popover at the start of the tour that invites user to move to the next step or to end the tour.  If the user chose to proceed they would continue, step-by-step.  For users that decide to end the tour, that decision would be ‘remembered’ by their browser.  The API provides different ways of storing information about progress through the tour including not to store any information at all.  In this case, the tour would be offered on each visit.

I wanted to avoid annoying users by repeatedly inviting them to take the tour so the default option to use of the Local Storage of their browser seemed a good idea.  I also wanted to offer users the option to take the tour later which doesn’t happen if they simply choose to end the tour.  While it is possible to set up a link for users to click that initiates the tour,  I wanted it to automatically start upon their next visit.

The Solution

The solution I found to work involves a javascript function that deletes data stored in the browser local storage and using the template option on the first step of the tour.

The template option allows for customisation of the popover.  By default, the first step includes a ‘Next’ button, an ‘End’ button and a greyed out (disabled) ‘Prev’ button. My custom popover replaces the ‘Prev’ button with a button labeled ‘Later’.

<div class='popover tour'>
  <div class='arrow'></div>
  <h3 class='popover-title tour-start'></h3>
  <div class='popover-content'></div>
  <div class='popover-navigation'>
    <button id='Later' class='btn btn-default'>Later</button>
    <span data-role='separator'>&nbsp;</span>
    <button class='btn btn-default' data-role='next'>Start »</button>
    <button class='btn btn-default' data-role='end'>No thanks</button>
  </div>
</div>

I’ve given the ‘Later’ button a unique identifier id='Later' that I use in the javascript function below.

jQuery('#Later').click(function(){
  tour.end();
  window.localStorage.removeItem("tour_end");
});

When the button is clicked, the end() method stops the tour.  This normally results in data being stored so that the tour is not invoked on later visits.  By deleting that data with window.localStorage.removeItem("tour_end"), the tour is invoked when the user re-visits the page.

You can see this solution in action here.

by
Sid Edwards

Sid Edwards

Web Designer

Sid is Proprietor of tuzongo.com with an interest in helping small and medium-sized enterprises compete with large companies. He has many years experience using coding skills with standard frameworks to create unique award winning websites. You can follow Sid on Twitter, connect on LinkedIn, Like on Facebook or circle on .
Bootstrap-Tour with “Not Now” option for user was last modified: March 3rd, 2017 by Sid Edwards
Leave a Reply

Are you human? (required)

Find me on Google+

Latest Posts

Address

Old Toll Gate, St George's
Telford Shropshire TF2 9FH
Phone: Telford 615787
Website: tuzongo.com
Email: sid@tuzongo.com

Recent Projects

  • Telford
    Telford
    TUZONGO Web Design is the proud sponsor of the Telford Group.  Open to all who wish to share our aim to celebrate...
  • The PathHeights Brand
    Branding a brand new Band
    The band’s name, The PathHeights, derives from the word Ptahites, meaning spiritual, creative beings conveying a collective conscious message. They...