Selected Element Tab
Any time you use the WalkMe Editor to select an element on your site, whether it’s for a Smart Walk-Thru step, Launcher, SmartTip or as a Rule type in the Rule Engine, WalkMe uses its proprietary technology to scan the page and identify the element.
The Selected Element tab in the Editor allows you to see if the element you captured is present on the current page and includes settings that can be used to customize the way WalkMe identifies it.
Since every website and use case are unique, it may be necessary to modify the way an element is being identified to ensure that it meets your specific use case.
How to set conditions to display elements
- If a WalkMe Item appears on an incorrect Element on your site, use the Re-select element tool, and adjust the selection by using “Narrow” or “Expand” to increase the Element Grade Level.
- Ignore the text of your Element if it may appear in multiple languages.
- Ignore the ID of an Element on your website when it changes constantly (dynamic Identifiers).
- Ignore the position of a button that might move on the screen when the size of your browser window changes (common for responsive websites).
How It Works
Whenever WalkMe plays a Smart Walk-Thru Step, shows a Launcher or displays a set of SmartTips, it starts by scanning the page to try and locate your selected elements. WalkMe uses a variety of factors, such as the text of your element, its placement on the page and other attributes in the HTML code such as ID and Class.
Each element on your site, whether it’s a button, heading, field or link has unique identifying attributes, some more unique than others. If the selected element doesn’t have unique enough attributes compared to other elements on the current page, WalkMe will assign it a low Element Grade. When a low grade appears, it’s advisable to try to expand/narrow the element’s selection, or use a nearby element instead.
To alter the way that WalkMe identifies a specific element on your site, use the Selected Element Settings. Some Selected Element settings are, by necessity, modified globally (for all elements) by our specialists, so it’s important to check with your WalkMe contact if you see that a specific setting is needed repeatedly.
Checking Element Precision for Rules in the Rule Engine
If you select an On-Screen Element to use as a Rule type in the Rule Engine, find the Precision Settings by clicking on the gear icon.
Test an element’s grade by visiting the page on which your WalkMe item should appear and open the Selected Element settings. WalkMe will analyze the current page and if the selected element can’t be found, you’ll receive the following message: “The Element is not present on this page.”
If WalkMe can find the element but sees that there aren’t enough unique attributes that can be used to identify it against other elements on the same page, you’ll see a low Element Grade.
You can also view the Element Grade in the Flow Tracker when testing a Smart Walk-Thru. The Flow Tracker displays a “looking for Element” magnifying glass icon until it locates the element on the page. Once the element is located, the Element Grade will appear to the left of the step in the Flow Tracker.
For On Screen Elements used in a Rule, click the Rule in the Flow Tracker. If the element is found on the page then an eyeball and a check mark appears. If the element is not found, then an exclamation mark appears.
Understanding Element Grades
The Element Grade scale is from one through five, where five green bars is the highest score possible.
Generally, three bars or higher is regarded as a good score. Elements with less than three bars may still be identified consistently by WalkMe, but it’s recommended that you thoroughly test these WalkMe Items.
Re-Selecting Your Element
When you initially select your element, you can modify your selection to improve the Element Grade. You can either expand your selection, narrow your selection or simply re-select the element entirely.
After an element is selected, use the Preview option in the Editor to test your content. If an adjustment is required to the way the element is being found, access the Selected Element settings within the item’s Options Menu. To re-select your element, click Re-Select Element at the bottom of the Options Menu.
For Rules that use Elements, click the Re-select Element icon on your Rule statement.
Fine-tune the WalkMe algorithm to ensure it identifies your Element correctly if necessary in the Selected Element tab in the Options menu for steps, Launchers, and SmartTips. Precision can be altered by identifying by type of Element, ignoring a selected characteristic, or by modifying the general Element Grade Selection level.
Direct WalkMe to focus on certain attributes, in the Type section:
- Automatic: WalkMe uses the default settings for the algorithm
- By Text: Identifies the Element specifically by its text in the HTML code. This is only valid for Elements that actually contain text that is identified in the HTML; some Elements with text are images but do not contain text. When this option is selected, the text from the Element will autofill in the input field (without spaces, not case-sensitive). Notice that when choosing this option, you can’t use any other bypass options.
- jQuery Selector: Using a jQuery selector is the most specific way to identify an Element because it allows you to use a specific selector to identify the element in the page. Using a jQuery selector can help WalkMe to find Elements if you use Multi-Language and your website has dynamic IDs (i.e., the Element’s code changes when the page is reloaded).
Direct WalkMe to ignore certain attributes:
- Text within the element: WalkMe will ignore any HTML text within the element (number, text, or character). Bypass text for elements that appear in multiple languages or that may use dynamic text.
- Element ID: WalkMe will ignore the element ID in the HTML code. If the element you selected has a variable or dynamic ID (ID is constantly changing when a page is loaded), configure WalkMe to ignore ID.
- Position: WalkMe will ignore the position of the element on the screen. Use if an element changes location on screen. This may happen if your user has a different screen size and your site is designed to reformat the layout. If you would like to choose one of these bypass options to all elements captured, contact your AM who can quickly add this feature.
When WalkMe checks the page for an element, it analyzes all elements that match most of the attributes on the page and gives it a numerical score. The algorithm selects the element with the highest score and plays the step.
- High: Use this setting if elements similar to the one that was chosen are being identified by WalkMe (i.e., Steps or Launchers appear on the wrong element). Setting to High should avoid misidentification.
- Medium: This is the default element Grade Level and is sufficient in most cases.
- Low: Use this setting in cases where WalkMe cannot find your element on the screen because the position of elements is constantly changing.
Resolving Common Issues
My Element Grade is Low
An Element Grade less than three bars is not necessarily a problem; start by testing out your Smart Walk-Thru in Preview mode and even on your website’s Test environment.
If WalkMe cannot find your element or it appears on the wrong element use the steps listed below.
Element’s Behavior isn’t consistent
If you have a dynamic element that is not consistent in its appearance on screen, and you would like to configure WalkMe to continually look for that element, so that when it does appear, a Launcher, Balloon or SmartTip can be displayed with it.
Select one of the Element’s Behavior options, according to the behavior your element is presenting on the site.
Smart Walk-Thru Step, Launcher or SmartTip appears on the wrong Element.
Try changing your Element Grade Selection level to High or Re-select the element. If the issue persists try using the ‘By Text’ type or input a ‘jQuery selector’. If you use Multi-Language, ignore the text within the element.
Smart Walk-Thru Step, Launcher or SmartTip Element cannot be found.
Try changing your Element Grade Selection level to Low or Re-select the element. If the issue persists, try ignoring some attributes of the element. Often times, ignoring element ID can resolve issues if that element’s ID is dynamic and changes whenever a page is reloaded. If this does not help, try using a jQuery selector.