1. Pendo Help Center
  2. Analytics
  3. Dashboards

Embed IFrame Code Widget

Last Updated:

The Embed IFrame Code widget allows you to add and display iframe content on any Pendo Dashboard. You can include more information from external sources and add context to your product data. Many apps, like design and collaboration tools, provide embed code for sharing content. With the Embed IFrame Code widget, you can embed interactive content, visualizations, video, and more on your Pendo Dashboards, providing additional context for your Pendo data and more opportunities for collaboration and inspiration.

Code used in the embed widget should be HTML wrapped in <iframe> tags and accessible using the src URL provided in the code. Most third-party tools provide this code in their sharing options. This code can be copied and pasted into the widget in its entirety and Pendo will make any necessary adjustments to render it appropriately on the Dashboard.

Example showing Whimsical wireframe embedded in Pendo Dashboard widget

DemoEmbedWidget.png

 

Requirements

  • Any Pendo user can add the Embed IFrame widget to their Dashboard
  • Embed code must be an HTML IFrame element

Configure Embed IFrame Code Widget

  • Add the Embed Code widget to the Dashboard to begin configuring your iframeAddEmbedWidgetFlow.png

 

Edit IFrame Widget

1. Edit the name of your widget. Add a custom name that will help you recognize your iframe content.

EditEmbedWidget.png

 

2. Find the embed code for the content you want to add. In third-party apps, this is usually behind a share or embed button.

Example from Whimsical                   Example from YouTube

WhimsicalEmbedButton.png     YoutubeEmbedButton.png

Tip: If you can create your own iframes from your app or other tools, you can add your own custom content to your Pendo Dashboards. You aren't limited to specific content sources. These are just common examples.

 

3. Copy and paste the <iframe> embed code in its entirety into the Embed Code field. Pendo may adjust the style or size to render the iframe inside the widget. At a minimum, your embed code must include src="URL of iframe". Pendo will automatically load the embed code as an iframe if it is not wrapped in the expected <iframe> HTML tags.

EditwithCode.png

 

4. Select View Preview to test your iframe code. If your code is error-free, you'll see your iframe in a small preview window in the Edit Widget modal. If it can't load, you'll see an error message.

5. Select View Code and check your src URL and formatting.

EmbedPreviewError.png

 

5. Select Save to add the widget to your Dashboard and load the iframe. If your embed code does not have the src URL with open and close double quotation marks, the new widget settings cannot save.

AcmeDashboardExample.png

 

Frequently asked questions

There was an error loading my HTML Embed code. How do I fix it?

  • There may be a typo in your embed iframe code, check your code and try again
  • Check the src URL, make sure it is a valid URL and has open and close double quotation marks
  • If you're using third-party code, copy the entire code block to minimize errorsEmbedPreviewError.png

For security purposes, Pendo only accepts specific characters in the embed code for a widget. The current list of acceptable characters is:

export const VALID_LINK_REGEX = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z]{2,}\b(?:[-a-zA-Z0-9@:%._+~#=?!&/]*)(?:[-a-zA-Z0-9@:%._+~#=?!&/]*)$/i;

 

Related articles