- Create Onboarding Goals - Create Onboarding goals based on On Screen Element. Onboarding Goals are constantly checked and using jQuery will reduce strain on your site.
- Add Strong Pin Launchers - Add the jQuery Selector into the Precision tab of a Launcher to optimize performance.
- Grab Values - Grab a value from a user variable or a text on the screen to be incorporated into a dynamic announcement or use it in a rule
- Check Page Conditions - Direct WalkMe to analyze the attributes of an element on screen to use as a Rule Type in the Rule Engine
- Capture Difficult or Changing Elements - Select an element that may change its attributes such as its position on the website or the text it contains. Alternatively, use Precision to fine-tune the WalkMe algorithm
Step 1: Build the jQuery Selector
The basic syntax for using jQuery elements in WalkMe is: Element - Selector - Value. After identifying the element, build a jQuery Selector that will look at specifically what you are interested in. Here are some examples of jQuery Selectors:
- ul element with id create-account: ul#create-account
- ul elements with class nav: ul.nav
- ul elements with class nav and class fl type: ul.nav.fl
See below for a list of useful jQuery Selectors.
Step 2: Test Your Selector in the Console
- Type wmjQuery(“”) in the command line in the developer panel with your jQuery selector between the “” and hit Enter
- If your query returns the desired value, your selector is working! To see the selected elements on the screen, click the "More…" link
- Hover over the returned objects to see the highlighted element
Step 3: Use jQuery Selectors in WalkMe
Depending on how you would like to use the jQuery element, jQuery can be used in WalkMe in the following locations:
- Use the jQuery element to identify an element for a step or strong pin a Launcher in the Precision tab of the Options Menu
- Use the jQuery element to trigger the next step in a Walk-Thru when clicked or hovered in the Additional Step Triggers Menu
- Use the jQuery element to grab a value on screen to use as Dynamic Text in the Rich Text Editor in a step balloon or ShoutOut
- Use the jQuery element to build a Goal in the Goal tab
- Use the jQuery Selector in the Rule Engine Rule Engine as a Rule Type (similar to jQuery is used similarly to On Screen Element Rule Type) Available Operators are:
- True - Means that at least one element was found
- False - Means that no elements were found
- Visible - Means that the element is visible
- Text Is / Is Not - Means text is equal to text input. When the selector returns more than one element, all elements' text are combined as one element.
- Greater Than / Less Than - Means value is above or below a whole number
- Like / Not Like - Means a complicated text syntax
- Length Is / Is Not / Greater Than / Less Than - Means equal to, above or below a whole number. Used when to query how many elements the query returns. Discover exact query length in the console: wmjQuery(“element.value”).length
|wmjQuery('element')||Query an element|
|wmjQuery('element[attribute]')||Query an attribute of an element|
|wmjQuery('element[attribute][attribute]')||Query multiple attributes of an element|
|wmjQuery('element[attribute="attribute value"]')||Query an attribute of an element and its value|
|wmjQuery('element[attribute^="text"]')||Query text at the beginning of an attribute|
|wmjQuery('element[attribute*="text"]')||Query text contained in an attribute|
|wmjQuery('element[attribute!="text"]')||Query text excluded from an attribute|
|wmjQuery('element child-element')||Query the child of an element (space indicates that the first element is the parent of the second)|
|wmjQuery('element:checked')||Query the status of a check box (checked or unchecked)|
|wmjQuery('[element='']:mt_visible')||Query if an element is visible|
|wmjQuery('element:contains(Text)')||Query is element contains text|
|wmjQuery('element:eq(#)')||Query specific result in order (count starts from 0)|
- Identify an element that will represent completion of a process (Main Goal) or stage in a process (Milestone Goal).
- Open the Console and identify the element Build a Goal based on the jQuery element.
- Preview your work and check for Goal completion in the Flow Tracker