Embed iframe content on dashboards

The Embed iFrame Code dashboard widget allows you to add and display iframe content on any Pendo dashboard. By leveraging external sources and embed codes provided by various apps, such as design and collaboration tools, you can enrich your product data and enhance your dashboard's context with interactive elements, visualizations, videos, and more.

Code used in the embed widget must 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.

1. To add the widget to a dashboard, navigate to the dashboard, then select + Add Widget in the top-right corner of the page.
2. Select Embed iFrame Code from the list of available widgets.
   
   
   
   
3. Update the Name of the widget that appears on your dashboard.
4. Copy the full <iframe> embed code from your desired source. In third-party tools, you can typically find this code within a "share" or "embed" option. This must be an HTML iframe element. Here are two examples from Whimsical and Youtube:
   
    
   
   
5. Paste the code into the Embed Code field within the widget configuration. Pendo might adjust the style or size to correctly render the iframe inside the widget. At a minimum, your embed code must include src="URL of iframe". Pendo automatically loads the embedded code as an iframe if it isn't wrapped in the expected <iframe> HTML tags.
6. Preview the embedded content, then select Save to add the widget to your dashboard.
   
   

If the preview doesn't populate as expected after loading your HTML embed code, here are a few common issues and troubleshooting steps:

• There might be a typo in your embedded iframe code. Ensure you've copied and pasted the correct code, then try again.
• Check the src URL, ensuring it's a valid URL that has open and closed double quotation marks ("").
• If you're using third-party code, copy the entire code block to minimize errors.

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

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;

For more information on general dashboard and widget functionality, see Dashboards.