Pendo Tagging Aid

The Pendo Tagging Aid is a Google Chrome extension that helps you create more accurate Feature tags and guide anchors in your app, especially when the default selectors aren't specific enough. It works alongside the Pendo Visual Designer to make tagging and guide anchoring more precise.

When to use the tagging aid

Use the Pendo Tagging Aid when you're unable to choose or build the correct CSS selector using the Visual Design Studio. It’s especially helpful for apps with dynamic or complex HTML where suggested matches might be too generic.

Instead of manually inspecting elements with browser developer tools, you can hover over elements to view their attributes, build selectors using a point-and-click interface, and validate that your selector uses the correct element for a Feature or guide step.

Prerequisites

Before you can use the Pendo Tagging Aid, you must:

• Have the Pendo Tagging Aid from the Chrome Web Store installed in your browser.
• Sign in to Pendo and have access to the correct subscription.
• Open your application in Chrome. The tagging aid will launch the Visual Design Studio on top of your app.

Step 1. Select an element

1. Open the Pendo Tagging Aid extension from your browser toolbar.
2. Choose Select New Element.
3. Select the element in your application that you want to use for a Feature tag or guide anchor.
4. Use the arrows to adjust the selection or to expand or contract the element's container. This allows you to move up and down the DOM tree (the hierarchy of elements on the page).
5. View the element's attributes in the side panel.

Step 2. Test a rule

Testing a rule in the tagging aid helps ensure your tag or guide anchor is accurate and prevents unintended tagging.

1. Once you've chosen your selectors, choose Test Rule to see how many elements on the page match the rule. Selected elements are highlighted, and the tagging aid displays the total number of matches.
2. If too many elements match, narrow the selector by adding a :contains() statement to match specific text.

Step 3. Refine the selector

1. Select the gear icon next to the rule to open text settings.
2. Edit the :contains() text to remove unnecessary characters or whitespace.
3. Once you’ve refined the rule, select Copy above the Selection field to copy the full selector details to your device's clipboard.

Step 4. Paste the selector in the designer

1. In Pendo, open the Visual Design Studio by opening the Feature tag or guide step you want to apply the selector to.
2. Paste the full selector you copied from step 3 into the Custom CSS field.
3. Close the tagging aid. 
4. Save the Feature or guide in the Visual Design Studio.

The designer will now use your custom selector to anchor the Feature tag or guide step to the correct element based on the rule you defined.