Understanding how Tour steps work

Note: The above video displays an outdated version of Chameleon's interface. It has been replaced to give our users a more intuitive and pleasing experience. We will soon create new videos to showcase our new UI 🙂

A Tour step is the individual prompt or user experience that is shown as part of a Chameleon Tour.

A Tour can consist of a single step (e.g. for an ad-hoc notification), or be multi-step (e.g. as part of a tutorial flow). We recommend keeping tours to 3-4 steps at a maximum to avoid fatiguing and overwhelming users.

You can build steps from within the Tour View:

Step configuration options

Once you Create a new step, you will be prompted to choose a Template or go with a blank canvas.

👉 Learn more about using Templates for your Tour steps

Upon choosing one, you'll be taken to the Step Builder. Here, you have a visual representation of your step component and three menus, represented by circle icons:

Location & Position (pin icon): where you can configure your Tour's positioning, the pages where it will show, etc.
Add Content (plus icon): where you can add and configure different components to your Tour step.
Actions (clapperboard icon): where you can adjust animations and triggers

Some relevant configurations that you can access through these menus:

Configure when the step should show (which page and whether any user actions are required).
Bring focus to the component, by setting the position of the step on the page and adding a shroud.
Change the step size, style and add components such as the progress indicator or media (video/image/gif).
Set how the user should interact with the step, including how a user should move to the next step, buttons and their actions, and dismiss options

In the Step Builder, you are also presented with a top bar, that allows you to switch between the different modes (Navigate, Edit, and Preview), move to a different step, or even create a new step.

While you're previewing your Tour, this top bar will also display important messages that can give you insights when things go wrong. For example, you will be alerted when a step is not set to be displayed on the current page, when an element is required and does not exist on the current page, etc.

Reordering steps

Steps are triggered in the order that they are listed. You can drag steps to reorder them according to your preference.

Later steps do not trigger without the previous step being completed, and there is no way to jump between steps. For example, step 2 will not trigger unless step 1 is completed; and there's no way to jump from step 1 to step 3.

👉 Have any questions or issues? Review the best way to get help.