Skip to main content

Actions

You can define actions (also called "action listeners") that automatically advance the tour to the next step when the user interacts with an element on the page. This way you can point users to "Click here to do X", and when they do, the tour moves forward automatically.

Available action types​

Five action types are supported:

  • Click - Advances when the user clicks the specified element
  • Hover - Advances when the user hovers over the specified element
  • Focus - Advances when the user focuses the specified element (e.g. clicking into an input field)
  • User input - Advances when the user enters text or selects a value in the specified element (e.g. typing in an input, selecting from a dropdown)
  • Element visible - Advances when the specified element becomes visible on the page. Useful for elements that appear after an action, like a success message or a new section loading in.

To define what element should trigger the action, enter a CSS selector for that element and we'll take care of the rest. See Element CSS Selectors for help finding selectors.

Delay​

You can configure a delay (in seconds) before the tour advances after the action is triggered. This gives users a moment to see the result of their action before moving on. The default delay varies by action type.

Hiding navigation buttons​

You can optionally choose to hide the "Next"/"Prev" buttons when an action listener is active, so that the user has to take the action inside your app to advance the tour. Or you can keep the buttons shown like normal, totally up to you.