A step-by-step interactive guide to help customers discover key product features.
All components are based on CodyFrame.
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
<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:
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'); // your dynamically created product tour
var pTourObj = new PTour(pTour);