The HTML Builder allows you to embed interactive and media content directly within your Pages or News Articles. This can help bring additional context, functionality, and engagement to your content by displaying external tools, videos, or live streams alongside your internal communications.
Embedding content is typically done using iFrame or embed code provided by third-party services.
This feature is available when using the legacy HTML builder in Pages or the Article builder.
Device(s): Desktop to create, can be viewed on both Desktop and Mobile
Roles / Permissions:
- System Admin
- Editor
- Global Pages Editor
- Space Owners / Space Admins (for Space articles)
Embedding Content Using iFrames
An iFrame (inline frame) is an HTML element that allows you to display content from another website directly inside a page.
This can be used to embed webpages, forms, videos, interactive tools, dashboards or collaboration boards.
How to Add an iFrame
- Open the Page or News Article you want to edit.
- In the editor, navigate to Tools.
- Select Source Code.
- Paste the iFrame or embed code provided by the external service.
- Save your changes.
The embedded content will then appear within the page.
Example iFrame Code
Below is an example of a basic iFrame used to embed a webpage:
<p><iframe src="https://productportal.workvivo.com" width="100%" height="1000px" frameborder="0" marginwidth="0px" marginheight="0px" scrolling="yes" allowfullscreen="allowfullscreen" data-mobile-width="100%" data-mobile-height="1000px"></iframe></p>
- src = "https://productportal.workvivo.com" - therefore, it will embed this URL
- width = "100%" - it will take up as much width as possible within the Page/Article
- height = "1000px" - its height will be set to 1000 pixels
- scrolling = "yes" - the iFrame is scrollable and won't be static
Please note there are separate size parameters for mobile (data-mobile-width and data-mobile-height), in this example however, the dimensions are the same as web.
Web view:
Mobile view:
Note: If you encounter the below error, please contact your Customer Experience Project Manager or submit a request via the Help Center.
Customizing Embedded Content
Because the content is being displayed from an external website, most visual elements must be controlled on the host platform.
Examples of elements that cannot be customized in Workvivo include:
- Images
- Colors and styling
- Page layout
- Site responsiveness
However, you can adjust certain display settings on Workvivo such as:
- Width
- Height
- Whether the content is scrollable or static
Embedding Livestreams or Webinars
Livestreams and webinars can also be embedded in Pages using the embed code provided by the video platform.
This is useful when hosting content that might be external to Workvivo such as external broadcasts or livestreams, webinar recordings or video announcements.
How to Embed a Livestream
- Open the livestream video.
-
Copy the embed code from the video provider.
- Edit your Page.
-
Click the Insert Media icon.
- Select Embed.
- Paste the embed code.
-
Click Save.
The livestream video frame will appear within the page.
Adjusting the Video Frame Size
If the embedded video appears too small, you can resize the media frame by clicking the embedded video in the editor, selecting the Insert Media button and adjusting the frame dimensions as needed.
For example change the width to 950 and the height to 549.
This allows the video to display more prominently within the page layout.
Troubleshooting Embedded Content
If your embedded content does not appear correctly first check that the embed code was copied completely from the source. Next confirm that the external website allows embedding as some sources do block their content from being embedded into other locations. Finally, ensure the dimensions are appropriate for the page layout.
If you continue to encounter issues, please submit a request through the Help Center.
This article applies to the legacy HTML Builder. If you're using the new block-based Pages editor, see Embed Content in Pages.