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.
What are CSS selectors?
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.
How to select an element in Chameleon
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 green 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 green 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.
Note: we've improved our 'Adjust' configuration box so it now looks better than in the gif and video above!
The Adjust selectors config box will give you two broad ways to input the correct selectors:
- Adjust single selectors
- 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 green outline. You can use this as a guide to check whether you've made the correct adjustments to match the intended element.
1. Adjusting single selectors
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
- 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 "https://www.trychameleon.com"
- title: the title, such as "Chart"
type: the type, typically found on
<input>fields, such "text" or "email"
- name: the name, such as "Top sales"
2. Adding a custom CSS path
You can also fully edit the CSS path to identify the correct element. This is great if you have technical support or need a unique or very custom configuration for your selector.
To use this, simply select the radio box adjacent to the 'Add custom CSS path' title and add your CSS code here.
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.
💡 Note: 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.
For any questions or feedback on this article, please send us a message by clicking on the chat bubble on the bottom right corner! ↘️