Embedding iFrames

Workvivo facilitates the use of iFrames through Pages and News Articles!

An iFrame is a HTML element that allows you to embed a web page into a separate parent page - these pages can be static or interactive. 

You can create your iFrame by pasting the code into the source of your Page/Article. To do this, navigate to Tools > Source Code from the editor.

Top tip: If you would like to highlight your embedded iFrame and ensure it's easily accessible from the main activity feed, why not create a Featured Story!

Device(s): Desktop to create, can be viewed on both Desktop and Mobile

Roles / Permissions: System Admin, Editor, Global Pages Editor, Space Owners/Admins can create articles in Spaces

Customizing your iFrame

As Workvivo is essentially displaying a third-party web page, many aspects cannot be customized, these changes would have to take place on the host's side.

This includes:

• Images
• Styling (e.g. colors, background etc.)
• Site responsiveness

Aspects of your iFrame which can be customized on Workvivo include:

• Height & Width
  • This value can be a percentage (%) or pixels (px)
    
• You can also decide whether it will be static or interactive

Creating your iFrame

Take the below code for example, where we will embed a regular web page.

<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.

Other use cases

Other potential ideas include embedding a Google Form (example below), MS Form, cloud-based collaboration services (eg. Miro board) or a countdown clock.

If you are using a third-party application similar to the ones mentioned above, you may have to get the embed code directly from the host website.