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, component setup and behavior, and examples of iFrame component configurations.
The iFrame component is a presentation component that lets you display information from outside your course by embedding iFrame content to your learners.
The iFrame component is fully responsive. It can also be read by screen readers.
Component set up
To add this component, follow the steps in this article:
Add a Component
Explore everything there is to know about Evolve. This collection begins with the basics of Evolve and completes with information on the tool's more advanced features. Feel free to start from the beginning or hop around to the specific section that suits your needs.
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.
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.
- Add Instruction Text that tells users how to use the component.
- 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.
In the Behavior section, 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.
The iFrame component is a flexible component. The iFrame component can for example display an embedded webpage, a form, or anything else you want to get embedded into your course to be displayed to your learners.
Did this article help?
Let us know by leaving a star rating or review at the top of this article.