iFrame Component

This component is recommended for use when creating accessible courses ONLY if the content that will be displayed in the iFrame meets the appropriate level of accessibility for the target audience.

The iFrame component lets you embed iFrame content from anywhere inside your course to be displayed to learners.

This article provides an overview of the iFrame component as well as component setup and behavior.

Component overview

The iFrame component is a presentation component that lets you display information from outside your course by embedding iFrame content to your learners. For example, the iFrame component can display an embedded webpage or a form.

The iFrame component is fully responsive and flexible. It can also be read by screen readers.

Component set up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General Section, you Add Title, or an Display Title, as needed. Display Title is seen by learners.

Add Body. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed, and fill in iFrame Title for screen readers.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the iFrame component. This widget can display an icon and label prior to the iFrame component completion, which changes to a different icon and label once the iFrame component is completed.

Behavior section

In the Behavior section, set the desired completion status. If completion status is set on iFrame Content Event, some code must be added to your content to allow it to communicate with Evolve. See Advanced section below.

Set the height of the iFrame component using the iFrame Desktop Height and iFrame Mobile Height fields. Or, you can enable Automatically Calculate iFrame Height to have Evolve calculate the iFrame component’s height based on the height of the iFrame content.

You can also set an iFrame Height Selector should you need to specify an element within the iFrame content to use as the basis for the height calculation.

Add iFrame content

iFrame content is added in the iFrame section of the component settings. The iFrame component can either be used to display content that is external to Evolve - such as an online survey/form, or video from a streaming video service not natively supported by Evolve - or it can be used display content that is uploaded into Evolve itself.

iFrame Content Source

To display content external to Evolve in the iFrame component, enter the iFrame content source. This will either be in the form of a URL or an iFrame ‘embed code’.

Enable Use iFrame source attributes if using an iFrame embed code which contains additional settings - such as width, height, allowfullscreen - and you would like these settings to take precedence over the Evolve settings.

Embedded Content

When toggling on Use Embedded Content, you can then select the Embed Content to be displayed in the iFrame component. Use these settings if your iFrame content is NOT externally hosted.

After selecting the + icon in the square under Embed Content, select Create New Asset (the + icon) to the top right of the Select embed popup. The new asset must be a .zip file and must contain a file called index.html at the top level of the .zip file.

Advanced

For embedded content, you can set up the iFrame component so that it can be completed by a specific trigger in the iFrame content, such as a button click (see Behavior section above). To do this, you will require two snippets of code:

<script>
    window.addEventListener('message', e => window.evolve = e.ports[0]);
</script>

This first snippet needs to be added to the < head > section of the iFrame content.

evolve?.postMessage('completed')

This second snippet needs to be included where the iFrame content will trigger completion.

Here is an example of how this works:

Here is the example file if you'd like to test how the coded trigger works.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.