> For the complete documentation index, see [llms.txt](https://guides.noloco.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guides.noloco.io/pages/iframe-embeds.md).

# iFrame embeds

This page talks through how you can embed an iframe in your Noloco app.

{% embed url="<https://youtu.be/--AE8Br2AM4>" %}

In this video, you'll learn how to add static and dynamic iframe embeds to your Noloco app.

With static iframe embeds, you embed a URL where you want the same content to be visible to every user who can see that page. In our example, we embedded the Noloco support guides at [https://guides.noloco.io](https://www.youtube.com/redirect?event=video_description\&redir_token=QUFFLUhqbkVyMmRYNUVrbzYwU1l4cGF6eEg4a2xncGNxd3xBQ3Jtc0tuVUZfd25FMnRWaE52ZW4temRmc0xpcU1yUXctZnFPdmR4NjMtalk2ZVJaTWdaRTMwdUs2UUlEZ3Z5OU9yMjZKMjg5cU1wUUtlcUZkT1k3RVlGTlFaOGlIRVBNRjJ1MW9jSmplNkxuTGwzYVB0bkNBMA\&q=https%3A%2F%2Fguides.noloco.io%2F\&v=--AE8Br2AM4).

With dynamic iframe embeds, you can show different content to different users by pulling dynamic data associated with your Noloco Users table. Our example shows how you can embed different Calendly links for different users.

In the video above, we show how to use a static URL or pull a full URL from your data tables. However, there is a third option: you can simply append dynamic data to the end of the URL as well (as shown in the screenshot below).

![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-ece0f8354f2cbb687a54520018f4c0abce1c41fd%2Fpages%20iFrame.png?alt=media)

### Use a full iframe tag

You can provide a complete `<iframe>` tag instead of only an iframe URL. This lets you set the attributes your embedded application needs, including iframe permissions and other standard iframe attributes.

```html
<iframe
  src="https://example.com"
  sandbox="true"
  ...
></iframe>
```

### Detect the available size

If the embedded page needs its available size, add a script to that page to detect it. The embedded page is responsible for detecting its own size.

## Enabling Microphone and Camera Access for an iFrame Embed in Noloco

These steps allow you to enable microphone and camera access for a web application embedded in a Noloco iframe page. The instructions assume you are using an iframe to host your application and require user access to the microphone/camera for functionalities like voice or video recording.

1. **Prepare Your iFrame Embed Code**

   Use the following iframe snippet as a template. Replace `https://example.com` with the URL of the web application you want to embed.

   ```html
   <iframe src="https://example.com" allow="camera https://example.com; microphone https://example.com"/>
   ```

   * The `allow` attribute explicitly grants permission for microphone and camera access to the specified URL.
   * Ensure the `src` attribute points to your application's URL.
2. **Embed the iFrame in a Noloco Page**

   To embed the iframe in a specific page in Noloco, follow these steps:

   * Enable build mode on your app
   * Click the + icon at the top left in the left-side panel
   * Select **Iframe embed**
   * In the right-side panel, select the **Options** tab. You will see a ***Type*** dropdown
   * Choose **Input a URL**, and paste the iframe snippet into the field
3. **Test the iFrame**
   * Open the Noloco page containing the iframe.
   * Confirm that the browser prompts the user to allow microphone access.

     <img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-12b27132468e2ed7a72c9ffbbef6ffa4b50b140f%2Fimage.png?alt=media" alt="" data-size="original">
   * Test the embedded application to ensure audio and other features requiring microphone access function correctly.
4. **Troubleshooting**
   * If microphone access is not working, verify the `allow` attribute is correctly set and matches your application’s domain.
   * Refer to this [Stack Overflow post](https://stackoverflow.com/questions/57008648/accessing-camera-and-mic-in-sandboxed-iframe-from-different-subdomain) for additional insights on iframe permissions.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://guides.noloco.io/pages/iframe-embeds.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.