Tour Guide
With this element, you can create an accessible tour guide for your page. It will display a series of steps that the user can follow to learn how to use your page.
Activate
To activate the Tour Guide element, go to Bricksforge > Elements and enable the “Tour Guide” element.
Now, a new element “Tour Guide” can be found in the Bricks Element List.
How to use
To show a Tour Guide to a page, drag the element to your element structure and configure it as you like.
Settings
| Setting | Description |
|---|---|
| Active the tour | Enable or disable the Tour Guide. |
| Hide in Builder | Enable or disable the Tour Guide in the Builder. Once styled, you can disable this setting. |
General
| Setting | Description |
|---|---|
| Scroll to element | If you want to scroll to the element when the step is shown, enable this option. |
| Use Modal Overlay | If you want to use a modal overlay, enable this option. |
| Trigger | Choose the trigger to start the tour guide. You can choose between “On Page Load” or “On Click”. |
| Trigger Selector | If you choose “On Click” as the trigger, you can specify the selector to trigger the tour guide. |
| Trigger Once | If you want to trigger the tour guide only once, enable this option. This is only available when the trigger is set to “On Page Load”. |
Steps
Here you can setup the steps of the tour guide. You can add as many steps as you want. Each step has the following settings:
| Setting | Description |
|---|---|
| ID (optional) | A unique identifier for the step. (Only needed if you want to handle custom operations from outside) |
| Title | The title of the step. |
| Text | The text of the step. |
| Element Selector | The selector of the element that the step is related to. |
| Position | The position of the step. You can choose between different positions. |
| Show Close Icon | If you want to show a close icon, enable this option. |
| Overlay Padding | The padding of the overlay. |
Also, each step can have one or more action buttons. For each action button, you can set the following settings:
| Setting | Description |
|---|---|
| Action | The action of the button. You can choose between “Next”, “Back”, “Complete”, “Cancel”. “Next” will go to the next step, “Back” will go to the previous step, “Complete” will complete the tour guide, and “Cancel” will cancel the tour guide. |
| Text | The text of the button. |