Triggers on tour steps allow you to introduce product tours even in complex environments - such as single-page applications, or when you are dealing with animations or longer loading times (few examples in our blog post).
A trigger enables to configure a tour step to appear only when the trigger conditions are met. The majority of triggers are related to an element - for example, a tour step is shown only when a certain element appears on the page.
Triggers are also used to advance a tour automatically. Every tour step needs a way to progress to the next one. Usually, it is a "Next" button within the tour step. However, a tour step can also be configured to progress when the conditions of the trigger of the next step are met. To do this, switch "Progress on click of" from button to "The next step trigger". In this case, make sure to have configured the trigger of the next step.
To enable a trigger on a tour step, scroll down the step configuration to the Advanced section and switch the trigger on.
In the trigger section we have 3 options
- URL equals - optional field - can be used to ensure a trigger only fires on a certain page
- Element - the selector of the element which is part of the trigger
- Element event - the respective event that needs to happen to the element in order for the trigger to fire. For example "click", which is the default selection.
There is a range of trigger element events to choose from, here's the list and respective description for each.
| Element event name | Description |
User clicks on element | Simply click on any point within the element. Mousedown event. Learn more. |
| User moves mouse over the element | Hover mouse pointer over the element. When the mouse pointer is positioned within the element, this event fires. Learn more. |
| User pressed a key within the element | This event is generated only for elements which receive input, such as form fields - <inputs>, <textarea> and anything with the contentEditable attribute or with tabindex="-1" Learn more. |
| User scrolls within the element | This event will fire when the element has been scrolled. If the user puts the pointer over the element and starts scrolling, this event fires. Learn more. |
| Element appears | The system will wait until the element with a specified selector appears on the page. Appears is different from being hidden. If the element is on the page, but is hidden using CSS, it still counts as appearance. |
| Element changed | The change event is fired for <input>, <select>, and <textarea> elements when an alteration to the element's value is committed by the user. Learn more. |
| Focus is on element | This event fires when an element is about to receive focus. For example, when a user presses Tab while filling in a form, the next form field will be highlighted - that means the element received focus. Learn more. |
| Custom event | Developers can use custom events defined in their application as triggers. Learn more. |
If you have any questions about triggers, please let us know.