Help Launching Visual Design Studio

Overview

When you choose to "Manage In My App," a new browser tab or window will launch to show you a preview of your app with the Guide displayed. If this didn’t occur, the following scenarios may help you before you reach out to 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 logged into Pendo, open a browser tab and use the following shortcut key to launch the designer from the Guide Details page:

If you’re already using this shortcut key for another application, you can turn off this Pendo shortcut key. To do this, navigate to "Subscription Settings" and choose the appropriate app. From the list, uncheck the shortcut key.

If that does not work, open up the console in the developer tools (F12),  type pendo.designerv2.launchInAppDesigner() in the console and hit enter. 

Note: If neither of these shortcuts is working for you or the Alt + Shift + 8 is not working, please reach out to Pendo Support.

If new a browser tab or window didn’t launch

• Confirm that a tab didn’t open in a different browser window.
• Your browser (or plugin/extension) may have settings that prevent sites from opening a new tab or window. Please check and modify these browser settings.

If a new tab opens, but your app does not load

• Make sure you put in the right URL for your application. 

If a new tab opens & your app loads, but you see an Authentication Error Message

• First, click the Login button, which will send to you app.pendo.io to log in. This could happen if you bookmarked a previous Designer session. 
• If you have any browser or plug-in settings that disable cookies, please modify your browser settings. 

If a new tab opens & your app loads, but you see a Changes 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

• Type pendo.validateEnvironment() into the console and hit enter
• The console will return the current Visitor and Account metadata, native Javascript method check, and validate subscription config options
• The native Javascript method check will highlight any non-native implementations that may be causing Pendo performance issues
• Your developers may be able to troubleshoot the app's Javascript implementation and resolve the issue
• Contact Pendo Support if additional technical assistance is needed

If a new tab opens & your app loads, but no Pendo Guide preview displays

• Make sure the Pendo snippet is installed on the page you are viewing. To verify, follow the steps via the Browser Developer Console:

  • Open up your application in a browser tab and sign into your app (not Pendo) as a user
  • Open the Browser Developer Console
  • Type pendo.validateInstall() into the console and hit enter
  • 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.

• Make sure you are using at least version 2.14.10 of the Pendo Agent. To validate your version number choose one of the following two flows:

  1. Navigate to "Subscription Settings" and choose your App by clicking on your username in the lower left-hand corner of the Pendo app.
     • Choose "Agent Settings" and validate your "Production Environment" version number.
  2. Open up your application in a browser tab and sign into your app (not Pendo) as a user
     • Open the Browser Developer Console
     • Type pendo.VERSION into the console and hit 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, then go to app.pendo.io/admin, hover over the app in question and click "View App Details."Look for "Disable Designer Launch URL Token" and check the box to the right

  • Go back to the guide and click 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 may 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 clicking Manage in-App.
• If the above scenarios do not resolve the issue, please see our shortcuts below to troubleshoot further. 

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

Browser Local Storage

The Visual Design Studio launches by leveraging your browser’s local storage from your cookie settings. Please make sure to enable it in your browser settings.

For example, if you use Chrome, the “Keep local storage” item should be turned to “off” for it to work correctly:

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 like normal. If you’re unsure on 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.