This article covers the settings available to you to configure the Visual Design Studio for creating guides and tagging Pages and Features.
The Visual Design Studio is configured at the application level. To configure the Visual Design Studio, navigate to Settings > Subscription Settings, choose your app from the Applications list, and then open the Tagging & Guide Settings tab.
You must be a Pendo Admin user to access and change Visual Design Studio settings.
Basic settings
Basic settings include:
- Disabling the Visual Design Studio launch URL token
- Preventing access to guides code block and
- Disabling the Visual Design Studio keyboard shortcut
Disable Visual Design Studio launch URL token
When the Visual Design Studio launches from the Manage In-App button, a new tab opens with the app URL and an authentication token in the address bar. The user is authenticated and the token is dropped from the URL when the designer loads. This is the default behavior and works for most customers without any issues. If there is an issue using the URL token to launch the designer over your app, this setting disables the launch URL token and opens the new tab with the designer using a window.opener method instead.
Prevent access to guides code block
This setting deactivates the Custom Code Block building block in the Visual Design Studio. The Code Block adds CSS, HTML, and Javascript to a guide step and executes when the guide step loads. It can be used to custom code elements in the guide, like buttons or images, and use Javascript to script behavior. It can also be used to change the appearance or behavior of elements in the DOM, including the current guide step and your application. It's a powerful tool and is useful for implementing many creative solutions with guides. Some customers elect to use only the standard out-of-the box building blocks and want to disable access to code blocks for guide creators.
To disable code blocks in the designer, contact Pendo support.
Disable Visual Design Studio keyboard shortcut
The Visual Design Studio can be activated over your application at any time when the combination Alt (Option on Mac) + Shift + 8 is pressed by an active user in the Pendo subscription. This shortcut can be disabled if the macro is interfering with macros in your own application or if you only want your Pendo users to be able to launch the Visual Design Studio from Pendo.
Collect custom HTML attributes
You can configure the collection of custom HTML attributes in addition to Pendo's default attributes. These can be used for tagging Features and placing tooltip guides. For information and instructions on how to add custom HTML attributes, see Custom HTML attributes.
Automatic tagging with custom HTML attributes
After collecting custom HTML attributes, you can then enable automatic tagging for creating Features in Pendo. For more information about this feature and how to use it, see Automatic Feature tagging with custom HTML attributes.
Suggested Match HTML attribute exclusions
You can exclude specific CSS classes and IDs from the Suggested Match option in the Visual Design Studio when tagging Features and when placing guides, such as classes that might result in an unstable or overly generic tag, and dynamic IDs.
If you decide to add a class or ID to the exclusion list, note that:
- HTML classes and IDs are case-sensitive.
- Exclusions are application-specific.
- Excluding a class or ID doesn't prevent it from being collected in raw events.
- The following special characters are supported:
- Underscore (
_), which you can use without restrictions. - Hyphen (
-), which you can't place at the beginning or end of a class. - Wildcard (
*), which you can place at the end of a class.
- Underscore (
Note: Excluding a class from a suggested match doesn't prevent it from being collected in raw events.
Why exclude a class or ID?
When tagging Features in the Visual Design Studio, the element tagging tool is used to select an element in your app and create a unique targeting rule. That rule should only match that target element among all of your Pendo click event data. The tagging tool can suggest a target rule, provide a list of parent elements, or allow you to enter a custom targeting rule.
The Suggested Match option looks at the properties of the element you selected and suggests a unique identifier. The tagging tool uses a Sizzle query to find elements, looks for custom HTML attributes that have been identified in your app, and removes CSS classes that are on the Suggested Match Class Exclusions list. The results prioritize elements that are typically unique in most applications, like IDs, custom HTML attributes, or CSS classes.
Some application frameworks use dynamically-generated CSS classes and IDs. These attributes can be unique but also variable. Generally, part of the attribute name changes when the content renders. Pendo saves the exact class when a user clicks on that element and the suggested match generates a tagging rule that matches the exact class at the time the Feature was tagged. The variable section of the name changes and doesn't match the Feature tagging rule every time a user clicks on that element. As a result, all of the clicks on that element won't be captured by that tagging rule.
Suggested Match class and ID exclusions are used to exclude these dynamic CSS attributes, and any other undesirable attributes, from suggested matches. Only stable properties are used to generate suggested matches and the suggested tagging rule is more reliable.
Add exclusion
- Enter the class or ID into the + Add Exclusion field. The field validates if the class is in an accepted format.
- Select + Add Exclusion to add the class or ID to the list. This attribute is no longer suggested as a match for Feature tagging or guide anchoring, but is still collected in raw events.
Remove exclusion
- Hover over a class in the list to show the trash icon.
- Select the trash icon. A warning modal confirms the action.
- Select Delete Exclusion to remove the class from the list. This takes effect immediately. The class can be added again if needed.