fortynachos / tagging-aid

The Tagging Aid Chrome Extension was created to be used alongside the Pendo Visual Designer. It allows for any Pendo user to inspect the HTML attributes of their web application without having to use technical interfaces like a browser developer tool.

Requirements

The Pendo Tagging Aid only works within the Google Chrome browser. Using the latest version of Chrome is strongly encouraged.

How to Use The Tagging Aid

This tool is available for free on the Chrome Web Store and can be downloaded here.

Once the tool is downloaded, it can be opened in Google Chrome by simply clicking on the icon in your browser’s navigation bar. Once the extension is opened, a window will pop up and your cursor will convert into a targeting tool; this tool will draw a blue box around any element on the webpage within the active tab, and display the following information about it:

• The type of HTML element (div, p, a, span, etc)
• The HTML ID of that element (usually denoted by a ‘#’)
• Any HTML Classes assigned to that element (usually denoted by a ‘.’)

Any of the above pieces of information can be used to tag Features within the Pendo designer. To easily tell the designer what to tag, one can ‘lock’ the element of interest on your page by clicking on it or pressing “Alt + Shift + L” while the element is in focus. Once the element is locked, simply click the copy icon next to the ID or class name, and paste that into the Pendo designer.

Once an element is locked in the extension, you can also traverse its parent and child elements by clicking on the up or down arrows that appear above the “Element Type” box.

The designer can be exited at any type by pressing ‘X’ or the “Esc” key.

Support

This tool was developed by Pendo, and is currently in Beta. It is offered as a free add-on to any Pendo subscription. For questions about the tool’s usage or functionality, please reach out to [email protected].