In addition to setting which page a step should show on, you can configure the step to show after a user action, such as a click, hover, or delay.

This can be a great way to add interactivity to your Tour and improve engagement and conversion. There are some examples of how you can use this below. 

Trigger types

There are the following trigger types:

  • None: no user action required; step shows when URL (and element) matches.

  • Page element click: when a user clicks on an element on the page.

  • Page element hover: when a user hovers over an element on the page.

  • Icon click: when a user clicks on a Chameleon icon added to the page

  • Icon hover: when a user hovers over a Chameleon icon added to the page.

  • Timed delay: when a user is on the page for a set period of time (only available for Tours).

Soon: You can add such triggers through the On Page Trigger panel under "Display Rules."

Now: You can add such triggers from the Actions menu, under the on-page trigger option.

When you've added a click or hover trigger, that requires user action, then this will also be required when you are previewing or testing the Step or Tour, so that it reflects the behavior for your end-users.

 

Persistent icons

When using an icon (e.g. a hotspot), you can also decide whether it should remain when the Experience shows or not. To cause it to persist even when the Step is showing, choose Yes for Icon trigger persists.

If you choose No, the hotspot will disappear as soon as the Experience shows. 

Note: Although you may choose an element to attach the icon to, this is not the element the step is attached to. The trigger element can be different from the step position element. Learn more about positioning your Experiences.

Example uses

Some ideas which you could explore include:

  • Timed delay ⏱
    - Delaying a user onboarding tour starting by 20 seconds gives a user the chance to first absorb the new interface before they are offered guidance.

  • Page element click 👆
    - Showing a user help after they've clicked some advanced functionality.
    - Showing help when a user clicks on a confusing element (where they hoped to accomplish something other than the actual functionality).
    - Congratulating users for discovering some cool features when they first hover over it (to encourage them to explore it further).

  • Icon click 👆
    - Help up-sell users by highlighting and explaining functionality that is not available to them, but would be with a different plan
    - Using a "painted door test" to offer potential new functionality, and assess whether users click. Upon clicking the idea can be explained and you can get their feedback (e.g. using our Typeform integration). 
    - Using a hotspot for custom one-time help tips as a user is learning new functionality

⚠️ Any user actions set on the first step will be ignored for any Tours that are set to be delivered manually.

This will prevent a broken experience where the user starts the Tour (from a link, Launcher item, or button in another Chameleon Experience) but nothing appears because the first step is awaiting a second user action.

Advanced - other user actions

You may have other user actions you want to trigger a Tour or Microsurvey.

For example, if you want to trigger a Tour to begin based on a user typing text in a particular text field, here is what you would do:

Given an element on the page like this:

<input type="text" class="the-specific-class"></input>

Add something like this in your JS:

const element = document.querySelector('input.the-specific-class'); element.addEventListener('input', function() { element.setAttribute('data-value', element.value) })

This adds an attribute to the input field called data-value only when a user has entered some text into the input.

Then you can use the "Add custom CSS path" in Chameleon element selection to select for an input element only when it has the data-value attribute:

input.the-specific-class[data-value]

Note: there are other "things you can do" with the specific text entered. For example, matching for a specific substring etc. Please contact us if you have additional questions.


Discover

Did this answer your question?