🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Product Tour

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

View Demo

Dependencies

All components are based on CodyFrame.

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();

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us