Help launching the Visual Design Studio

This article provides solutions for issues encountered when launching the Visual Design Studio.

Product area: Guides > Designer (web)

When you select Edit in my app to design your guide, a new browser tab or window opens, displaying a preview of your app with the Guide displayed. If this doesn't occur, the following scenarios might help you before you contact support.

Note: Some browser security settings restrict cookies on non-secure (HTTP) sites. If your application isn’t using HTTPS, this can affect how the Visual Design Studio works.

Shortcut key to launch the designer

After you log in to Pendo, open a browser tab and use the following shortcut key to launch the designer from the Guide Details page: Alt + Shift + 8.

If that doesn't work, open up the console in the developer tools (F12), type pendo.designerv2.launchInAppDesigner() in the console and then press enter. 

If you’re already using this shortcut key for another application, you can turn the shortcut key off. Navigate to Settings > Subscription Settings > Applications and choose the appropriate app from the list and deselect the shortcut key.

Note: If neither of these shortcuts is working or the Alt + Shift + 8 isn't working, contact Pendo Support.

Troubleshooting

A new browser tab or window didn’t launch 

• Confirm that a tab didn’t open in a different browser window.
• Alternatively, your browser (or plugin/extension) might have settings that prevent sites from opening a new tab or window. Check and modify these browser settings.
• Ad Blockers can also interfere with launching the Visual Design Studio. 

A new tab opens, but your app doesn't load

Check that you have entered the right URL for your application. 

A new tab opens and your app loads, but you see an Authentication Error Message

• Select the Login button to go to app.pendo.io to sign in. This could happen if you bookmarked a previous Designer session. 
• Additionally, if you have any browser or plug-in settings that disable cookies, modify your browser settings.

A new tab opens and your app loads, but you see a change to JavaScript Methods Detected Message

This message appears when the Designer detects non-native JavaScript methods in your app. Non-native JavaScript implementations may negatively impact Visual Design Studio functionality. If you see this message and you have problems using Visual Design Studio, contact your Pendo subscription admin to troubleshoot your app's JavaScript and your Pendo implementation, or contact Pendo Support for additional technical assistance.

A non-standard JavaScript installation won't necessarily interfere with Pendo. If you see the error message and Pendo is working as expected, disregard the error message. No action is necessary.

To troubleshoot the Pendo environment and JavaScript methods:

1. Type pendo.validateEnvironment() into the console and press enter.
2. The console returns the current visitor and account metadata, native JavaScript method check, and validates subscription configuration options.
3. The native JavaScript method check highlights non-native implementations that might be causing Pendo performance issues.
4. Your developers might be able to troubleshoot the app's JavaScript implementation and resolve the issue.

Contact Pendo support if additional technical assistance is needed.

A new tab opens and your app loads, but no guide preview displays

To start, check that the Pendo install script ("snippet") is installed on the Page you're viewing. To verify, follow the steps in the Browser Developer Console:

1. Open your application in a browser tab and sign in to your app (not Pendo) as a user.
2. Open the Browser Developer Console.
3. Type pendo.validateInstall() into the console and press Enter.
4. Information on ‌your identifiable metadata will be returned. If the install script isn't installed on this page, an error displays saying Pendo isn't defined. Reach out to your development team if you expect Pendo to be installed on this url.

Next, make sure you're using at least version 2.14.10 of the Pendo Web SDK. To validate your version number, choose one of the following two flows:

• Navigate to Settings > Subscription settings and choose your app by selecting your username in the bottom-left corner of the Pendo app. Select Web SDK Settings and validate your Production Environment version number.
• Open your application in a browser tab and sign in to your app (not Pendo) as a user. Open the Browser Developer Console, type pendo.VERSION, and press Enter.

Your app may have re-directed and dropped the Pendo query parameter. If you entered something like https://app.acme.comas the URL, then when the page loads, you see a query parameter for just a few seconds added to the end of the url in your browser URL bar that looks something like:https://app.acme.com?pendo-designer=eyJzdGVwSWQiOiJlTVZSQXN3WENweERT  before reverting back to the original url without the query parameter.

If this is the case:

1. In the left-hand menu, go to Settings > Subscription settings and select the Applications tab.
2. Select your app from the list of applications.
3. In the app's page, select the Tagging & Guide Settings tab.
4. In Basic Settings, select the Disable Designer Launch URL Token checkbox.
5. Go back to the guide and select Manage In-App to load the Visual Design Studio over your application. 

If you're seeing a different url from the one you originally entered into the URL input after selecting Manage In-App, then your application might have been redirected to a different page (for example, from https://app.acme.com to https://app.acme.com/home), and in doing so, dropped the Visual Design Studio. If this is the case, try using the redirected URL (eg: https://app.acme.com/home) when you enter in the URL from app.pendo.io, after selecting Manage In-App.

If the above scenarios don't resolve the issue, see our shortcuts below to troubleshoot further. 

Use the following browser console command to launch the designer:window.pendo.designerv2.launchInAppDesigner().

Cross-origin embedder policy (COEP) limitations and known issues

‌The Visual Design Studio supports cross-origin embedder policies (COEP). Web SDK version 2.272.0 or above is required to launch Visual Design Studio in a COEP-enabled environment. 

Note that some Pendo guide features won't work in COEP environments because they rely on external resources that we don't control, and these resources may not provide the necessary headers. For example:

• Externally hosted resources, such as embedded videos or images, will fail to load unless the hosting server explicitly includes a Cross-Origin-Resource-Policy (CORP) header.
• The current CORP feature flag exists on the subscription level, so having a mix of apps with and without COEP isn't possible.

Guide preview must be launched from the Visual Design Studio for COEP-enabled apps. If you must launch guide preview from within Pendo, we suggest using a staging server that doesn't have COEP enabled to design or preview your guides.

If your application has the Disable Designer Launch URL Token flag enabled, the Visual Design Studio can't be launched from Pendo. However, it can still be accessed manually via the browser console using the following command:

pendo.designerv2.launchInAppDesigner()

Important:To launch the Visual Design Studio from Pendo, the Disable Designer Launch URL Token flag must be disabled for the application associated with the guide. Each guide is tied to a specific App ID.

If you also need to use the Visual Design Studio for Page or Feature Tagging, the flag must be disabled in the default app.

Browser local storage

The Visual Design Studio launches by leveraging your browser’s local storage from your Privacy and security settings. Make sure to enable it in your browser settings.

Safari Browser (version 12 or lower)

Make sure you’re using the latest version of Safari 12. In most cases, Safari maintains site cookies, so it's recommended to clear cookies if the Visual Design Studio doesn't launch on the first attempt with Safari. All future attempts should resume as normal. If you’re unsure how to clear these cookies, check out Safari’s documentation.

Safari (version 13.0.4+)

Safari implemented a different security standard called Intelligent Tracking Prevention (ITP) to restrict sharing of cookies between first and third-party apps. As of February 20, 2020, ITP (version 2.3) is included in Safari 13 on macOS for Catalina, Mojave, and High Sierra. ITP prevents the Pendo from launching the Guide Designer because we leverage cookies to launch the Visual Design Studio over your application. At this point, the Visual Design Studio is no longer supported in Safari version 13.04+, but we'll be open to launching another investigation in the future.