Within any Tour step, you have the option of adding two buttons: a primary and a secondary.

These buttons can be added from the Add content panel.

For each of these buttons you can:

  1. Adjust the design (e.g. text, style, position etc.)
  2. Select how it links to other steps in the same Tour (e.g. move the user to the next or previous step)
  3. Enable an additional action (e.g. redirect URL, fire a click, run code etc.)

Button configuration

Clicking on the button will display a configuration panel, from where you can define:

  • Fill, border, and text colors
  • Positioning
  • Linking to other steps (how the button links to other steps within the Tour)
  • Additional action (other actions, such as triggering a Tour or Survey 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.

    💡 Tip: 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.

Additional actions

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.

  • Load URL
    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.

    💡 Tip: You can also use a "mailto" link to open the user's email client with an address pre-populated (for example mailto:email@domain.com).
  • 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 Survey: show a Chameleon Survey from the button, to collect feedback. Any Trigger conditions for the Survey (e.g. click an icon) will be ignored in this instance.
  • 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.
  • Run Code: run Javascript code to launch a custom action. This could include a back-end message or opening a custom dialogue window, or placing the cursor in a certain field etc. See examples of this here.

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 form the Add content panel and the current options are:

  • 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? Get in touch with us!




Learn more

Did this answer your question?