One of the most powerful abilities of Chameleon is the possibility to anchor in-app Experiences or trigger Steps based on on-page elements. As every application is unique, you can further adjust selectors to ensure your Experiences display correctly.

All to deliver Experiences that are contextual and guide your users to discover clear moments of value in your product.

📺 Check out the video below to see how element selection works in Chameleon.

This video does not show our latest product and capabilities. We'll soon update our videos to match our product.

Elements are essentially different boxes of content on a page defined by HTML and CSS code. Chameleon uses on-page elements to establish where and when an Experience should show up, along your defined user Segments, or set triggers for example.

By leveraging the presence or absence of elements, you can show users specific parts of your interface and help them discover more features. 😉

Here are a few examples of how you can leverage elements in Chameleon: 

All these cases require Chameleon to correctly identify and save the relevant element on the page. We are built to handle this, but it's useful to know how it works, in case you need to make a manual adjustment 😊

Whenever there is the opportunity to Select an element, you will see the same point-and-click flow. Hover your mouse over your page to identify the element your want to leverage.

The available elements will have a green outline appear around and you can simply click to select one. Click "Confirm" in the Builder panel that opens up and your Step will be anchored or conditioned to be shown by this element.

Using the point-and-click editor you can select any element that is present on your page. Once you select one, Chameleon will know to condition your Step to the presence, absence, or unique content of this element.

Chameleon identifies the element you have selected 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 you may encounter. 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

If you find that your element isn't correctly identified, you can adjust it further to fit the exact one you want to target. Read more about selecting and adjusting your elements below👇

In some cases, you may not see the correct element highlighted (with the green outline) or the match may be incorrect if you return later. So, it might be necessary to manually Adjust the element to accurately match the intended one.

The Adjust element panel will give you three broad ways to input the correct selectors:

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

Chameleon will detect the different elements on the page and select the one you point to. 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 this option to specify which element in the hierarchy to select.

With the "Auto identification" option you can use your arrow keys to select the correct element. Use your keyboard's arrow keys and watch the green outline move from element to element on your screen until it lands on your intended selection.

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:

In the example below 👇 we want to add an attribute to the 'New note' element, so we add chmln in the data field and new-button in the value field.

In this case, you would use the same principle, but update your value to match your element: data-chmln="help-launcher"

When you're positioning a Step 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:

To use this, simply select the Add custom CSS path option and update (or add) your desired 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.

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. 

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

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

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.

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.

Example use: let's 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":

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:

Now we'll add in "a:last" to only select the last element, "Tables":

And you'll notice Chameleon identifying the "Tables" element correctly now.

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

A dynamic element has attributes that keep changing with every page refresh, like pages that display content based on different visitors. Chameleon works well with dynamically changing elements too and you can leverage them just as static elements when positioning your Experiences or conditioning their display.

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 as the 'HTML hierarchy') from the element match criteria.

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, you'll see a green border around that matching element on the page.