Experiences can be set to show on a particular page within your web app depending on the URL, or whether a specific element exists (or doesn't exist) on the page (great for cases where the URL doesn't change between different pages, such as some SPAs). 

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 URL Rules menu Location & Position panel and set-up your desired URL matching conditions.

The art of displaying your Experience in the correct place of your app requires a healthy mix of the right URL matching conditions and user segmentation.

When it comes to matching URLs, we aim to provide you with the necessary flexibility to ensure you will always find a combination that allows you to target the right page or pages.

There are three major tools to dominate:

  • Using multiple URL conditions.

  • Using different URL matching types.

  • Using wildcards, variables, or regular expressions.

Using multiple URL conditions

Explore the full potential of the above tools by combining them under multiple URL conditions.

Add a new condition by selecting the Add condition button. This will add a new blank condition, that you can configure with your desired URL and matching type.

Upon adding multiple conditions, you can determine if the conditions should match based on all conditions existing simultaneously, or any condition existing -- essentially switching between a and/or logic.

Using different matching types

The URL matching type indicates under what conditions the criteria indicated will be tested against the current URL. The existing matching types are:

  • URL contains text: Experience will show on all pages whose URL contains the input string.

  • URL is exactly: Experience will only show on pages whose URL matches the input string exactly.

  • URL matches regex: Experience will show on pages whose URL matches the regular expression defined in the input field.

  • URL does not contain: Experience will show on pages whose URL does not contain any of the input string.

  • 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.

Using wildcards or variables to match 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

Using regular expressions for 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

Leveraging element rules

Chameleon gives you the ability to check if a given element exists on your page, and display or skip a step based on this condition.

This can be particularly useful for cases where the page content changes but the URL does not, enabling a user to interact with your page before displaying the next step, or skipping a step when something's missing.

You can access this functionality by opening the "Element Rules" panel under the Display Rules header in the Control Panel. Here, you will be prompted to select your conditional element -- the one you'll use to determine if the Step will be shown.

Then, you can either require this element to be present or not present on the page. You can also define a timer, that will:

  • When requiring the element to be present: the timer serves as a time box, representing the period for which you want Chameleon to look for your conditional element.

  • When requiring the element to be not present: the timer will serve as a buffer, and Chameleon will only start looking for the indicated element after the timer has finished.

Based on the configured conditions being met or failed, you can determine whether you want the Step to be skipped.

👉 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. 

To confirm, you should also switch to the Preview mode to test if the Experience shows on the current page. 

What's next?

Did this answer your question?