---
title: How to Embed iFrame Tool in Open edX
description: The iframe tool allows you to integrate ungraded exercises and tools from any Internet site into the body of your course. It places an iframe inside an HTML component, and then the exercise or tool ap
---

[Skip to content](https://help.edly.io/docs/how-to-use-iframes-0#main-content)

English

Show submenu for translations

![](https://help.edly.io/hs-fs/hubfs/Edly%20by%20Arbisoft%20(Red%20and%20Gray)-1.png?width=100&height=75&name=Edly%20by%20Arbisoft%20(Red%20and%20Gray)-1.png)

Open main navigation

Close main navigation

- English
  
  Show submenu for translations
- Visit edly.io

 Visit edly.io

 Hello. How can we help you?

- There are no suggestions because the search field is empty.

1. [Edly Knowledge Base](https://help.edly.io/docs?hsLang=en)
2. [Studio](https://help.edly.io/docs/studio?hsLang=en)
3. [Exercises and Tools](https://help.edly.io/docs/studio?hsLang=en#exercises-and-tools)

# How to Embed iFrame Tool in Open edX

### Overview

The iFrame (Inline Frame) tool allows you to seamlessly integrate external, ungraded exercises, simulations, interactive maps, or third-party web tools directly into the body of your course content. It embeds a self-contained window inside a text block, displaying external content without forcing learners to open a new tab or navigate away from the platform player.

**Tip:** Ensure you are logged into **Open edX Studio** before proceeding.

***Accessibility Disclaimer**: Before embedding third-party content, review the external tool to ensure it is fully compliant with web accessibility guidelines (e.g., keyboard-navigable and compatible with screen readers).*

### Step 1: Deploy the iFrame Component

In the current platform release, the iFrame template is nested directly within your primary text-authoring options.

**Procedures:**

1. Open your course run in **Studio**.
2. Navigate via your **Course Outline** into the specific **Unit** where you want to embed the external asset.
3. Scroll down to the **Add New Component** dashboard panel.
4. Click the **Text** tile.
5. From the expanded text templates menu, select **IFrame Tool**. A text block containing a default interactive window template will load immediately onto your page canvas.

> **\[Image Placeholder: Screenshot of the modern Studio Unit Editor highlighting the 'Text' component tile and 'IFrame Tool' selection option\]**

### Step 2: Configure the Source URL

To point the player frame to your specific asset, you must switch into the raw source code view.

**Procedures:**

1. Locate your newly added IFrame component block on the unit canvas and click **Edit**.
2. On the visual editor toolbar, click the **HTML (source code icon)** button. A raw code editing panel will open.
3. Locate the `<iframe>` element string within the code panel. It will look similar to this default template block:HTML
   
   ```
   <p><iframe src="https://studio.edx.org/c4x/edX/DemoX/asset/eulerLineDemo.html" width="402" height="402" marginwidth="0" marginheight="0" frameborder="0" scrolling="no">You need an iFrame capable browser to view this.</iframe></p> 
   ```
4. **Update the Source:** Replace the placeholder URL inside the `src="..."` attribute with the exact link to your external tool. 
     - *Crucial Rule: The external tool link must explicitly begin with **`https://`**. Links using unsecure `http://` configurations will fail to display in modern browsers due to mixed-content security blocks.*
     - *Note: Be careful not to accidentally delete the opening or closing straight quotation marks surrounding your URL string.*
5. Click **OK** to commit the code modifications and return to the primary visual editor screen.

> **\[Image Placeholder: Studio view of the open HTML source code modal showing the highlighted iframe src attribute line\]**

### Step 3: Customize Text Context and Save

Before publishing, you can frame the window with instruction text or custom context paragraphs.

**Procedures:**

1. While still inside the component editor workspace, click above or below the shaded placeholder box representing your iframe.
2. Replace the default placeholder text with your own tailored assignment instructions, resource descriptions, or external citation links.
3. Click **Save**.
4. Click the **Publish** button in the right-hand unit status panel to push the integrated module live to the LMS.

### Understanding Technical iFrame Attributes

You can fine-tune how the external window behaves by altering or appending attributes inside the opening `<iframe>` tag via the HTML source editor:

- **`src`:** *(Mandatory)* The absolute destination web address of the tool you are loading.
- **`title`:** *(Mandatory for Accessibility)* A brief, clear text description of what the iframe contains (e.g., `title="Interactive Geometry Sandbox"`). This allows screen readers to declare the block's purpose to visually impaired learners.
- **`width` and `height`:** Controls the physical dimensions of the window layout box, specified in pixels (e.g., `width="600" height="450"`) or responsive percentages (e.g., `width="100%"`).
- **`scrolling`:** Set this to `"yes"` if the external tool requires internal scroll bars to navigate, or `"no"` to lock scrolling down.
- **Fallback Text:** The sentence positioned between the opening `<iframe>` and closing `</iframe>` tags (e.g., *"You need an iFrame capable browser..."*) only renders if a learner uses an outdated web browser that completely lacks iframe compatibility.

- [Discovery Site](https://help.edly.io/docs/discovery-site?hsLang=en#main-content)

    - [Settings and Tools](https://help.edly.io/docs/discovery-site?hsLang=en#settings-and-tools)
    - [Assets Management](https://help.edly.io/docs/discovery-site?hsLang=en#assets-management)
- [Edly Panel](https://help.edly.io/docs/edly-panel?hsLang=en#main-content)

    - [Settings and Tools](https://help.edly.io/docs/edly-panel?hsLang=en#settings-and-tools)
    - [User Management](https://help.edly.io/docs/edly-panel?hsLang=en#user-management)
    - [Panel Insights](https://help.edly.io/docs/edly-panel?hsLang=en#panel-insights)
    - [Panel Dashboard](https://help.edly.io/docs/edly-panel?hsLang=en#panel-dashboard)
    - [Themes](https://help.edly.io/docs/edly-panel?hsLang=en#themes)
- [Studio](https://help.edly.io/docs/studio?hsLang=en#main-content)

    - [Studio Guides](https://help.edly.io/docs/studio?hsLang=en#studio-guides)
    - [Creating a Course](https://help.edly.io/docs/studio?hsLang=en#creating-a-course)
    - [Exercises and Tools](https://help.edly.io/docs/studio?hsLang=en#exercises-and-tools)
    - [Course Components](https://help.edly.io/docs/studio?hsLang=en#course-components)
    - [Course Assets](https://help.edly.io/docs/studio?hsLang=en#course-assets)
    - [Re-running Your Course](https://help.edly.io/docs/studio?hsLang=en#re-running-your-course)
- [LMS Administration](https://help.edly.io/docs/lms-administration?hsLang=en#main-content)

    - [User Management](https://help.edly.io/docs/lms-administration?hsLang=en#user-management)
    - [Open edX E-commerce](https://help.edly.io/docs/lms-administration?hsLang=en#open-edx-e-commerce)
    - [Instructor Dashboard](https://help.edly.io/docs/lms-administration?hsLang=en#instructor-dashboard)
- [Learner Experience](https://help.edly.io/docs/learner-experience?hsLang=en#main-content)

    - [Learning Management System](https://help.edly.io/docs/learner-experience?hsLang=en#learning-management-system)
    - [Discovery Site](https://help.edly.io/docs/learner-experience?hsLang=en#discovery-site)
- [Getting Started](https://help.edly.io/docs/getting-started?hsLang=en#main-content)

    - [Open edX E-commerce](https://help.edly.io/docs/getting-started?hsLang=en#open-edx-e-commerce)
    - [Learning Management System](https://help.edly.io/docs/getting-started?hsLang=en#learning-management-system)
    - [Exercises and Tools](https://help.edly.io/docs/getting-started?hsLang=en#exercises-and-tools)
    - [Discovery Site](https://help.edly.io/docs/getting-started?hsLang=en#discovery-site)
    - [Edly Panel Management](https://help.edly.io/docs/getting-started?hsLang=en#edly-panel-management)
    - [Edly Go App](https://help.edly.io/docs/getting-started?hsLang=en#edly-go-app)
- [General](https://help.edly.io/docs/general?hsLang=en)

[![Chill listening crop-3](https://help.edly.io/hs-fs/hubfs/Edly%20by%20Arbisoft%20(Red%20and%20Gray)-2.png?width=34&height=24&name=Edly%20by%20Arbisoft%20(Red%20and%20Gray)-2.png "Chill listening crop-3")](http://arbisoft.com)

<https://www.facebook.com/> <https://www.twitter.com/> <https://www.instagram.com/> <https://podcasts.apple.com/> [mailto:email@email.com](mailto:email@email.com)

Copyright © 2026, Edly Inc.