Element: Embed | Teachfloor Help Center

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

Navigate to your course curriculum
Open the course where you’d like to insert an embedded tool.
Click “+ Add Element”
This option appears in the left-side panel of your curriculum editor.
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:

Scroll to the Embed Setup section.
Paste the entire iframe code inside the text box.
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.