Chameleon Experiences can be set to show in a particular within your web app depending on the page URL of the page 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). 

Note: The above video displays an outdated version of Chameleon's interface. It has been replaced to give our users a more intuitive and pleasing experience. We will soon create new videos to showcase our new UI 🙂

URL matching

When crafting a new Experience, you should make sure you're setting it to show on the correct page. To do this, you will need to access the Location & Position panel and set-up a URL.

There are a few options to do this, and you can actually use these to configure your Experience to show on more than one page:

  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 www.yourdomain.com/settings  AND www.yourdomain.com/settings/admin) 
  • www.my-product.com  will match www.my-product.com/index.html  and www.my-product.com/team/invite  but NOT staging.my-product.com 

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 type. For example:

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

Note: if you're using the 'contains' match but for the positioning of the Experience you're 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 www.yourdomain.com/settings/user123/admin  but NOT on www.yourdomain.com/settings/user123/team 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' = www.yourdomain.com/settings/*/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' = www.yourdomain.com/settings/{{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 yourdomain.com but not yourdomain.com/index, use the URL input: yourdomain.com$)

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.

👉 Understand how regex works

👉 Explore a reference guide on regex expressions

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 Also require specific page content section. Always make sure the element you're selecting is not dynamic and will continue to exist on the page as long as you're expecting your Experience to be shown.

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

👉 Learn more about selecting the right elements

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. 

What's next?

Did this answer your question?