Note:
Automated CSS selector addition is available for Element Precision rules only.
To use the feature, ensure that the Automated CSS selector addition configuration is enabled for your account. For more information, see Enable Automated CSS selector addition.
Automated CSS selector addition is supported during content creation and troubleshooting using Diagnostics.
Content authors often face situations where a selected element in Whatfix Studio does not latch accurately or consistently. This usually happens when the element does not have a stable or unique identifier. As a result, the content might attach to an unintended element, causing the tooltip to appear in an incorrect position or not appear at all.
Previously, resolving such element latching issues required authors to inspect the browser’s developer console or contact Whatfix support to identify a reliable CSS selector. This process was time-consuming, required technical expertise, and interrupted the content creation workflow.
With the Automated CSS selector addition, content authors can now resolve these issues directly within Studio during content creation. Whatfix automatically generates and applies a suitable CSS selector in the Element Precision rules, making the process faster and more seamless while reducing dependency on support.
Scenario 1: Selected element is unreliable — Warning banner shown during content creation
Consider that you have created a Smart Tip and, during element selection, Whatfix displays a warning banner indicating that the Selected element is unreliable. This warning means the element does not have a stable or unique identifier, and the Smart Tip might not appear correctly in all situations.
Follow these steps to automatically add a CSS selector when the selected element is unreliable:
Create a Smart tip as required. For more information, see Create Smart Tips.
If the Selected element is unreliable banner appears, click Element Precision.
In the Tooltip not in the right spot? section, click selecting the element again.
Re-select the target element on the page.
Info:
Whatfix automatically generates and applies a CSS selector for the element.
The Smart Tip now appears in the correct position with a reliable selector.
Scenario 2: Smart Tip does not latch at the correct position
Consider that you have created a Smart Tip, but the tooltip appears in the wrong position on the page — it attaches to an incorrect element rather than the one you selected. This can occur even when the Selected element is unreliable banner is not displayed, if the element identifier is ambiguous or non-unique.
Follow these steps to automatically add a CSS selector when the selected element does not appear at the correct position:
On the Whatfix Guidance dashboard, click Content.
Click Smart-tips.
Hover your cursor over the Smart Tip collection you want to edit, and then click the Edit icon.
Click Launch live edit.
Once the application launches, in the Studio, select the Smart tip.
Click Element Precision.
In the Tooltip not in the right spot? section, click selecting the element again.
Re-select the target element on the page.
Info:
The CSS selector is automatically generated and added as an OR condition if an existing CSS selector is already present. If no selector exists, it is added without an OR condition.
The Smart Tip now latches to the correct element and appears in the right position.
Scenario 3: Auto-add CSS selectors during troubleshooting using Diagnostics
Consider that you have created a Flow, and a step is not appearing correctly for your end users — it is either not found on the page or displayed at an incorrect position. In this scenario, Whatfix Diagnostics can identify the CSS selector issue and guide you through fixing it directly within Diagnostics without needing to open the developer console or contact support.
For more information, see Auto-fix CSS selector issues using Diagnostics.