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.
Quick access:
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 (available for Tours and Microsurveys).
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 of your end-users.
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.
Triggers are a great way to drive users to valuable actions inside your product, without being intrusive. Here are some ideas which you can explore with triggers:
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 an 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.
⨇ General Rule: When delivering a Tour via a Launcher or an Additional Action, any triggers set on the first Step will be ignored, since you want to show it on demand or based on a user action.
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.
You may have other user actions you want to follow up with 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]
🪄 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 questions about this.