The key to successful in-app engagement is timing your Experiences to your users' actions. With Chameleon, you can pick how you want your Experiences to display so that the message you show matches your users' intent. You have multiple Trigger options to choose from the Builder and combine for a smooth user experience.
Availability & Usage
🔐 Available for all plans
📍 Here for timely triggered Tours, Tooltips, Microsurveys
⚙️ Use it from the Builder
Check out this video for a quick overview of Triggers, or read more below 👇
Triggers are a great way to drive users to valuable actions inside your product, without being intrusive. For any Tour, Tooltip, or Microsurvey you create you can access on-page Triggers from the Display Rules section, in the Builder. Here, you can pick from different types of Triggers and further adjust each.
When you add a Trigger, it 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 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 the user action.
This will prevent a broken experience where the user starts the Tour (from a link, Launcher, or button in another Chameleon Experience) but nothing appears because the first Step is awaiting a second user action.
💡 You can also leverage Icon Triggers alongside Recurrence to deliver on-demand Tours. This can be useful to let users retake Tours later or if there are aspects of your product that need explanation regularly (because of complexity or infrequent usage).
It's easy to leverage your in-app elements to educate users as they engage with your product. This way, your message is contextual and will match their interests more.
Use the Click or Hover element trigger to show your Experience when a user clicks (or hovers over) an element on the page. You'll be prompted to select an element in your app that Chameleon will use to trigger the Experience.
Here are some ideas on how you can leverage this Trigger type:
Showing a user help after they've clicked more 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 cool features when they first hover over it (to encourage them to explore it further).
Use the same engagement pattern when users engage with in-app components, but personalize it with an icon that better signals the content you're showing. You can pick from Chameleon's icons and style them to match your brand or upload your own.
Use the Icon Click or Hover option to show your Experiences when a user clicks or hovers over the icon that you add. You can position these anywhere on your page (anchored to an element) and enable users to start your Experience from these.
After you choose an icon, you will be prompted to select an element to anchor the icon. You can further configure and style your icon with these options:
Icon width
Offsets -- to adjust the positioning
Colors
Persistence -- choose whether this icon should continue to show when the Step is displayed
When using an icon (e.g. a hotspot), you can decide whether it should remain visible when the Experience shows or not. To cause it to persist even when the Step is showing, go to your icon Trigger and choose Yes for Icon trigger persists.
If you choose No, the icon will disappear as soon as the user takes the trigger action (e.g. hovering over the label).
👉 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.
Here are some example use case where this Trigger type shines:
Helping 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 Microsurveys or our Typeform integration).
Using a hotspot for custom one-time help tips as a user is learning new functionality.
📍 Available for Tours & Microsurveys
Allow users to get accustomed to your interface and offer a short respite before prompting a Tour to them. Show your Experience after users stay on the page for a set period of time to ensure you're not interrupting them from their main activity.
This is especially useful for new users who need more time to find their way around new products. Allow users to explore a bit and offer more insights when they're more receptive to engaging with your message.
🤝 Delaying the start of an onboarding Tour by 20 seconds gives the user a chance to first absorb the new interface before they are ready to be guided through.
📍 Available for Tours & Microsurveys
When communicating in-app, it's best to time your prompts to users' actions. So if they're already busy working towards a goal, you'd want to avoid interrupting them. With Smart Delay, you can show your message when the user is inactive in your app after they (hopefully) achieved their main goal.
This helps you control the timing of your guidance and meet users' needs better. An Experience with a Smart Delay will show when these conditions are met:
With new sessions - the Experience will show after 60 seconds after the session started.
The user hasn't interacted with other Chameleon Experiences in the same session
The user paused their activity - mouse activity stopped after 4 seconds
The user isn't actively typing
ℹWith Launchers, Chameleon marks the user interactions only when they click on your Launcher widget or if they dismiss, or complete the 'Welcome State'. If they do either of these, the Smart Delay will prevent your Experience from showing up.
ℹ If you set the Recurrence to 'repeat immediately' and also set a Smart Delay, your Step will show immediately once the conditions are met, as it's part of the same interaction. And will not count the rule to not have interacted with other Experiences.
ℹ If you have a Smart Delay on a follow-up Step, it will respect the same conditions and show to your user once they are met. But since it is another Step of the same Experience, the remaining condition that we check for is user inactivity.
📍 Available for Tours & Microsurveys
As your app and user behaviors are unique, you can create your own custom Trigger and leverage it when showing your Experiences. With the Custom Trigger option, Chameleon will use your input as a condition when assessing whether the Experience should show or not.
All you have to do is add your JS code in the Builder (where you can also test it). Chameleon will use that as a true/false condition and show the Step when the returned value is true. If your code makes no API requests, then Chameleon will evaluate the final resulting line.
Here are a few ways you can use this option:
show Steps based on specific user input
check complex conditions of user data on the page
wait for something to "scroll into view"
listen for events (like the error event) or others
leverage user data to show Experiences to specific users
Here's an example of a custom Trigger that shows a Tour based on specific information on the page, for example, based on the 'Plan Value' on the page:
const element = chmln.$('h6:contains("Plan Value")');
const contentString = element.text().trim().replace('$', '').replace(/,/g, '');
const content = parseFloat(contentString);
content >= 1000
In this case, our Tour will show for plan values under $1000.
*Ensure you update this example with values from your product; update the content (the plan value, in this case -- '1000') to fit other plans and show different Tours.
👉 You can explore more code examples in our Developer docs.
📍 Available for Tours & Microsurveys
To ensure your Step shows to help users out, especially in delicate moments, for example when they have to fill in information you can leverage the Keyboard Input Trigger. Select a field from your app to show messages based on the type of information users fill in.
Chameleon detects when a user inputs a value in that specific field, and you can show your Step based on the information your users enter.
With this option, you can choose to show your Step when Chameleon detects:
Any input -- any input is detected in the field
Specific input type -- pick between a string, a number, or an email
Contains text -- type in text that the input must contain
Matches regex -- input matches a regex expression
Here are a few ways you can leverage this Trigger to create a better user experience:
offer customized tips based on role, plan, or interests
prevent submission errors by helping users fill in their information correctly
show Steps only when users submit specific information to match their intent
You can also use the "Add custom CSS path" option in your element selection to select 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.