Tour
Overview
A tour block is used to represent a tour component in your flow.
Tours are great for guiding your users along their journey through your product. Typically they include anchored experiences that educate users on how the product works.
A tour block is comprised of tour items, which are the steps in the tour.
Tour items are finished sequentially. Accordingly, we provide next and back methods that corresponding to completing a tour step and going back to the previously completed tour step.
Completing a tour item could be attributed to clicking a "Got it" button in a popover that explains how to access workspace settings in your application.
Configuration
Tour
Tours can be configured with custom fields.
Tour item
Tour items can be configured with the following default fields:
| Field | Type | Description |
|---|---|---|
| Title | string | Content for the tour item title heading |
| Body | rich text | Content for the tour item body section |
| Next label | string | Content for a next button in the tour item |
| Back label | string | Content for a back button in the tour item |
You can also define a set of custom fields on a tour item.
Transitions
The tour block has a fixed set of transitions that determine which path(s) to follow. These transitions map to tour actions that a user can take.
| Transition | Description |
|---|---|
| complete | Marks the tour as completed |
| dismiss | Marks the tour as dismissed |
Integrating
Get up and running quickly with the pre-built React tour component. Compose and style this component to best fit your needs. Or use the tour block headlessly and attach the tour’s fields and state to your own tour UI component.