Now that you know how to write jQuery selectors using id and class attributes as well as location, let's make sure you're successfully identifying elements by testing out your selectors.
Unsure of whether or not the jQuery selector you've written is correct? You can use the wmjQuery command in the browser's developer console to check whether or not you selected the correct element.
- Right-click on the page where your jQuery element exists and click Inspect.
- Now that your developer tools window is open, click the Console tab located to the right of the Elements tab.
- In the developer tools Console tab, type in wmjQuery("EnterYourjQuerySelectorHere") and press Enter.
Navigate to eddiesdepot.com/home and open the developer console on your browser. Type in wmjQuery("div#SITE_HEADER") into the console and see what you get!
Watch the video to know more. Note that the video doesn't support audio.
If you were able to type in wmjQuery("div#SITE_HEADER") into the developer console, you would have gotten a successful result. Let's break down what the results mean:
.png "Image shows HTML code.")
In general, the length will tell you how many objects the jQuery selector was able to match with on the site. Here, the Length indicates how many objects, or results, this wmjQuery search generated. For this exercise, the jQuery selector "div#SITE_HEADER" returned 1 object. If the length number changed to 5, that means that the jQuery selector returned 5 objects on the site. While the found object provides a list of the actual objects that the jQuery selector matched with. Found Object indicates that the jQuery selector you are using is able to find the object, or element, that matches the selector. If you hover over this, the targeted element will highlight itself on screen.
Now let's go to eddiesdepot.com/cats and use a different jQuery selector. Open the developer console and type in wmjQuery("li a"). What do you get?
.png "Image shows developer console.")
As you can see, the wmjQuery("li a") command returned numerous results.
If you recall what we've learned in the previous section, a successful jQuery selector will return the number of objects that the jQuery selector was able to match with (length) as well as a list of the actual objects that match (found object).
If we take a closer look at the results above, we can see that the jQuery selector we used returned 16 objects and that if we slowly hover over each object listed, we can see what elements on the site that specific object targets, which in this case, is the navigation bar and its dropdown list.
A jQuery selector that matches with multiple objects is useful for scenarios when a user can click on any item in a list or table in order to move on in a Smart Walk-Thru.
.png "No Results")
What happens if the jQuery selector you're using doesn't return any results?
The figure shows HTML code with a length result of zero.
As you can see from the screenshot, when we tested our jQuery selector using the wmjQuery command, we get a length result of 0. This means that the selector we have doesn't match with any object on the site.
What does this mean? Well first, we want to make sure that we are using the proper jQuery syntax to test our selector. If you are still unable to get a successful result, scroll up in the HTML to see if the element you are trying to target falls under an <iframe> element. If so, jQuery for elements within iframes require a special type of jQuery syntax, which we will cover in Advanced jQuery.
Great! So now you've got a jQuery selector that you can use for your WalkMe solution. But where do you apply it?
There are several locations in the Editor where you can apply a jQuery selector:
Selected Element
Whether you're making a Launcher, SmartTip, or Smart Walk-Thru, you can use a jQuery selector in place of the On Screen Element selector.
To paste your jQuery selector, simply navigate to the Selected Element tab of the Launcher, SmartTip, or Smart Walk-Thru step.
The figure shows that the Selected Element tab of the Launcher, and jQuery Selector radio button is selected.
Custom Triggers
There may be instances where you want to take your custom trigger a step further. For example, you might have a balloon that instructs the user to click on any name in a given list. You can create a jQuery selector that is general enough to detect all names and use that as your custom trigger.
The figure shows a jQuery selector used as a custom trigger.
Rule Engine
The Rule Engine window appears whenever you're making a segmentation rule, Smart Walk-Thru/Onboarding goal rule, or autoplay rule.
The operator that you select (i.e. clicked, visible, text is, etc.) depends on the condition/scenario you are trying to build.
The figure shows a Rule Engine window.
Dynamic Text in ShoutOuts and Smart Walk-Thrus
Want to personalize your WalkMe solution for your end-users? You can use a jQuery selector to retrieve a value on your page, such as a username or email.
For Smart Walk-Thrus, simply go to the balloon and select the ﹤/﹥ icon (dynamic text icon) and paste your selector in the input field.
For ShoutOuts, select your text, then in the Styling section in the panel on the right, select @ Add Dynamic Attribute.
Note
To test your selector use the command: wmjQuery("YourSelectorHere").text() to view what text will be pulled in as dynamic text.
The figure highlights the Dynamic Text option.
