Skip to main content

Element: Embed

This is a step-by-step guide for setting Embed element into your module or lesson.

Filippo Schiano di Pepe avatar
Written by Filippo Schiano di Pepe
Updated over a week ago

This is a step-by-step guide for setting Embed elements into your module or lesson.

🧠 What is the Embed Element?

(See screenshot below)

The Embed Element in Teachfloor allows you to embed any third-party tool, software, or widget into your course. This is done using an iframe embed code—commonly supported by tools like Google Docs, Calendly, Typeform, Loom, Miro, Airtable, Notion, and many more.

Your learners don’t need to leave Teachfloor to interact with these tools—they’ll engage with them right inside the module.

🧭 How to Add an Embed Element

  1. Navigate to your course curriculum
    Open the course where you’d like to insert an embedded tool.

  2. Click “+ Add Element”
    This option appears in the left-side panel of your curriculum editor.

  3. Select “Embed”
    Scroll through the available elements and select “Embed” under the content tools.

(See screenshot below)

⚙️ Shared Settings

Before we focus on the Embed-specific options, don’t forget to configure the basic settings first. These include:

  • General Settings (Name, Description, and Resources of the element)

  • Visibility Controls

  • Requirements (Prerequisite lessons)

  • Metadata (Internal tags)

📘 These settings work the same across all element types. For a complete breakdown, refer to our centralized guide:

👉 Teachfloor – Common Settings for Each Element

🎯 Embed-Specific Settings (Unique to This Element)

(See screenshot below)
​

The heart of the Embed Element lies in the Embed Setup Panel. Let’s go through everything you can do here:

1️⃣ 🔗 Embed Setup (Copy & Paste Your Code)

🔹 Step 1: Copy the Embed Code from the Tool

Almost every tool you want to embed will give you a special block of HTML code—specifically an iframe.

Here’s what an iframe looks like:

htmlCopyEdit<iframe src="https://example.com/embed" width="100%" height="800"></iframe>

This code tells Teachfloor:

  • What to show (src)

  • How wide it should be (width)

  • How tall it should be (height)

🧭 Where to find embed codes:

Tool

Where to Find Embed Code

YouTube

Click Share > Embed

Calendly

Go to Share > Add to Website > Inline Embed

Google Docs/Slides

Click File > Publish to Web > Embed

Typeform

Click Share > Embed into a web page

Loom

Click Share > Embed

Miro/FigJam

Click Share > Embed or Export

Airtable/Notion

Use the platform’s “Copy Embed” function

(See screenshot below)
​

🔐 Important: Some tools may require the document or form to be “published” or set to public/viewable by anyone with the link before the iframe works.

🔹 Step 2: Paste the Code into Teachfloor

In your Embed Element:

  1. Scroll to the Embed Setup section.

  2. Paste the entire iframe code inside the text box.

  3. Your embed is now ready to preview.

(See screenshot below)
​

✅ Recommended sizing:

htmlCopyEdit<iframe src="..." width="100%" height="800"></iframe>

  • width="100%" ensures full responsiveness

  • height="800" gives enough vertical space to prevent scrolling

📏 Want a tighter height? Try height="600" or even 400 depending on the tool’s layout.

2️⃣ 🖼️ Aspect Ratio Control

(See screenshot below)
​

This setting allows you to lock the proportions of the embedded content.

  • Disabled (default): No ratio restriction—the content fills the area freely.

  • Enabled: Manually set a specific ratio (e.g., 4:3), which is common for videos or presentations.

This is how the embedded software will look like 4:3;

(See screenshot below)

📐 Use this when the embed content looks “squished” or cropped. It ensures a consistent layout across devices.

3️⃣ 🧱 Width Control

(See screenshot below)
​

You can customize how wide the embedded content appears on the learner’s screen:

Option

Behavior

Default

Content is centered and aligned within the standard content container. Ideal for most tools.

Wide

The content stretches across the full width of the page. Ideal for wide interfaces like dashboards or interactive canvases.

🎨 This is particularly useful for content like embedded slideshows, full-page forms, or Miro boards.

(See screenshot below)
​

✅ What Learners Experience

When learners open a module with an Embed Element, they will see:

  • The cover image and description (if enabled to display on top)

  • The embedded third-party tool displayed in the iframe

  • Optional resource files or text beneath

  • A “Mark as Completed” button once they’ve finished interacting

(See screenshot below)

🎯 Learners are not redirected—everything is embedded within the course interface for a seamless experience.

🧠 Use Case Examples

Scenario

Embedded Tool

Book a mentoring call

Calendly link

Watch a tutorial

Loom or YouTube embed

Fill out a survey

Typeform or Google Form

Collaborate visually

Miro board

View a live dashboard

Airtable, Notion, or Google Sheets

Submit an assignment

Embedded Google Doc or Dropbox Paper

💬 Need Help?

If your iframe isn’t displaying correctly:

  • Double-check the embed code for syntax errors

  • Make sure the third-party platform allows iframe embedding

  • Use the recommended height and width for best results

Still stuck? Our friendly support team is always here.

📍 Click the chat icon in the bottom-right corner of Teachfloor and let us help—real humans, no bots.

Did this answer your question?