Help launching Visual Design Studio

Last updated:

When you choose to Manage In My App, a new browser tab or window launches to show you 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: As of February 17, 2020, Chromium (the open-source engine that powers Chrome and most other modern browsers) released a security update that impacts the way cookies are allowed on sites that use http (https sites are unaffected). Learn more about Chromium's Cookie Update.

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.

shortcut-key.png

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 uncheck the shortcut key.

Note: If neither of these shortcuts is working for you or the Alt + Shift + 8 is not 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 does not load

Check that you 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 log 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 validate subscription config 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 Pendo 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 the your identifiable metadata will be returned. If the snippet is not installed on this page, an error will show saying pendo is not 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 Agent. To validate your version number choose one of the following two flows:

      • Navigate to Subscription Settings and choose your App by selecting your username in the bottom-left corner of the Pendo app. Choose Agent 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, go to app.pendo.io/admin, hover over the relevant app, and select View App Details. Check the box next to Disable Designer Launch URL Token.

Go back to the Guide and select Manage In-App to load the designer over your application. 

If you are seeing a different url from the one you originally entered into the URL input after selecting Manage In-App, then your application might have redirected to a different page (for example, from https://app.acme.com to https://app.acme.com/home), and in doing so, dropped the Designer. 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().

A cross origin embedder policy error is shown in the console after trying to launch the designer.

Visual Design Studio does not support cross origin embedder policies (COEP). If your application requires COEP to be enabled, we suggest using a staging server that does not have COEP enabled to design your guides.

coep_error.png

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

Safari Browser (version 12 or lower)

Make sure you’re using the latest version of Safari 12. In most cases, Safari will maintain site cookies so clear cookies if the designer launch fails 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 cookies between first and third-party apps. As of Feb. 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 designer over your application. At this point, Pendo Designer is no longer supported in Safari version 13.04+ but will be open to launch another investigation in the future. 

 

 

Was this article helpful?
5 out of 52 found this helpful