Tour block

Overview

Tours consist of tour-specific blocks from your block library. Each tour step functions like a regular block but comes with built-in features that help with creating step-by-step linear guides.

Tour steps

The steps property in a tour block defines the individual steps. Each step acts as an independent block but is automatically linked to the previous and next steps through the built-in previous and continue exit nodes. Users can exit the tour at any step using the cancel exit node.

When adding steps into a tour block, you can add:

• Tour specific blocks from your library.
• Built-in wait steps that pause the tour until the user interacts with your application (for example, by clicking a button or navigating to a specific page).

Custom steps

Custom steps are blocks from your block library that you can add into a tour. When creating a block template, you can mark it as a tour block, making it available for tours.

Tour step exit nodes

Tour-specific blocks come with predefined exit nodes to ensure reliable navigation through the tour:

• continue: Connects to the next step in the tour.
• previous: Connects to the previous step in the tour.
• cancel: Connects to the cancel exit node of the tour block.

To ensure compatibility, use these exit node keys in the underlying component.

Reordering steps

Sometimes you may need to reorder steps in a tour. To do this, hover over the step and drag it by the handle that appears on the left.

Wait property

Every tour step includes a wait property that pauses the tour until the user interacts with your application. This interaction can be a click event, navigation to a specific page, or no interaction at all. See the wait property page for configuration details.

Wait step

The wait step works similarly to the wait property but is implemented as a separate step within tour blocks. It pauses the tour until the user takes a specified action.

Options:

• Interaction: Defines the type of interaction required to proceed. Options include:
  • Click: Proceeds when the user clicks a specified element.
  • Navigation: Proceeds when the user navigates to a specific page.
  • Delay: Proceeds when the specified amount of time has passed.
  • None: Disables the wait property, requiring manual progression (e.g., via a button click).
• Element: The CSS selector of the element needed to be clicked to proceed (available when Click is selected).
• Page: Defines the target page or page for the interaction (available for both Click and Navigation). See the page targeting section for configuration details.