Chrome Extension Basics
Select The Right Element
Overview
Detecting the right element in Userpilot is crucial for providing a personalized user experience through product tours, tooltips, and flow steps. Proper element selection ensures that the right features are highlighted and tracked for user engagement. The platform allows automatic detection of elements, with an option for manual adjustments when needed, ensuring accurate implementation of onboarding flows.
Use Cases
- Highlighting specific elements on a web application interface.
- Continuing a flow even when the element is not visible on the page.
- Modifying element detection to ensure proper onboarding functionality.
Main Section
What is a CSS Selector?
A CSS selector is a pattern used to select and target HTML elements on a web page. These selectors allow Userpilot to accurately identify and interact with page elements. CSS selectors can target elements based on their ID, class, type, or other attributes. Inspecting the element with your browser’s “Inspect” tool can help you find the CSS selectors used by a particular element.
How Userpilot Detects Elements Automatically
When adding a new step in Userpilot, the builder automatically detects elements and selects the best CSS selector for them. It visually highlights the element on the page with a rectangle around the target. Based on this, Userpilot determines the optimal placement for UI patterns, such as tooltips or driven actions, on your app.When to Manually Adjust CSS Selectors
Manual adjustments should only be made when automatic detection doesn’t work as expected, which occurs in rare cases. These include situations where:- The element is not detected properly, possibly due to dynamic content or complex page structures.
- There are too many similar elements, causing the wrong one to be selected.
How to Adjust CSS Selectors Manually
- Enable the ‘Manual Detection’ option from the Individual menu.
- Once enabled, you can edit the CSS selectors for greater precision.
-
To ensure that multiple similar elements are handled correctly, consider adjusting the element order or adding a text string filter to further specify the element.
If the selected element contains dynamic selectors that may change with each page load or interaction, Userpilot provides an Exclude List feature to help mitigate this issue. By working with your development team, you can exclude dynamic selectors from being added when Userpilot detects the element. This ensures that once the dynamic selectors are added to the exclude list, any future element selections containing those selectors will be automatically ignored by Userpilot.
Elements previously selected with dynamic selectors won’t be automatically excluded. You’ll need to manually reselect them after adding the CSS selectors to the Exclude List to ensure proper tracking.
FAQs
How do I deal with multiple similar elements that could be mistakenly selected?
How do I deal with multiple similar elements that could be mistakenly selected?
If you encounter this issue, manually adjust the CSS selectors by specifying the correct element using its unique attributes or text content.
Why do I need to reselect elements after adding selectors to the Exclude List?
Why do I need to reselect elements after adding selectors to the Exclude List?
Elements previously selected with dynamic selectors won’t be automatically excluded. You’ll need to reselect those elements after updating the Exclude List to ensure they are properly tracked and targeted moving forward.