Within any Tour step, you have the option of adding two buttons: a primary and a secondary.
Soon: These buttons can be added by clicking on "Primary button" or "Secondary button" under Interactions in the Control Panel.
Now: These buttons can be added from the Add content panel.
For each of these buttons you can:
Adjust the design (e.g. text, style, position etc.)
Select how it links to other steps in the same Tour (e.g. move the user to the next or previous step)
Enable an additional action (e.g. redirect URL, fire a click, run code etc.)
Clicking on the button will display a configuration panel, from where you can define:
Fill, border, and text colors
Linking to other steps (how the button links to other steps within the Tour)
Additional action (other actions, such as triggering a Tour or Microsurvey to start, loading a URL, clicking an element, etc.)
Linking to other steps
Each button can be set to either:
Execute no progression action
Move the user to the next step
If the next step of your Tour appears on a different URL, you can either let the user navigate manually to that page, or configure a URL redirect from the Additional action option.
Instead of redirecting, consider prompting the user to manually navigate (take action to reach the new URL). This will help the user internalize what you are showing/teaching more quickly.
Move the user to the previous step
If the previous step is on a different URL, the step will automatically redirect to that URL, as long as the URL set of the previous step is "loadable" and does not contain wildcards or a regex.
Dismiss the Tour
You can use this to allow a user to opt-out of this Tour, either by exiting or snoozing it.
👉 Understand the different dismiss options
One of the most powerful aspects of Chameleon is the ability of the button to launch one of a range of actions. You can configure these from the Additional actions option.
Set a URL to load when a user clicks the button (it can be configured to open in a new tab)
Note: the step will only show if it matches the current URL. If a subsequent Step's URL trigger does not match the redirect based on this action, that Step will not show.
You can also use a "mailto" link to open the user's email client with an address pre-populated (for example
Click Element: an element on the page can be automatically clicked when a user hits the "Next" button. Great for redirecting users without using URLs. Learn more about how Chameleon identifies elements.
Start Tour: directly begin another Chameleon Tour. This means you can string together different Tours. Only Live and Manual Delivery Tours are available to select here. Any Trigger conditions for the first step of the Tour (e.g. click a button) will be ignored here.
Start Microsurvey: show a Chameleon Microsurvey from the button, to collect feedback. Any Trigger conditions for the Microsurvey (e.g. click an icon) will be ignored in this instance.
Calendly scheduler: show a Calendly modal to help users schedule a call. Read more in our Calendly integration guide.
Delighted NPS: show a Delighted NPS Microsurvey to collect feedback from users. Read more in our Delighted integration guide.
Intercom messenger: open the Intercom messenger window with a pre-filled message to help users start a conversation. Read more in our Intercom integration guide.
Typeform Microsurvey: show a Typeform to collect user responses to a microsurvey. Read more in our Typeform integration guide.
Note: Some of these integration add-ons (Calendly, Delighted, Intercom, Typeform, Custom JS) are only available on certain advanced plans. If you're interested in using these, feel free to let us know.
Using no-button click actions to progress or dismiss the Tour
It's also possible to determine click-based actions for users to progress or dismiss the Tour, without making use of buttons. These can be added from the panels under Interactions in the Control Panel. The current options are:
Click to complete, Click to progress
This option allows the user to click somewhere to progress to the next step. The clicking options available here will depend on how the step is positioned and whether there's any shroud or lightbox. The existing options are:
- Anywhere outside the step
- Specific element (available when the Step is positioned relative to the screen and there is no shroud)
- Inside the lightbox (available when the Step is positioned relative to an element and there's a lightbox)
Click to dismiss
This option allows the user to click anywhere outside the step to dismiss the Tour, either by exiting or snoozing it.
These configurations provide you a wealth of options to help a user interact with and learn the interface within your product.
👉 Have any questions? Let us know how we can help.