Application Builder - IFrame element

The IFrame (Inline Frame) element creates a window within your application that displays content from another source. It is the primary tool for integrating external services (like Google Forms, YouTube videos, or BI dashboards) without requiring users to leave your page.

This page covers how to embed external websites, maps, videos, or custom HTML snippets into your application.

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.

  • Two Modes:
    • URL: Point to a specific web address (e.g., https://example.com).
    • Embed (HTML): Paste raw code snippets (e.g., a Twitter/X timeline widget).
  • Dynamic Content: You can bind the URL or HTML to a Data Source to display different content for each record.
  • Limitations: Not all websites allow themselves to be embedded. If a site refuses to connect, it is a security setting on their end, not Baserow’s.

Baserow form embed

Add an IFrame

  1. Open the Elements panel (click the + icon).
  2. Select IFrame.
  3. Drag and drop the element onto your canvas.

Configuration

Click the IFrame element to open the General properties tab.

1. Source Type

Choose how you want to provide the content.

  • URL: Use this to display a full webpage.
  • Embed: Use this to render raw HTML code.

2. Content (URL or HTML)

Depending on the Source Type selected above, configure the content:

If using URL

Enter the direct link to the resource.

  • Static: Type a fixed URL (e.g., https://www.wikipedia.org).
  • Dynamic: Click the Connect Data icon to bind this to a Data Source.
    • Use Case: In a “Company Directory” app, bind the IFrame to a {{ Company Website }} field. As users browse different companies, the IFrame updates to show that specific company’s site.

Security Warning: The URL must use HTTPS. Most modern browsers block insecure HTTP content from loading inside secure applications.

If using Embed

Paste the raw HTML code provided by the third-party tool.

  • Static: Paste a widget code (e.g., a Calendly booking widget).
  • Dynamic: Bind to a text field containing HTML code from your database.

Baserow get your embed code

3. Height

Define how tall the IFrame window should be.

  • Input: Enter a numeric value in pixels (e.g., 600).
  • Limit: Maximum height is 2000px.
  • Note: The width is automatically determined by the container (e.g., the Column or Page width).

Troubleshooting common issues

“Refused to connect” or Blank White Box

If you enter a valid URL (like google.com) but the IFrame is blank or shows an error icon, the target website is blocking the connection.

  • Cause: Many major sites (Google, Facebook, Stripe) send an X-Frame-Options: DENY header to prevent security risks like clickjacking.
  • Solution: You cannot force these sites to load. You must use a link intended for embedding (e.g., use youtube.com/embed/VIDEO_ID instead of youtube.com/watch?v=VIDEO_ID).

Content is cut off

If the external content requires scrolling, increase the Height property in the element settings. The IFrame does not automatically resize to fit the external content.

Frequently asked questions (FAQ)

Can I run JavaScript in the Embed mode?

For security reasons, script tags and complex JavaScript execution may be restricted within the IFrame to prevent Cross-Site Scripting (XSS) attacks. Simple HTML/CSS widgets work best.

How do I change the width?

The IFrame automatically fills the width of its parent container. To make it narrower, place the IFrame element inside a Column element and adjust the column layout.

Related content

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions; we’re ready to assist you.