🧩No-Code Platform

How to Embed a Widget in Softr

Softr lets you build web apps on top of Airtable and Google Sheets — no code required. Its Custom Code block accepts HTML, including iframes, making it easy to embed your Embeddy widget on any page of your Softr app.

Beginner~3 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 iframe code or Embed Link: Copy the iframe snippet for Method 1 (recommended), or the Embed Link URL for Method 2.
  • A Softr app: Free or paid plan. The Custom Code block is available on paid plans; the Embed block may be available on all plans.

Where is my iframe code? In the Embeddy dashboard, select your widget, click the Share / Embed panel. Copy the iframe code (the full <iframe> snippet).

Method 1: Custom Code Block (iframe)

Recommended — full control over embed

Softr's Custom Code block lets you paste raw HTML directly into your app. This is the most reliable way to embed an Embeddy widget.

  1. 1

    Open your Softr app in the editor

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

  2. 2

    Add a Custom Code block

    Click Add Block, search for "Custom Code", and add it to your page. Position it where you want the widget to appear.

  3. 3

    Paste your iframe code

    Click on the Custom Code block to open its settings. Paste your Embeddy iframe code in the HTML field:

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

    Save and preview

    Click Save, then use Preview to verify the widget renders correctly on your page.

Tip: Adjust the height value in the iframe code to fit your widget content. A value of 600 works well for most widgets.

Method 2: Embed Block (URL)

Alternative — if Custom Code is not available on your plan

Some Softr plans include an Embed or iFrame block that accepts a URL directly.

  1. 1

    Add an Embed or iFrame block

    Click Add Block, search for "Embed" or "iFrame", and add it to your page.

  2. 2

    Paste your Embed Link

    In the block settings, paste the widget URL:

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

    Set dimensions and save

    Configure the block height (e.g., 600px) and save your changes.

Note: The Custom Code block (Method 1) is generally more flexible and widely available across Softr plans. If your plan supports it, prefer Method 1.

Styling & Layout

Customize how the widget looks within your Softr app.

Full-Width Widget

Set width="100%" in the iframe for a full-width widget:

<iframe src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID" width="100%" height="600" frameborder="0" style="border:none;"></iframe>

Centered with Max Width

Wrap the iframe in a centered container:

<div style="max-width:800px;margin:0 auto;">
  <iframe src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID" width="100%" height="600" frameborder="0" style="border:none;border-radius:8px;"></iframe>
</div>

Limitations

Custom Code block may require a paid plan

Softr's Custom Code block is typically available on paid plans (Basic and above). Check your plan details for availability.

Embed not visible in editor preview

Custom Code blocks may render as a placeholder in the Softr editor. Use the Preview or Publish feature to see the actual widget.

Widget must be publicly accessible

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

Troubleshooting

Widget not showing in the editor

This is expected — Custom Code blocks often show a placeholder in the Softr editor. Click Preview to see the actual rendered widget. It will display correctly on the published site.

Blank iframe on the published page

Common causes:

  • Widget not published. Publish it in the Embeddy dashboard.
  • Malformed iframe code. Make sure the iframe tag is properly closed and the src URL is correct.
  • Height set to 0. Ensure the iframe has a positive height value (e.g., 600).

Custom Code block not available

If you are on Softr's free plan, the Custom Code block may not be available. Try using the Embed or iFrame block (Method 2) instead, or upgrade your plan to access Custom Code.

Still stuck? Reach out on Discord or contact support.

FAQ

Does this work with Softr's free plan?

The Custom Code block typically requires a paid plan. Check if the Embed block is available on your plan as an alternative. Softr's plan features change over time, so check the current feature comparison on softr.io.

Can I pass dynamic data from Airtable to the widget?

Not directly through the iframe. However, you can use Softr's dynamic URL parameters to pass Airtable field values as query parameters in the iframe src URL, if your Embeddy widget supports custom query parameters.

Will the widget update automatically?

Yes. The iframe loads from the live URL, so changes published in the Embeddy dashboard are immediately reflected on your Softr app.

Ready to embed your widget?

Head to your Embeddy dashboard to create or find your widget, copy the iframe code, and add it to your Softr app with a Custom Code block.

Open DashboardBack to Embedding Guide
GeniallyRetool