Showing tour steps by URL

Each step must have a specified URL. Some step types (Lightbox and Hotpot) can be further specified by attaching to an element.

URL matching

Within the Step View of the Chameleon Editor you can specify which page a step should be shown. You do this in the "Which URL should this tour show on?" section.

The green dot signifies that the input matches the current page URL. A red dot would signify that it does not match.

We use a 'contains' match

If the input is contained within the page's URL then this step will match on that page. If your input matches multiple pages then your tour could show on whichever of these a user first lands on.

You can simply enter the full URL that you would like this step to match on in this input. You could also use one of the following two modifiers:

1. Ending the URL

For example if you want to match on https://www.trychameleon.com but not on https://www.trychameleon/com/blog then you can place a $ at the end of the URL.

Therefore your input would be: trychameleon.com$. Note this would also not match https://www.trychameleon.com/.

2. Dynamic URLs

Sometimes, a component of your URL will change by user or some other object. To match these, we recommend using user variables.

You simply add double-mustaches with the user property within them. For example, you could enter trychameleon.com/setup/{{user_id}}/settings.

This will look for the user property of user_id and add that in the string before matching.

The major benefit of this, is that you can also use the same format to trigger a specific page to be loaded as part of the transition to the next step.

3. Advanced matching

When a url part must match a certain pattern, we must resort to matching via regular expression. in the example above about /setup we can limit users to ones who have an ID with only numbers as so: trychameleon.com/setup/{{user_id match='\d+'}}/settings

\d+ means 1 or more digits and when used in this manner will require the user_id to be all numbers to match.

Note: This match starts at the next letter after the end of the previous match

More examples

Let's take the following URL: http://www.your-site.com/accounts/1458/homepage:

  • http is (the scheme that identifies) your protocol
  • www is your hostname
  • your-site.com is your domain
  • accounts is a section of your app (that users can navigate to)
  • 1458 is a unique identifier for that user (user_id)
  • homepage is another part of the URL that will common to all users

Using this in the example above:

Input Will match Will not match

your-site.com

x

http://www.your-site.com

x

http://www.your-site.com/accounts/1458/homepage

x

your-site.com$

x

/accounts

x

your-site.com/accounts/

x

your-site.com/accounts/1234

x

your-site.com/accounts/{{user_id}}

x

your-site.com/accounts/{{something_random}}

x

your-site.com/accounts/{{user_id}}/homepage

x

your-site.com/accounts/{{user_id}}/homepage/{{something_else}}

x

Selecting an element for a step or event

Lightboxes and Hotspots step types are attached to an element. When creating these steps you can 'Select element' from the Step Location section.

When you have picked and element from the page, you'll have the option to include (or exclude) attributes from the selected item.

HTML Hierarchy


The hierarchy of a specific element is the set of all parent elements, and could also be called the container. Considering the link (a tag) in the HTML below. The hierarchy is 'div.wrapper div.inner'.

If the container of the element is not important to this event being triggered, then de-selecting the hierarchy is the right choice.

<div class=\"wrapper\">\n  <div class=\"inner\">\n    <a href=\"/index.html\" title=\"GoToDashboard\" type:\"link\">Dashboard</a>\n  </div>\n</div>",

Broaden your selection to be more inclusive


Considering the elements called Dashboard in the HTML below. If you select the dashboard element in the navigation and broaden your selection to elements based on div tags with text of 'Dashboard', then the thing you're selecting for (an action event, Lightbox or Hotspot step) will be broadened to either of the Dashboard elements.

<div class=\"navigation\">\n  <div>Dashboard</div>\n  <div>Team</div>\n  <div>About</div>\n</div>\n...\n<div class=\"footer\">\n  <div>Contact us</div>\n  <div>Dashboard</div>\n</div>",

Include or exclude other properties


Usually when you click on an element, you'll get a lot more than just Include HTML Hierarchy. Here's a breakdown of the other items you'll add, remove or edit in the list.

text: This is the text within the element you chose. So a button above with the text "Dashboard" within it would include an item called "text: Dashboard". You can also edit the text in the "What text should the element contain?" section.

tag: This is tag that your html element has. Links will most likely be an 'a' tag, images an 'img' tag, buttons a 'btn' tag, and so forth.

type: This is an HTML attribute that's commonly used on input elements (such as checkboxes, radio buttons, text boxes and others).

title: This is an HTML attribute that's commonly used in image elements.

href: This is an HTML attribute that's commonly used in link elements, also known as or anchor elements.

name: This is an HTML attribute used on input html elements, and is usually used for flagging data that might be used. class: This is an HTML attribute used to help developers categorize elements.

id: This is an HTML attribute used to help developers identify a specific element.

Choosing the right properties


Sometimes when you click on an element, you won't see a preview over where you just clicked, but the list of selector items will still be a full list. This is likely because one of those items has changed in the HTML of the page. Because of this, you'll need to uncheck the box next to that item, which will disable it and unincorporate it from the criteria for selecting an element in the future. Finding that element may be a process of guess-and-check: unchecking a few items at a time, then seeing if preview is visible, then unchecking a few more.