Embed Content in Biz Reviews with iframes

Overview

WorkBoard Biz Reviews allow users to embed external web content like documents, videos, and interactive media using our iframe tray. For example, a web-hosted PowerPoint presentation, an online dashboard (Power BI) or web video (YouTube).

Embed Content with iframes

From any WorkBoard Biz Review:

Select the Pencil icon the top of the Biz Review.
Select the +Add content button.
Select Iframe from the drop down menu.
Provide a Name for your iframe.
Paste or enter the iframe HTML, or the embed URL without the HTML. WorkBoard will validate and reformat the provided content to ensure it’s presented cleanly and safely.
Select Save.

Please note that iFrames will only populate if they are publicly accessible or accessible to the user viewing the Biz Review. iFrames have their own permission requirements, so if a user is embedding s Sharepoint link, they must be logged in on their browser and have access to view the content.

How Do I Get the Embed HTML/URL for My Content?

In most cases, you’ll need to get an “Embed URL” from your application, rather than copying the URL from the browser’s location bar or using a Share URL.

Some potential blockers in embedding content include:

The configuration of different applications and how they allow content to be embedded in a remote iframe.
Browser rules regarding embedding content into iframes.
Local IT policies.
Vendors and websites may deny embedding their site as an iframe.

Example: You’ll need to choose Share | Embed and follow the prompts to get the embeddable iframe HTML for PowerPoint. WorkBoard will follow the configurations you set (such as active range or which slide to show) and remove unnecessary options from the iframe HTML.

Vendor-provided documentation on generating Embed URLs from common sources (published by the software vendor):

See this article for more information on embedding Tableau Vizzes in Biz Review iframe Trays.

Embed Google Slides from Presentation

To embed Google Slides as an iframe:

Access a Google Slides presentation
Choose File
Select Publish to the Web
Select Embed
Copy the URL and embed as an iframe

Note: Google Slides defaults to include some optional parameters that force the slide to advance automatically (default is 3 seconds).

If you'd like your content to remain on a specific slide until you advance it manually, you can delete the optional parameters portion from the iframe link in the following format: start=false&loop=false&delayms=3000

Start Google Slide from a Specific Slide

Access a Google Slides presentation
Select intended slide
Copy the URL link
Enter the corresponding doc id and slide id into the link structure
1. https://docs.google.com/presentation/d/[doc_id]/embed?slide=id.[slide_id]
Embed the URL as an iframe

Frequently Asked Questions

What’s an iframe?

iframe HTML starts with <iframe src=... and ends with </iframe> and instructs the browser to embed content on a page while limiting interaction between the page and the embedded content.

Why am I seeing “refused to connect” when I try to embed my content?

This error is most often due to services denying the ability to render a page in an iFrame. Services which do not want customers to embed content externally can enforce a “sameorigin” policy on their pages. This means that the page can only be displayed on a website that has the same URL as the core content. In order to better understand the approved methods of embedding content, consult that service’s documentation on the appropriate embedding methods.

If you’d like to confirm if the error is due to a sameorigin policy: From a Chrome browser, right click > inspect > select console on the top of the flyout window. Look for an error message that says: Refused to display 'https://example.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

How does WorkBoard ensure iframe security?

iframes are already “safe,” but WorkBoard further sanitizes any HTML provided to prevent malicious activity within a Biz Review. WorkBoard removes any iframe attributes that might allow communication between the iframe and the parent window. Formatting attributes (such as height and width) are removed since these attributes are controlled by the Biz Report. The iframe HTML may look different, but it should function the same way.

Why might WorkBoard alter the provided iframe link?

The rewritten iframe HTML contains an attribute that may be unfamiliar, aria-label. This is an accessibility attribute that lets screen readers communicate what’s contained in the iframe. This is optional and reverts to the name of the iframe if is missing or left blank.

Additional Resources on iframes

1. Mozilla iframe Web Docs - Frame Ancestor