Skip to main content

Outline

This component is NOT recommended for use when creating accessible courses.

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


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

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.