How elements are used in Chameleon

One of the most powerful aspects of Chameleon is being able to show users specific parts of your interface to help them discover and use important functionality. 

Examples of this include: 

  • require an element is present or clicked to show a step; 

  • position a tour step by snapping it to an element on the page; 

  • highlight a particular element; 

  • fire a click on an element when a user clicks the "Next" button in a step; 

  • require an element to be clicked to proceed to the next step of the tour; 

  • track clicks and use them for targeting tours; and more.
    All these cases require Chameleon to correctly identify and save the relevant element on the page. This is something our technology is built to handle, but in some cases it's useful to know how it works, in case you need to make a manual adjustment

CSS selectors are key

Chameleon identifies the element you have selected (using the point-and-click editor) using CSS Selectors: these are code identifiers that target an HTML component on the page. 

In the image above, "body" is the CSS Selector, but there are many more, but some of the most common include the element selector (e.g. <div>, <p> etc.), <class> and <id>. Together these can help uniquely identify an element on the page. 

👉 Use this nifty tool from W3 Schools to play with selectors

How to select an element in Chameleon

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 🙂

In Chameleon whenever there is the opportunity to Select element then you will see the same point-and-click flow. The selected element will then have a purple outline appear around it. 

Normally this will correctly identify and save the element you have clicked on, but in some cases, you may not see the correct element highlighted (with the purple outline) or the match may be incorrect if you return later. 

In these cases, it might be necessary to manually Adjust selector to refine the CSS Selectors to accurately and reliably match the intended element. 

The Adjust selectors config box will give you three broad ways to input the correct selectors:

  1. Select Nth element in a hierarchy

  2. Specify your element further via single selectors

  3. Add custom CSS path

As you adjust the CSS Selectors, the matching will be updated in real-time and the matching element will show the purple outline. You can use this as a guide to check whether you've made the correct adjustments to match the intended element. 

1. Select Nth element in a hierarchy

If your element selection contains multiple matches (for example, you may be struggling to specify a specific menu item in a list of menu options), you can use the "Nth element" tool to specify which element in the hierarchy to select.

Tip: You can use your keyboard's up/down arrow keys and watch the purple outline move from element to element on your screen until it lands on your intended selection.

2. Specify your element further

This option allows you to easily edit or add an individual selector to help you define the right element. 

For example, you may want to use 'HTML Hierarchy' and you can check the box, or you may want to change the 'text' value or add an additional 'id'. You can do all that easily here. 

The available options to adjust how this element is selected are:

  • HTML hierarchy: all of html tags from this element up to the <body> tag. This helps us locate the element on the page and typically consists of <div> tags and their classes.

  • tag: the type of html tag associated with this specific element, such as a, input or h1 

  • text: the text string this element contains, such as "Sales by day"

  • id: the unique ID, such as "chart-overview-1234"

  • class: any class names, such as "chart-main"

  • href: any link associated, such as ""

  • title: the title, such as "Chart"

  • type: the type, typically found on <button>  and <input>  fields, such "text" or "email"

  • name: the name, such as "Top sales"

3. Adding a custom CSS path

When you're positioning a step or Tooltip on the page, the element selector is used to click on a particular element and place your Experience next to that element. This feature should work in 99% of the cases that you'll run into.

You can also fully edit the CSS path to identify the correct element. This is great for a few use cases:

  • you need need a unique or very custom configuration for your selector

  • your website structure changes frequently, and you have a very specific CSS class or ID that can be used to identify the element

  • the target element is not the top element, and you're not able to select the target element

To use this, simply select the radio box adjacent to the Add custom CSS path title and add your CSS code here.

If you're having difficulty getting the CSS Path for your element, you can follow these instructions to copy a CSS Path to that element. You may need to make some adjustments.

  1. Open up a Firefox browser and go to the page in your app where you're adding the Experience

  2. Open up the Developer Tools ( on Mac hit cmd + option + I ) and click the Select Element icon in the top left corner, which looks like a mouse arrow

  3. Select your target element, which will likely be the same container element you found using our Element Selector

  4. Within the Inspector hover over the nearby elements until you highlight your desired element on the page

  5. Right-click ( ctrl-click ) on that element in the Inspector and select Copy > CSS Path

  6. Go back to the Builder within your Chrome browser, and paste that in the Add custom CSS Path section. You may need to modify this path, for example,

    • if it's not finding any elements that match, start from the beginning of the CSS Path and delete the first elements one at a time. Select everything up to the first space ( " " ) and delete, then keep deleting until you see that it's selected your element.

    • if it's finding multiple elements that match, go back and see if there's anything else identifying about your element. For example, if it's an image, there may be some alt text you can use to specify.

If you need further assistance specifying an element, it would be good to reach out to a developer on your team. They may be able to add an ID to that element, which is the best way to make sure it will always target correctly.

Otherwise, contact us and we can take a look!

Selecting multiple elements

It's not currently possible to select multiple elements together for highlighting or for other use cases. However, in some cases, you can generalize the element selection so that it matches multiple elements, and any of these individually can be used. 

You can generalize by adjusting the selectors (e.g. removing specifying criteria such as text  or href of any element) once the element has been selected. 

In the following cases, when multiple elements match, the first matching element will be used. 

  • "Require element on page" (learn how this works here)

  • Show Step "On hover" or "On click" of an "Icon" / "Label" / "Custom icon"

  • Position the Step "Anchor to Trigger element" (if "Icon" / "Label" / "Custom icon" used) 

  • Position the Step "Anchor to other element"

  • Defined events (used for targeting or conversion tracking)

  • Button action "Click element"

Note: this is because when the icon/label/custom icon or Step needs to display immediately upon page load, a fixed element is required. 

However in the following cases, when multiple elements match, you can choose to use only the first or any elements that match:

  • Show Step "On hover" or "On click" of an "Existing element"

  • Position the Step "Anchor to Trigger element" (if "Existing element" used) 

  • Complete Experience by clicking "Specific element"

You can use this to allow a user to click/hover on any one of many elements before the Step appears, adjacent to that element, or by allowing them to click any one of a number of elements to advance from the current Step.

Selecting the last element matching

If you have several elements on the page that are matching, and you want to select the last one you can modify the custom CSS as described below.

  1. Select the element on the page

  2. Select "Use any element that matches"

  3. Go to the "Add custom CSS" section

  4. Delete the last part of the CSS path until it matches all of the relevant elements on the page

    • For example, if several buttons all had the same text you would remove all the custom CSS up to the text on those buttons or the class name for those buttons

  5. Add in ":last" (without the quotes) to the end of that path

As always, be sure to test it and make sure that it works live as you expect it to.

For example, say this was the Custom CSS that showed up when you select one item in a menu. "Components" is the first match, but we want "Tables":

body > div[class*="primary__wrapper-sc-"] > > li.nav-item > a.nav-link.collapsed[href="#"]

You would then click the backspace button on this until multiple items are selected. In this case, we delete ".nav-link.collapsed[href="#"]" off the end:

body > div[class*="primary__wrapper-sc-"] > > li.nav-item > a

Now that all elements are matching on the page, we'll add in ":last" to only select the last element, "Tables":

body > div[class*="primary__wrapper-sc-"] > > li.nav-item > a:last

Finding the selectors for an element

To uncover what CSS selectors are used for a particular, you can "Inspect" the element, after right-clicking on that element. The HTML content and related CSS Selectors are then shown in the browser's console, as below. 

💡 Tip: the value fields use a contains match -- so you can use a subset of the actual value of the field to help identify it. 

Dynamically changing selectors

In some cases selector values (e.g. for class name) change each time the application is deployed. This means that the selector values are not persistent, and so the element selection may not continue to match.

If this happens for your application (relevant for some React apps) then you can uncheck the dynamic / changing selectors (such the html hierarchy) from the element match criteria.

You can ask your developer for help here, or wait for the application to be updated (before publishing a tour) and then make an adjustment.

Use trial-and-error to uncheck selectors that might be the culprits (we suggest starting with html hierarchy and class). If removing these conditions causes the element to be matched again, a green border around that matching element will reappear on the page. 

Find out more

Did this answer your question?