Buttons are extremely powerful in helping your users take the right next action for them to succeed.

Within any Tour Step, Tooltip, or Microsurvey button you can leverage buttons to trigger actions, such as moving the user to the next Step, dismissing or snoozing the Experience, navigating to a different page, opening another integration (e.g. Calendly modal), running custom code etc.

More specifically, for any button you can:

  1. Adjust the design (e.g. text, style, position etc.)

  2. Select how it links to other steps in the same Experience (e.g. move the user to the next or previous Tour Step)

  3. Enable an additional action (e.g. redirect URL, fire a click, run code etc.)

You can add/adjust buttons by using the Control Panel for an Experience, within the Chameleon Builder, or by directly clicking the button to edit it.

Button configuration

You can configure the styling of the Buttons easily after selecting that component:

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.

    Quick 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.

    Quick 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 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.

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

Learn more

Did this answer your question?