Help launching the Visual Design Studio

Last updated:

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

Note: If multiple users in your subscription experience launch issues at the same time, check the Pendo status page for active incidents before troubleshooting your application or browser.

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 sign in to Pendo, use the following keyboard shortcut to launch the Visual Design Studio from the guide's details page:

  • Windows and Linux: Alt + Shift + 8
  • Mac: Option + Shift + 8

shortcut-key.png

If the shortcut doesn't work, you can launch the Visual Design Studio from your application's browser console:

  1. Sign in to Pendo and start guide editing with Edit in my app, or start tagging with Tag Pages or Tag Features.
  2. Enter your application URL and open your application.
  3. In the tab containing your application, open the browser developer console. Run the command in your application, where Pendo is installed, not in app.pendo.io.
  4. Enter pendo.designerv2.launchInAppDesigner() and press Enter.

If the keyboard shortcut conflicts with another application, an admin with permission to edit your application's tagging and guide settings can turn it off. Go to Settings > Subscription settings > Applications, select the application, and open Tagging & Guide Settings. Under Basic Settings, select the Disable Guide Designer Keyboard Shortcut checkbox.

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

Troubleshooting

The Visual Design Studio launches from the console but not from Pendo

A common cause of this launch failure is Cross-Origin-Opener-Policy (COOP), an application security policy that can block communication between browser tabs. If your application blocks the window.opener reference, launch methods that rely on that reference can't open the Visual Design Studio.

Check the opener reference in the tab opened by Pendo:

  1. Start guide editing or tagging in Pendo and enter your application URL.
  2. In the application tab that Pendo opens, open the browser developer console.
  3. Enter window.opener and press Enter.

If the result is null, the tab has no opener reference. COOP can cause this; ask your development team to check your application's Cross-Origin-Opener-Policy response header. A tab you open directly can also return null, so use the tab opened by Pendo for this check.

If an opener reference is available, continue with the other troubleshooting checks in this article.

Allow launch using a URL token

When Disable Designer Launch URL Token is selected, Pendo uses window.opener instead of the launch URL token. Clear this checkbox to allow Pendo to pass encoded launch information in the application URL without relying on the blocked opener reference.

  1. Go to Settings > Subscription settings > Applications.
  2. For guide editing, select the application associated with the guide. For tagging, use the default application's launch settings.
  3. Open Tagging & Guide Settings.
  4. Under Basic Settings, clear the Disable Designer Launch URL Token checkbox. You need permission to edit these settings.
  5. Try launching the Visual Design Studio again.

If your application removes the pendo-designer query parameter before the Pendo Web SDK can read it, URL-token launch can also fail. In that case, use the manual launch options instead of changing your application's security policy.

Launch from the console

Follow the browser console launch instructions to open the Visual Design Studio in your application without relying on communication with the tab that opened it.

Save the launch command as a bookmarklet

A bookmarklet is a browser bookmark that runs JavaScript instead of opening a webpage. Use it to repeat the manual launch without opening the developer console each time.

  1. Create a browser bookmark, or edit an existing bookmark.
  2. Set its name to Launch Visual Design Studio.
  3. Set its URL to javascript:pendo.designerv2.launchInAppDesigner();, including the javascript: prefix.
  4. Save the bookmark.

To use the bookmarklet, sign in to Pendo, start guide editing or tagging, and select the bookmark in the tab containing your application with Pendo installed.

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

mceclip0.png

  • 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.

If you experience problems, enter pendo.validateNativeMethods() in your application's browser console and press Enter to identify overridden JavaScript methods. Share the output with your development team so they can investigate the overrides.

If your application uses Angular, work with your development team to load and initialize the Pendo Web SDK outside Angular's zone using ngzone.runOutsideAngular(). This pattern can address interference from Angular's changes to native JavaScript methods.

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.

JavaCheckError.png

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.

If your application redirects or removes the pendo-designer query parameter before the Pendo Web SDK can read it, the guide preview might not load. For example, a redirect from https://app.acme.com to another page might discard the launch parameter.

The launch token is normally removed from the URL after the Visual Design Studio authenticates and loads. A disappearing parameter alone doesn't indicate a failure. If launch fails and your development team confirms that your application removes the parameter before Pendo can use it, follow these steps.

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.

When you start tagging, Pendo doesn't know which application you want to tag until the Visual Design Studio opens. It therefore uses your subscription's default application settings for the initial launch, rather than the settings of the application you're about to tag.

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.

Tip: For Chrome users, update your settings under Privacy and security to "Allow sites to save data on your device."(chrome://settings/content/siteData). For Mozilla Firefox users, update your preferences for cookies in your Privacy & Security settings.

browser-settings.png

Clear a stuck Visual Design Studio session

If cookies and local storage are allowed and the other troubleshooting steps don't resolve the issue, clearing Pendo's stored session data can resolve a stuck session.

  1. Open your browser's settings for cookies and site data.
  2. Clear cookies and local storage for pendo.io. You don't need to clear data for every website.
  3. Sign in to Pendo again and retry launching the Visual Design Studio.

Clearing Pendo site data signs you out of Pendo. Avoid clearing unrelated application data.

If the Visual Design Studio still won't launch, contact Pendo Support and include:

  • Your browser and version
  • Your Pendo Web SDK version, available by entering pendo.VERSION in your application's browser console
  • The application URL you're launching into
  • The result of window.opener in the application tab opened by Pendo
  • Any browser console error messages
  • Whether pendo.designerv2.launchInAppDesigner() opens the Visual Design Studio from your application's console

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. 

Was this article helpful?
22 out of 106 found this helpful