Designer Settings contains all settings used to configure the Visual Design Studio for a specific app. Designer Settings affect Designer behavior during page and feature tagging and guide creation.
- Basic Settings change the Designer's launch behavior and control access to code building blocks.
- Suggested Match Class Exclusions are used to fine-tune suggested CSS targets when targeting elements during feature tagging and guide targeting.
The Designer Settings tab is in Subscription Settings.
Requirements
- Pendo Admin users can access and change Designer Settings
Basic settings
Disable Designer Launch URL Token
When launching the Designer from the Tag Pages or Tag Features button, or Manage In-App button for Guides, 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 your Customer Success Manager or Pendo representative.
Disable guide designer keyboard shortcut
The Designer 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 is a convenient shortcut around having to find the "Manage in App" button in Pendo. 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 Designer from Pendo.
Suggested match class exclusions
Suggested Match Class Exclusions are used to exclude specific CSS classes from suggested matches when tagging features or targeting an element for a guide step in the Visual Design Studio. Classes that should be excluded are classes with dynamic IDs or any classes that may result in an unstable or overly generic tag.
Note: Excluding a class from a suggested match does not prevent it from being collected in raw events.
Why exclude a class?
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 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. These classes can be unique but also variable. Generally part of the class name changes when the content renders. Pendo saves the exact class when a user clicks on that element and the suggested match will generate a tagging rule that matches the exact class at the time the feature was tagged. The variable section of the class name changes and will not 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 Exclusions are used to exclude these dynamic CSS classes, and any other undesirable classes, from suggested matches. With dynamic classes excluded, only stable properties are used to generate suggested matches and the suggested tagging rule is much more reliable.
Add exclusion
Classes are case-sensitive and do not support special characters, except for underscores, hyphens, and wildcards in certain circumstances. Exclusions are application-specific.
Supported Special Characters
- Underscore
_- Can be used without restrictions - Hyphen
-- Cannot be placed at the beginning or end of a class - Wildcard
*- Can be placed at the end of a class to indicate the value is contained in the excluded class
1. Type the class into the Enter Exclusion field. The field validates if the class is in an accepted format.
2. Select + Add Exclusion to add the class to the list. This class is no longer suggested as a match for feature tagging or guide targeting. It is still collected in raw events.
Remove exclusion
1. Hover over a class in the list to show the Delete button.
2. Click the delete button. A warning modal will confirm the action.
3. Select Delete Exclusion to remove the class from the list. This takes effect immediately. The class can be added again if needed.