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 by clicking New step:
Step configuration options
Once you create a new step, you will be prompted to choose a Template or go with a blank canvas.
For subsequent steps, you can choose a template directly from the top bar, rather than needing to open the side panel:
👉 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.Â
COMING SOON - Tour configuration in the Dashboard
Tours will soon be configured in your Chameleon Dashboard. While you will still load the Builder in your website or application to build your Tour, you can make quick adjustments like step order, deleting steps, and more directly in the Dashboard.
