IFrame Component
Outline
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.
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.
The iFrame component is fully responsive. It can also be read by screen readers.
Component set up
Follow these steps to add the iFrame component to a Block:

- Click Add Component.
- Use the component search or scroll to find the iFrame component.
- Click the iFrame component and select Add Left, Add Full, or Add Right.
Click the Edit Component icon on the newly added iFrame component to begin set up.
General section

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

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

- Add iFrame Instruction Text that tells users how to use the component.
- Include an Aria Label for screen readers, as needed, and fill in IFrame Widget 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 that 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.
Behaviour section

In the Behaviour section, enable Auto IFrame Height, as needed. You can also set Desktop height and Mobile height for your iFrame component.

Enabling Auto IFrame Height let 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 an embedded content.

When enabling Use an embedded content, you select the Embed Content to be displayed in the iFrame component.
Component Examples
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.