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.

You can also enable Automatically Calculate iFrame Height, as needed. You can also set iFrame Desktop Height and iFrame Mobile Height for your iFrame component.

Enabling Automatically Calculate iFrame Height lets you enter iFrame Height Selector.

Add iFrame content

IFrame content is added in the iFrame section of the component.

In the iFrame section, you enter the iFrame content source for your content to be displayed.

Enable Use iFrame source attributes, as needed, and toggle on Use Embedded Content.

When enabling Use Embedded Content, you select the Embed Content to be displayed in the iFrame component. Select Create New Asset (the + icon) to the top right of the Select embed popup if you need to upload new content to embed.

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.