Element Precision Rules for Beacons
- 13 May 2025
- 2 Minutes To Read
- Print
- DarkLight
- PDF
Element Precision Rules for Beacons
- Updated On 13 May 2025
- 2 Minutes To Read
- Print
- DarkLight
- PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
Note:
Display Rules are now available as Visibility Rules and Element Precision Rules on Studio.
Currently, this update is in the Beta stage and is only available for Beacons and Launchers. It will be available for other content types, such as Flows and Smart Tips in upcoming phases. To enable the feature, contact support@whatfix.com.
What are Element Precision Rules?
Element Precision Rules help ensure that a Beacon appears on the correct UI component, preventing misalignment or flickering. These rules provide precise control over positioning, ensuring the Beacon consistently appears in the intended location.
Types of Element Precision Rules
Rule | Description | Example |
Using CSS Selector | Identifies an element using a CSS selector. It is useful when elements have unique identifiers or specific class names. CSS selectors help in precisely targeting elements based on attributes such as class, ID, or hierarchy. | Display the Beacon only if an element with .help-button exists. |
Using jQuery selector | Identifies an element using a jQuery selector, which enables more advanced element selection, including filters and conditions. It is useful when you need to select elements dynamically based on complex conditions. | Display the Beacon when an element matching |
Using Element Text | Identifies an element based on the visible text it contains. It is useful when targeting buttons, labels, or other text-based elements. | Display the Beacon if the button text is Login. |
Note:
Adding CSS Selectors ensures that Whatfix can easily find the required element and reduce the possibility of displaying content or widgets on the wrong element.
Use Cases
Display Beacons on options inside a dropdown
Consider that you want to show a Beacon on options inside a dropdown in your application. These options have a unique identifier, ID (CSS Selector), used to identify the element. Use the Using CSS selector rule and specify the CSS selector value to ensure the Beacon appears correctly on the desired element.
On Whatfix Studio, click Element Precision.
.png?sv=2022-11-02&spr=https&st=2025-11-04T23%3A12%3A02Z&se=2025-11-04T23%3A22%3A02Z&sr=c&sp=r&sig=rg7Chbx3WvWEUp%2FS0juOSQimXKeCcBZs8ykD%2FgXdWMc%3D)
Select Using CSS selector from the How would you like to identify the element? dropdown.
.
Enter the selector Value.
Complete creating the Whatfix content.
Display Beacons when there are no unique identifiers for the elements
Consider that you want to display a Beacon on a button in your application. The button has no unique identifiers such as IDs or specific classes. The only distinguishing factor is the button text. In such cases, use the Using Element Text rule to ensure that the Beacon appears correctly on the intended button.
Note:
Whatfix recommends that you use the Using CSS selector rule, followed by the Using Element Text rule while adding Element Precision Rules to Beacons.
On Whatfix Studio, click Element Precision.
.png?sv=2022-11-02&spr=https&st=2025-11-04T23%3A12%3A02Z&se=2025-11-04T23%3A22%3A02Z&sr=c&sp=r&sig=rg7Chbx3WvWEUp%2FS0juOSQimXKeCcBZs8ykD%2FgXdWMc%3D)
Select Using CSS selector from the How would you like to identify the element? dropdown.
Enter the selector Value.
Click Add condition.
Select Using Element Text from the How would you like to identify the element? dropdown.
.png?sv=2022-11-02&spr=https&st=2025-11-04T23%3A12%3A02Z&se=2025-11-04T23%3A22%3A02Z&sr=c&sp=r&sig=rg7Chbx3WvWEUp%2FS0juOSQimXKeCcBZs8ykD%2FgXdWMc%3D)
Select Contains from the dropdown.
Enter the button Value.
Complete creating the Whatfix content.
Frequently Asked Questions (FAQs)
How are rules at the Widget level different from rules at the individual Beacon level?
Widget-level rules are configured using the Dashboard and apply to all Beacons in a collection. Every Beacon linked to the Widget follows the same conditions.
Individual Beacon rules are configured using Studio and apply only to a specific Beacon. It provides more control over when and where a single Beacon appears without affecting others.
What happens if there is a conflict between Studio rules and Dashboard rules?
If there is a conflict between the Visibility rules set for a single Beacon and the rules set for the Widget (which includes multiple Beacons), Whatfix follows a prioritization criteria. First, it checks the rules at the Widget level. Then, it looks at the rules for each individual Beacon.
For more information on Prioritization, see Understand prioritization criteria for Beacons.
Was this article helpful?