Application Builder - IFrame element

The IFrame element allows you to insert custom snippets of code anywhere on your page.

In this section, we will guide you through setting up an IFrame element and explain each configuration option in detail.

Overview

An IFrame is an HTML element used to embed another document within the current HTML document. It allows you to display content from another source without the need for the user to navigate away from the current page.

For the IFrame element, you can configure the element properties and style from the element settings.

The Application Builder allows you to bind the text to data sources. This enables the text to update dynamically based on user input or application logic.

Add and configure IFrame elements

To add an IFrame element, access the elements panel and select IFrame.

Once added, place the IFrame wherever you want it on the page. Don’t worry if it’s not perfectly positioned initially; you can always move it later.

Learn more about how to add and remove an element from a page.

Add and configure table elements

Now, you’ll configure the IFrame’s properties to make it function and look the way you want. This involves settings related to the IFrame style.

That’s it. Now the IFrame will appear.

IFrame source type

Using IFrames can be handy for integrating content from other sources into your application seamlessly.

You can set the source as a URL or an Embed.

  • URL: Input the link to the external resource to be embedded. Ensure that you have control over, or trust the URL entered.
  • Embed: Input the raw HTML content to be embedded.

For example, if you wanted to embed a map or form on a page, you could use an IFrame to display the map without redirecting the user to an external website.

Baserow form embed

IFrame content

You can enter static text here. However, if you’ve connected to a data source, all the fields from the data source will also become available.

First, you need to get your embed code.

To pass dynamic data, create a corresponding field in the pre-configured data source. You can create a text field in the table and add the embed code or create a URL field with the external link.

Next, add an IFrame element to the page and link the field from the data source.

Baserow get your embed code.

IFrame height (px)

The height of an IFrame element within an application can be specified in pixels (px). The maximum allowed height is 2000px.

Here’s an example of setting the iframe height to 500px:

<iframe src="https://www.example.com" height="500" frameborder="0"></iframe>