Within any tour step you have the option of adding two buttons, from the "Content" menu in the top bar:
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 user to next or previous step)
- Enable an additional action (e.g. redirect URL, fire a click, run code etc.)
To configure these options, click on the button to open up the options in the topbar. Let's look at these in more detail:
Adjusting button design
To change the text in the button, simply click the button and type the text you would like.
You can also select the button fill and outline colors, the position of the button (e.g. left, center, right aligned). This is helpful to create a clear primary and secondary action.
This example shows a blue banner created with Chameleon, using two buttons styled differently.
Linking to other steps
Each button can be set to either:
- Not linked (don't close step upon clicking button)
💡This is helpful when setting an "Additional action" on the button (e.g. launch Typeform survey, or open Intercom messenger) that is not related to the tour.
- Move user to the next step in the tour
- Move user to the previous step in the tour
- Exits the tour
Goes to next step
If that is the case, you can manually set the URL redirect in the "Additional actions" menu (see below).
If the next step of your tour appears on a different URL, then you can either:
- let a user manually navigate to that page (and the step will show when they are on the correct URL and have fulfilled any other criteria)
- configure a URL redirect from the button as an "Additional action".
💡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.
Goes prev. step
If the previous step is on a different URL, then 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.
Exits the tour
You can use this to allow a user to opt-out of this tour. You can also let users exit / pause / defer / snooze the tour with a dismiss cross; read more about those options here.
An example step where the second "button" has been styled to read like a link "I'll explore on my own" and dismisses the tour.
One of the most powerful aspects of Chameleon is the ability of the button to launch one of a range of actions. These appear within the "Additional actions" dropdown when a button is selected.
- Load URL: set a URL that loads when a user clicks the button. Can also open in a new tab -- great for showing users help documentation.
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. Do this by using 'Load URL' and adding
mailto:email@example.com (replace firstname.lastname@example.org with the actual email address). You can use other parameters to fill pre-populate the subject, cc/bcc fields, body etc. and these are described here.
Note: this will open the default email client set on that user's browser. To learn how to configure, read this blog post. In case your users do not have this configured, you may wish to also clearly state the address they should email within the body copy of the step.
- 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. A tour attached in this way can also be shown automatically (based on the target audience). The tour must be live to be selected here.
- 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 survey 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 survey: show a Typeform to collect user responses to a survey. 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, please email us.
Moving forward without a button
You can also let a user move forward in a tour without clicking a button, and instead based on them interacting with your page.
You can set this within the "Interact" menu in the topbar
- Clicking anywhere: Any user click will cause the step to end and the next to show. This is great when the step is positioned "Relative to screen" within the "Focus" menu and "Apply shadow" is selected.
- Clicking on a specific element: Select a specific element that a user must click to move to the next step. This is great when trying to force the user to engage with a specific part of your interface. This option is not available when step is "Relative to screen" and "Apply shadow" is selected, because the shadow / shroud blocks the user from interacting with anything specific on the screen. This option is replaced by the one below when a "Lightbox" highlight is used (available when step is positioned "Snap to element")
- Clicking inside the lightbox: a user can only click inside the highlighted area. This is only available when the position of the step is "Snap to element" within the "Focus" menu and a "Lightbox" highlight is applied. Note: you cannot have both this and a button, to prevent a user taking the wrong path.
These configurations provide you a wealth of options to help a user interact with and learn the interface within your product. If you have any questions or need help, then please do message us! ️