When you log into Gmail or Facebook for the first time, you can see a bunch of tooltips introducing you to the app. You can also see them whenever they add any new feature. They explain what you can do with the application and where to look for key functions.
These are known as guided tours. Google & Facebook do this really well in a non-intrusive manner. Guided product tours are a great way of introducing users to a web application or new features.
[tut demo=”https://onextrapixel.com/examples/guided-product-tours-like-google-facebook/” download=”https://onextrapixel.com/examples/guided-product-tours-like-google-facebook/guided-product-tours-like-google-facebook.zip”]
How to use Guiders.js
When I was building my app, Ubiq, I too felt the need to create such a user interface. While searching online, I came across a plugin called Guiders.js developed by the team at Optimizely. I tried it out and was able to quickly set up guided tours for different parts of my app.
In this tutorial, I will tell you how to setup guided tours for your product using Guiders.js.
Requirements
You will need to include 3 files in your HTML page to set up guided tours for your application.
- Guiders.js – Javascript file which contains the tooltip functionality
- jQuery.js – Guiders.js uses jQuery library
- Guiders.css – For the formatting the tooltips
These can be found at Guiders.js on Github. It also contains the documentation about the plugin.
HTML
Let’s create a simple guider. Guider tooltips are generally attached to an HTML page element like a link, button, textbox, etc. For our tutorial, we will use a link. When you click on the link “Click Here” you will see a guider tooltip like this
<html> <body> <div style="text-align:center;"> <a id="demo" href="#" >Click Here<a> </div> </body> </html>
JS
Now let us attach an event handler for showing a tooltip on clicking the the link “Click here”.
<script type="text/javascript">
$('#demo').click(function(){
guiders.createGuider({
attachTo: "#demo",
buttons: [{name: "Got it",onclick:guiders.hideAll}],
title: "Name of new feature goes here",
description: "Description about feature goes here",
id: "tip",
overlay: true,
position:6,
autoFocus:true
}).show();
});
</script>
Let’s look at the code in detail. It creates a guider when the link (id=demo) is clicked. guiders is an object created when the file guiders.js is loaded. It has all the functions and variables needed for creating different types of guiders. You can use it directly. We use the createGuider method to create a guider and pass the parameters to configure the tooltip. They are:
- attachTo: (optional) selector of the html element you want to attach the guider to
- buttons: array of button objects
{
name: “Close”,
onclick: callback function for when the button is clicked
(if name is “close”, “next”, or “back”, onclick defaults to guiders.hideAll, guiders.next, or guiders.prev respectively)
} - title: title of the guider
- description: text description that shows up inside the guider
- overlay: (optional) if true, an overlay will pop up between the guider and the rest of the page
- position: (optional / required if using attachTo) clock position at which the guider should be attached to the html element. Can also use a description keyword (such as “topLeft” for 11 or “bottom” for 6)
- autoFocus: (optional) if you want the browser to scroll to the position of the guider, set this to true
We also call the function show() to display the guider. All guiders are hidden by default.
If you want a guider to be displayed on page load, you can directly call createGuider without using the click event handler.
As you can see, it is possible to change the title, description or position of the guider just by changing the value of these parameters. You can also use HTML like ordered lists, images, etc for description. They will be formatted correctly and shown in the guider.
It also has useful autoFocus & overlay options to dim the background around and focus the view on the guider, as shown above.
There are many other options too. You can read about them at the link mentioned above in Requirements.
CSS
I did not have to make any changes in the CSS file of this plugin or my existing HTML pages. This is one of the reasons I really like it. It is completely non-intrusive. However, you can update Guiders.css to customize it to your site.
Now let us look at how to navigate around multiple UI elements. In this example, we create 2 links and 2 guiders, one for each link. When you click the first link you see the first guider. You click on Next button in the guider to go to the second one.
HTML
<html> <body> <div style="text-align:center;"> <a id="link1" href="#" >Demo 1<a> <a id="link2" href="#" >Demo 2<a> </div> </body> </html>
JS
<script type="text/javascript">
$('#link1').click(function(){
guiders.createGuider({
attachTo: "#link1",
buttons: [{name: "Next"},{name: "Close"}],
description: "Click next to move to the next element",
id: "tip",
next:"link2_tips",
overlay: true,
position:6,
autoFocus:true,
title: "Guiders can be used to walk through different UI elements"
}).show();
guiders.createGuider({
attachTo: "#link2",
buttons: [{name: "Back"},{name: "Close"}],
description: "At each point you can provide description about the feature",
id: "link2_tips",
overlay: true,
position:6,
title: "Users can go back or stop the tour"
});
});
</script>
Let’s look at how it works. I have created 2 guiders using the createGuider function. They are created when I click “Demo 1” (id=link1). createGuider creates only one guider. For multiple guiders, you need to call it multiple times. Also, I call show() function only on the first guider so that only the first one is visible. All guiders are hidden by default.
Most of the parameters are the same as the previous example, except:
- id: id of the guider. It is used to identify the guiders during navigation
- next: This contains the id of the next guider that should be made visible when the Next button is clicked
Similar Libraries
There are other plugins which do similar things
[tut demo=”https://onextrapixel.com/examples/guided-product-tours-like-google-facebook/” download=”https://onextrapixel.com/examples/guided-product-tours-like-google-facebook/guided-product-tours-like-google-facebook.zip”]
Final Thoughts
A guided website tour can make the user familiar and comfortable about your new site or application. It increases usability and adoption tremendously. Showing a guider on click, navigating around different elements and positioning the guiders in different ways are the most common use cases you will encounter while designing your UI.
I have tried to cover them in this tutorial. You can easily customize the guiders to suite your requirements. I hope this tutorial has been helpful.
