> For the complete documentation index, see [llms.txt](https://guides.mangoapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guides.mangoapps.com/user-guide/widget-gallery/iframes-in-mangoapps-widgets.md).

# iFrames in MangoApps Widgets

### Overview

An **iFrame** lets you display content from another website or tool directly inside MangoApps. Think of it as placing a “window” into another site without requiring users to leave your portal. This is useful for embedding dashboards, forms, videos, calendars, or intranet pages from other systems.

In MangoApps, you will use the **iFrame widget** when creating or editing a page. This guide explains the requirements, setup process, and best practices for making your iFrame work smoothly.

{% hint style="success" %}
After reviewing this guide, you may also want to see our full [Widget Guide](https://guides.mangoapps.com/user-guide/widget-gallery?q=i+frame\&scope=all#can-i-create-my-own-widget).
{% endhint %}

***

### What’s Needed for an iFrame to Work

Before embedding a page in an iFrame, make sure the source content meets these requirements:

1. **The page must be accessible**
   * The URL you use should be reachable by anyone who views the widget.
   * If the page is behind a login, ensure users are already logged in or that Single Sign-On (SSO) is enabled.
2. **The site must allow embedding**
   * Some websites block their content from being shown inside other sites for security reasons.
   * If blocked, check if the service provides a special embed link or settings to allow iFrame support.
3. **The URL must use HTTPS**
   * MangoApps supports only secure pages (`https://`).
   * Non-secure (`http://`) links will not load.
4. **The page should display well in a frame**
   * Since an iFrame is a “window,” the embedded page should be responsive and sized appropriately.
   * Content that does not fit may require scrolling or custom sizing adjustments.

***

### Tips for Best Results

To ensure your iFrame looks and functions correctly in MangoApps:

* **Test first in a browser**: Paste the URL in a browser tab. If it does not load there, it will not load in MangoApps.
* **Match dimensions to content**: Set a width and height that best fit the embedded content.
* **Plan for authentication**: Dashboards, forms, or tools requiring login should support SSO or session-based access for a seamless user experience.

***

### Example Use Cases

Here are some common ways teams use iFrames in MangoApps:

* Embedding a **Power BI** or **Google Data Studio** dashboard.
* Displaying a company intranet page from another system.
* Showing a **web form**, **video player**, or **shared calendar** directly in MangoApps.

***

### Test Your iFrame Before Using It in MangoApps

It’s a good idea to preview your iFrame before adding it to MangoApps. You can use free tools such as [iframe-generator.org](https://iframe-generator.org/) to:

* Check if the site allows embedding.
* Adjust width, height, and preview how it will appear.

Once tested, add your iFrame link into the **iFrame widget** on your MangoApps page and adjust the settings as needed.