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.
Go to Tours, click on the tour you want to trigger in a specific situation and switch the Trigger selector to Custom JavaScript.
We prepared helper functions for you, making writing the advanced triggers easier. These helpers are available under the this
keyword.
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
.
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.
this.api
This object is a shorthand for the standard Product Fruits JavaScript API. See our docs for more details.
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();
}
});