iFrame embeds

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

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.

With dynamic iframe embeds, you can show different content to different users by pulling dynamic data associated with your Noloco Users collection. 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 collections. 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).

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.

   <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.
   • 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 for additional insights on iframe permissions.