Chameleon Product Tours consist of a single or sequence of individual steps. Each step can be configured separately to show, look and behave differently. 

Similarly, a Chameleon Tooltip, Survey or Launcher can be set to show in a particular within your web app depending on the page URL of the page and and optionally, a specific element on the page (great for cases where the URL doesn't change between different pages, such as some Single Page Applications). 

When you first "Create a step" from the Chameleon Editor Sidebar, you'll be presented with the option to navigate to the page where you want the step to appear. 

URL matching

Once you are on the correct page, you can "Confirm" and this page URL will automatically be entered into the URL field within the Trigger menu. 

You can change the URL if you'd like the Experience to appear on a different page. You have a few options on how to use this: 

  1. URL contains text: Experience will show on all pages whose URL contains the input string
  2. URL is exactly: Experience will only show on pages whose URL matches the input string exactly
  3. URL matches regex: Experience will show on pages whose URL matches the regular expression defined in the input field
  4. URL does not contain: Experience will show on pages whose URL does not contain any of the input string
  5. URL is not exactly: Experience will show on all pages whose URL does not exactly match the input string

When to use 'contains' vs. 'exactly'

If you'd like to show an Experience anywhere in your product (e.g. a notice whenever the user next logs in)  you should use the 'URL contains text' type. 

For example 

  • /settings  will match  AND 
  •  will match  and  but NOT 

Also in cases where your URLs are user or account specific, but you'd like the Experience to show to all users or accounts, you should use 'contains'. For example:

  • A page in your app is  then you can use /settings as the input to match for all users
  • If your subdomains are customer specific, e.g.  then you can match with  

Note: if you're using the 'contains' match but for the positioning of the Experience are using "snap to element" then please uncheck 'HTML Hierarchy' to ensure that element still matches across different pages. Learn more about element selection here

Use wildcards or variables for matching dynamic URLs

Use these for more precise matching with dynamic URLs (that contain parts that change per user, e.g. a user ID or customer name).  

For example, to show an Experience on  but NOT on you can either:

  • Use a wildcard (*) with 'URL contains text' to replace the part that is dynamic / changing; this will ignore that part and match the page regardless of what is contained.
    In the above example you could use: 'URL contains text' =*/admin 
  • Use a user variable e.g. {{user_id}}  with 'URL contains text' or 'URL is exactly' to replace the dynamic part; this will fill the dynamic part with the specific value for that user / account.
    In the above example you could use: 'URL contains text' ={{user_id}}/admin 

To do this, you will have to include this data as part of installing Chameleon. Learn more about how to send and use user variables.

Use regular expressions for more complex matching

A regular expression (regex) is a codified way to creating a pattern for a string. 

You can use the 'URL matches regex' type to create a general matching condition that follows some rules. Some examples of this include:

  • [a-z]: to represent any character between a-z
  • \d: to represent any digit
  • a+: to represent one or more a's
  • $: to end the string and prevent any subsequent text matching
    (e.g. to show on but not, use the URL input:$)

A reference guide for these regex expressions is available here and an interactive site to help you better understand regex is here.

To use a regex, select the 'URL matches regex' and type in the expression into the input field. The full input will be treated as a regular expression. 

Element matching

In cases where the page content changes but the URL does not, you can further use a visible element on the page to set whether the Experience should show or not. 

To enable this, select 'Yes' in the 'Require Element on Page?' section, and then click 'Select element' to choose the element that should be present. 

Once you've chosen the element with our point-and-click tool, you can further configure it by using the "Adjust" menu to manually specify the CSS selectors. 

Testing your inputs

Getting the URL and element correct is important, and there are a few ways to assess whether your inputs and selections have the desired outcome. 

The green / red dot indicators next to the input fields show whether the current page matches the selection. 

You can also toggle on Preview mode to check whether the Experience appears on the current page. 

NEXT: Learn how to show a step after a user action, such as a click or hover.

Did this answer your question?