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

Which page a steps shows on is determined by matching using the page URL, 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 step to appear on a different page. You have a few options on how to use this: 

  1. URL contains text: step will show on all pages whose URL contains the input string
  2. URL is exactly: step will only show on pages whose URL matches the input string exactly
  3. URL matches regex: step will show on pages whose URL matches the regular expression defined in the input field

When to use 'contains' vs. 'exactly'

If you'd like to show a step 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 step to show to all users or accounts, you should use 'contains'. 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 step 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 a step 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$)

A reference guide for these regex expressions is available 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 step 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 tour step 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?