Embedded app

Websites will often have embedded content, for example videos from another platform such as YouTube.

This is done through an iframe, which is simply a HTML element that contains another HTML document inside.

In Budibase you can embed an entire published application within your webpages.

📘

Permissions

Only application Screens with Public Access level can be viewed within an embedded Budibase app.

You must also Manage access for any tables being used to have Public Read/Write access as required.

Getting the iframe snippet

To get the embed code snippet, click on the Settings tab within your app, and then click Embed.

Here you can see and copy the iframe contents.

Publishing your app

You can publish your app by clicking the drop-down in the top-right corner of the screen, and clicking Publish.

Once you app is published, you will see a new button appear: </> Embed. Clicking this button will take you to the Embed settings section.

Settings

The iframe has a number of attributes that can be changed. We recommend that you only change the width, height and frameborder properties as changing the allow permissions could affect the working of your app.

🚧

Building an embedded app for mobile

If you are Designing for mobile then be aware that the {{ Device.Mobile }} and {{ Device.Tablet }} Bindings will always be false regardless of the device the embedded app is being viewed on.
This is because the iframe has no context of the parent window.

Creating widgets

You may find that you don't need to embed a fully fledged multi-screen app. Perhaps you want to embed a single Table or Chart for example, to display on your webpage.

In this case you will want to hide the navigation links, as well as the app title and logo.

To do this, click on your app screen and in the Settings Panel toggle off Show nav. Remember that the access level of the screen should also be public! Publish your app for changes to take effect.

---

Embed component

The feature of embedding a Budibase app as an iframe should not be confused with the Embed Component within the Design section.

A common use-case for the embed component is to add Global styling to your app screens. You could however also use it to embed iframes, including another Budibase app!