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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guides.mangoapps.com/user-guide/widget-gallery/iframes-in-mangoapps-widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.