Skip to main content

🎉 Product tours

Introducing "Product Tours", our newest feature that lets you create interactive and engaging tours of your products. This tool is designed to be user-friendly and efficient, ensuring your customers get a comprehensive understanding of what you offer. It's all integrated within our Gleap widget, making it easy for you to guide users through your product's features and benefits in an engaging way.

Setting up the product tour​

Our visual product tour editor lets you easily select the elements that serve as anchors for your tour steps. Simply click on the desired element to set it as an anchor.

Using stable anchors​

In some cases, the default anchor selection may not be reliable enough. To ensure stability, you can assign a custom identifier using the data-gleap-tour attribute. Gleap prioritizes this attribute when determining anchor points, making your product tour more robust—even if the underlying DOM structure changes.

For example, add a unique identifier to an element like this:

<div data-gleap-tour="someid123"></div>

By hardcoding these IDs into your elements, you create a consistent reference that enhances the reliability of your tour.

Start a product tour by code​

Start a product tour with the code below.

Gleap.startProductTour("PRODUCT_TOUR_ID");

Start a product tour with URL parameters​

You can also start a product tour with URL parameters. This is useful if you want to send a product tour to specific users. For example, you can send a product tour to a specific user by sending them a link like this:

https://yourapp.com/?gleap_tour=\{your-product-tour-id\}&gleap_tour_delay=\{delay_in_seconds\}

Please replace {your-product-tour-id} with your product tour ID and {delay_in_seconds} with the delay in seconds you want Glap to wait until the product tour is shown.