How to Embed a Widget on Bubble
Bubble's HTML element gives you full flexibility for embedding Embeddy widgets with both iframe and inline rendering options. You can drop any HTML into a Bubble page, toggle sandboxed iframe isolation, auto-resize to content, and even bind Bubble's dynamic data to personalize widgets for each user.
1. Prerequisites
- 1An active Embeddy account with at least one published widget.
- 2A Bubble app with a page ready for editing in the Bubble visual editor.
- 3Your Embeddy widget's iframe embed code, copied from the Embed tab in your dashboard.
Your iframe embed code looks like this
<iframe src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID" width="100%" height="500" frameborder="0"></iframe>2. Adding the HTML Element
Bubble's HTML element lets you insert raw HTML directly into your page layout. It renders wherever you place it in the editor and supports both iframe-isolated and inline DOM rendering.
- 1
Open your Bubble app in the editor.
Navigate to the page where you want the Embeddy widget to appear.
- 2
Find the HTML element in the design palette.
In the left sidebar, look under Visual elements or search for HTML. Drag the HTML element onto your page canvas and position it where you want the widget.
- 3
Open the HTML element's property editor.
Double-click the HTML element, or click on it and select Edit from the context menu. The property editor panel will open.
- 4
Paste your Embeddy iframe code into the HTML field.
In the HTML text area, paste your embed code:
<iframe src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID" width="100%" height="500" frameborder="0"> </iframe>
- 5
Enable "Display as an iFrame" toggle.
In the property editor, find the Display as an iFrame toggle and enable it. This wraps your HTML in a sandboxed iframe for proper isolation from Bubble's DOM. See Section 3 for when to use each mode.
- 6
Save and preview.
Close the editor and click Preview at the top of the Bubble editor to test your embed in run-mode. Note that scripts and iframes only execute in preview or live mode — not in the Bubble editor itself.
3. iFrame Mode vs Inline Mode
Bubble's HTML element offers two rendering options controlled by the Display as an iFrame toggle and the Stretch to fit content toggle. Understanding the difference helps you choose the right setup for your widget.
| iFrame Mode (ON) | Inline Mode (OFF) | |
|---|---|---|
| Rendering | Sandboxed inside its own iframe | Rendered directly into Bubble's DOM |
| CSS isolation | Complete — Bubble styles don't leak in | Bubble's global CSS may affect your content |
| Script execution | Isolated from Bubble's JS context | Shares Bubble's JS context |
| Auto-height | Limited — requires fixed height or postMessage | Use "Stretch to fit content" to auto-resize |
| Best for | Third-party widgets that require isolation | Simple HTML snippets integrated with your page |
Recommended for Embeddy widgets
Enable Display as an iFrame when embedding Embeddy widgets. Since your Embeddy widget is already served as an iframe from embeddy.ai's servers, iFrame mode in Bubble provides the proper sandboxed environment and prevents any CSS or JS conflicts with your Bubble app.
About "Stretch to fit content"
When using inline mode (iFrame OFF), enable Stretch to fit content to let the HTML element auto-resize vertically as its content changes. Without this, elements placed below the HTML element in your Bubble page will be pushed down automatically when content overflows.
4. Dynamic Data Binding
One of Bubble's most powerful features is the ability to inject dynamic data directly into the HTML element using the Insert dynamic data option. This lets you personalize Embeddy widgets for each user by passing user-specific widget_id or widget_props_id values from your Bubble database.
Use case example
Store a widget_props_id field on each Bubble User record in your database. Use dynamic data to insert the current user's ID into the Embeddy iframe URL — so each user sees their own personalized widget instance.
How to use dynamic data in the HTML element
- 1
Open the HTML element's property editor.
Double-click the HTML element on your Bubble page.
- 2
Begin typing your iframe HTML.
Type the opening part of the iframe src attribute up to the point where you want to insert a dynamic value:
<iframe src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id= - 3
Click "Insert dynamic data".
Click the Insert dynamic data button below the HTML field. Select the data source — for example, Current User → widget_props_id — to insert the value at the cursor position.
- 4
Complete the HTML tag.
Continue typing to close the iframe tag. The final result in the editor will appear as a mix of HTML text and dynamic expression tokens.
Tip: Scripts only execute in run-mode
This is normal Bubble behavior. Any <script> tags inside the HTML element will not execute in the Bubble editor. They only run in Preview or Live mode. If your widget appears blank in the editor but works in Preview, this is expected.
5. Troubleshooting
The widget does not appear in the Bubble editor
This is expected. Scripts and external iframes do not render in Bubble's visual editor. Click Preview at the top of the Bubble editor to see the widget in run-mode. Only use the editor to position and size the HTML element.
Widget is the wrong size or content is cut off
In the Bubble editor, resize the HTML element's bounding box to match the dimensions your widget needs. Set height in the iframe tag to match the element's height, or use height="100%" with a fixed-height HTML element container.
Elements below my HTML element are shifting unexpectedly
If you are using inline mode (iFrame OFF) without the Stretch to fit content toggle, Bubble's layout engine may reflow. Enable Stretch to fit content in the HTML element's settings to let it auto-resize. Alternatively, give the HTML element a fixed height so layout is predictable.
Dynamic data is not showing correctly in the iframe URL
Make sure the dynamic expression evaluates to a non-empty string. In the Bubble debugger (Preview mode → Debug mode), inspect the HTML element's rendered output. Also verify that the database field is populated for the current user and that you are referencing the correct field path in the dynamic expression.
6. FAQ
Can I show different Embeddy widgets to different users on the same Bubble page?
Yes. Use the dynamic data binding feature to inject a per-user widget_props_id from your Bubble database into the iframe URL. You can also use Bubble's conditional logic on the HTML element to show or hide it based on user roles or data fields.
Will the Embeddy widget break Bubble's responsive layout?
Not if configured correctly. Set the HTML element to a percentage width (e.g., 100%) and a fixed height. In the iframe tag, use width="100%". Bubble's responsive engine will handle the rest. Test at different screen sizes using Bubble's responsive preview tool.
Can I trigger Bubble workflows from inside the Embeddy widget?
When using iFrame mode, the widget is sandboxed and cannot directly trigger Bubble workflows. To communicate between the iframe and Bubble, use the browser's postMessage API from within the iframe and listen for it in Bubble using a JavaScript plugin or the Toolbox plugin's "Run Javascript" action.
Ready to embed on Bubble?
Build and publish your widget in minutes with embeddy.ai — no coding required.