Skip to main content

Getting started with the IFrame component

Learn how to embed a web page as an iframe into your Retool app.

The IFrame component provides a content area in which you can embed a web page via URL.

Demo

Use an HTML component to include custom HTML and CSS instead of an embedded web page. You can also use a Custom Component to include custom React, HTML, and JavaScript.

Features​

Key features of the IFrame component include:

  • Permissions to allow or deny downloads.
  • Form submissions.
  • Microphone and camera access.
  • Customizeable style.

Specify content options​

The Content section of the Inspector contains settings that control the content of the IFrame component. Add the web page URL, and configure tooltips in the Add-ons section.

You can use JavaScript snippets to dynamically populate all or part of the URL. For example, you could use an IFrame component to display the Retool Self-hosted release documentation. If you had a Select component that enabled a customer to select "Stable" or "Edge", you could set the IFrame component URL to https://docs.retool.com/releases/{{ select1.selectedItem.value }}.

A dynamic IFrame URL

Set HTTP headers​

If you are embedding a web page that you host yourself, you might need to set HTTP headers in order for your content to appear properly.

Retool recommends applying the following settings:

Access-Control-Allow-Origin: https://<your-domain>.retool.com;
Content-Security-Policy: frame-ancestors https://<your-domain>.retool.com;

Configure user interaction​

The Interaction section of the Inspector contains settings that control user interaction. The IFrame component does not support event handlers, but it supports a variety of interaction options that you can turn on or off depending on your needs.

To dynamically set these values, toggle next to the checkbox and use JavaScript to set a truthy value.

Many sites require the Storage and cookies setting to be enabled. Toggling on this component enables the allow-same-origin flag on the IFrame component. If your deployment is self-hosted, you must also configure your environment variables appropriately.

If your web page requires authentication, Retool cannot handle this authentication process. You can allow authentication via URL (using a temporary password), or users must authenticate the web page inside the component.

Customize appearance​

You can customize the presentation of your component in the Spacing and Appearance sections of the Inspector. The settings available in the Appearance section depend on the type of component you use.

All components have a Hidden setting, which you can dynamically control with a truthy value that evaluates to true or false. You can also control the hidden property for a component using the .setHidden() method from event handlers and JavaScript queries.

You can also create custom style rules using the Styles setting. Each component has different styles that you can configure, but common ones include colors, fonts, and text styles. Use app-level or organization-level themes to set these styles across all components.

Show top bar displays the title of the IFrame component and UI controls that refresh the page or open it in full screen.

The Fullscreen and Top level navigation settings must also be enabled in order for the top bar UI controls to function.