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 trigger

The tour trigger property defines when a tour should begin. By default, the tour starts automatically when the user reaches the tour block. However, you can configure custom triggers to start the tour based on specific conditions, like when someone visits a page, clicks a button, or sees something on screen.

Trigger conditions are defined as an array, and all conditions must be met for the tour to start. The following trigger types are supported:

• User navigates to a page – The tour starts when the user navigates to a specified URL.
• User clicks on an element – The tour starts when the user clicks a specific element (use CSS selector).
• Element is on the page – The tour starts when a specific element is present in the DOM (use CSS selector).
• Element is not on the page – The tour starts when a specific element is not present in the DOM (use CSS selector).

These triggers give you full control over when and how tours are launched within your application.

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.

Live examples

Too see the tour block in action, check out these live examples with source code:

• Tour
• Onboarding hub
• Floating checklist