Custom JavaScript triggers

This feature is available in the Boost plan, and can be disabled upon request

If you need a tour to be launched in an advanced scenario like if a specific select item is selected or a date picker is set to a specific date, you can use custom JavaScript triggers. This feature requires JavaScript knowledge.

Be careful, insert only trusted and well-tested scripts. Otherwise, it might cause security issues or break your application.

Setup

Go to Tours, click on the tour you want to trigger in a specific situation and switch the Trigger selector to Custom JavaScript.

JavaScript helpers

We prepared helper functions for you, making writing the advanced triggers easier. These helpers are available under the this keyword.

Listen to an event for a specific CSS selector

this.listenEventForSelector(event, selector, callback)

Use this helper method, if you want to launch the callback when the specified event is triggered on an element with the specified CSS selector.

Start the current tour

this.tryStartThisTour(force)

This method will try to start the current tour. You don't need to pass the tour ID as you usually would. This method knows the tour for which this trigger is defined. The force parameter will try to launch the tour even if it was finished or skipped by the user previously. The default value is false, that means the tour won't be launched if it was finished or skipped.

JavaScript API access

this.api

This object is a shorthand for the standard Product Fruits JavaScript API. See our docs for more details.

Example

In this example, we will be listening to the change event on a select element and we will trigger the tour if the selected option is 123.

this.listenEventForSelector('change', '#my-select-element', (e) => {
    if (e.target.value == '123') {
        this.tryStartThisTour();
    }
});