🛠Internal Tools Platform

How to Embed a Widget in Retool

Retool is the leading platform for building internal tools. Its IFrame component lets you embed any URL directly into your Retool app, and its Custom Component gives you full HTML control. Paste your Embeddy widget URL to add interactive widgets to your internal dashboards.

Intermediate~4 min readUpdated 2026

On this page

Prerequisites

Before embedding, make sure you have the following ready:

  • An Embeddy widget: Create one for free at embeddy.ai/dashboard. Your widget must be published so it is publicly accessible.
  • Your Embed Link: Copy the Embed Link URL from the Embeddy dashboard: https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID.
  • A Retool account: With edit access to the app where you want to add the widget.

IFrame vs Custom Component: The IFrame component is the simplest option — just paste a URL. The Custom Component gives you full HTML/JS/CSS control for advanced integrations.

Method 1: IFrame Component

Recommended — simplest approach

  1. 1

    Open your Retool app in the editor

    Navigate to the app where you want to add the widget.

  2. 2

    Drag an IFrame component onto the canvas

    In the right-side component panel, search for "IFrame" and drag it onto your canvas. Resize it to your desired dimensions.

  3. 3

    Set the URL property

    In the IFrame component's properties panel, set the URL field to your Embeddy Embed Link:

    https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID
  4. 4

    Preview the app

    Click the Preview button (or press the play icon) to see the widget rendered live in your Retool app.

Tip: You can make the URL dynamic by referencing a Retool query or variable. See the "Dynamic URL" section below for details.

Method 2: Custom Component

Advanced — full HTML/JS/CSS control

For advanced use cases, Retool's Custom Component lets you write raw HTML, JavaScript, and CSS. This gives you full control over how the widget is embedded.

  1. 1

    Drag a Custom Component onto the canvas

    Search for "Custom Component" in the component panel and add it to your app.

  2. 2

    Add your iframe HTML

    In the Custom Component's IFrame Code section, paste the following:

    <iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="100%"
  frameborder="0"
  allow="clipboard-write"
  style="border: none; border-radius: 8px;"
></iframe>
  3. 3

    Resize and configure

    Resize the Custom Component on the canvas. The iframe will fill the component's area.

Note: Custom Components run in a sandboxed iframe. The Embeddy widget will be nested inside that sandbox. For most use cases, the IFrame component (Method 1) is simpler and more performant.

Dynamic URL from Queries

One of Retool's strengths is binding component properties to query results. You can dynamically set the IFrame URL based on data from your database or API.

// IFrame URL property — using a Retool binding

{{ "https://embeddy.ai/webhost/" + table1.selectedRow.data.widget_id + "?widget_props_id=" + table1.selectedRow.data.props_id }}

This is useful when you have a table of widgets or resources and want the IFrame to update based on the selected row. The IFrame component will automatically re-render when the binding value changes.

Limitations

IFrame sandboxing

Retool's IFrame component runs in a sandboxed environment. Some browser APIs (like accessing parent window or certain storage APIs) may be restricted. Standard Embeddy widgets work fine within these restrictions.

No direct postMessage communication (IFrame component)

The IFrame component does not support bidirectional postMessage communication with the parent Retool app. If you need message passing, use the Custom Component instead, which supports Retool's model API for data exchange.

Widget must be publicly accessible

Your widget must be published and set to public. Retool renders iframes client-side, so the URL must be accessible without Embeddy authentication.

Troubleshooting

IFrame shows blank or loading indefinitely

Common causes:

  • Widget not published. Publish it in the Embeddy dashboard.
  • URL binding error. Check the IFrame properties panel for any binding errors (shown in red).
  • Network/CSP issue. Ensure your Retool instance allows loading external iframes (relevant for self-hosted Retool).

Widget not updating when query changes

Ensure the URL property uses a Retool binding (double curly braces) that references the correct query or component value. The IFrame should re-render automatically when the binding value changes.

Custom Component not rendering

Check the browser console for JavaScript errors. Ensure your HTML is valid and the iframe src URL is correct. Try a simpler HTML snippet first to verify the Custom Component works.

Still stuck? Reach out on Discord or contact support.

FAQ

Does this work with Retool's free plan?

Yes. The IFrame component and Custom Component are available on all Retool plans including the free tier.

Can I use dynamic URLs based on database queries?

Yes. Retool bindings let you reference query results, component values, and variables in the IFrame URL property. See the "Dynamic URL" section above for an example.

Will the widget update automatically?

Yes. The IFrame loads from the live URL. Changes published in the Embeddy dashboard are reflected immediately in your Retool app.

Ready to embed your widget?

Head to your Embeddy dashboard to create or find your widget, copy the Embed Link, and drop it into a Retool IFrame component.

Open DashboardBack to Embedding Guide
SoftrGlide