Product Tour

A step-by-step interactive guide to help customers discover key product features.

How to

The Product Tour component is used to create a step-by-step intro guide of a product.

To connect each tour step to a specific element in the page, add the data-p-tour-target attribute to the target element and set it equal to the index of the step (e.g., 1 for the first step).

<div data-p-tour-target="1">This is the target of the first step of the product tour</div>

You can change the position of the tour pin over the target element using the data-p-tour-position attribute:

<div data-p-tour-target="1" data-p-tour-position="top">This is the target of the first step of the product tour</div>

Possible values are:

• top
• bottom
• left
• right
• center
• bottom-left
• bottom-right
• top-left
• top-right

Dynamic Content #

If your tour component is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.

Once the dynamic content has been added to the page, initialize it using the PTour object. Use the show/hide methods to control the tour visibility.

// do this after your content has been added to the page
var pTour = document.getElementsByClassName('p-tour')[0]; // your dynamically created product tour
var pTourObj = new PTour(pTour);
pTourObj.show();

Display Preferences #

You can use the Local Storage API to hide the tour to users that have already interacted with it (e.g., they pressed the Finish or 'X' close button). You can store the click on the button within the browser (using the Local Storage) and show the tour only if this click was not saved.

First, remove the .js-p-tour class from the tour element so that it is not automatically initialized. Then use the PTour to initialize it:

var pTour = document.getElementsByClassName('p-tour')[0];
var pTourObj = new PTour(pTour);

Now that the tour is properly initialized, you can show it only if the click was not saved within the browser:

if(!localStorage.getItem('p-tour-watched')) pTourObj.show();

Now make sure to save the click event if the user interacts with the tour close buttons:

pTour.addEventListener('click', function(event) {
  // user clicked the close or the 'Finish' button
  if(event.target.closest('.js-p-tour__close')) localStorage.setItem('p-tour-watched', 'watched');
});

Categories

• Plugins > Misc
• Overlays

Bug report & feedback

Component Github page ↗