HTML Embed

An HTML embed in Bubble is a special element that lets you write raw HTML, CSS, or JavaScript directly inside your Bubble page. It is Bubble's escape hatch for adding anything the native editor cannot build on its own.

When you need to embed a third-party widget, add a custom script, or create an element with styling that Bubble's visual editor does not support, the HTML element is how you do it.

Key Takeaways

• Custom code in Bubble: The HTML element lets you paste raw HTML, CSS, and JavaScript directly into your Bubble page layout.
• Third-party embeds: It is commonly used to embed scripts from services like Calendly, Intercom, YouTube, or custom map widgets.
• Falls outside Bubble's design system: Styles inside the HTML element are not controlled by Bubble's visual editor.
• Runs client-side: Code inside an HTML embed runs in the user's browser, not on Bubble's server.

What is HTML Embed in Bubble?

An HTML embed in Bubble is a page element that renders whatever raw HTML, CSS, or JavaScript you place inside it. It appears as a standard element in your Bubble editor and can be positioned on any page just like a text or image element.

The HTML element is available in Bubble's element palette. You drag it onto a page, open its content field, and write or paste your code.

• Accepts any valid HTML: You can write standard HTML tags, inline CSS styles, and JavaScript script tags directly inside the element.
• Positioned like any element: The HTML element follows Bubble's normal layout rules, so it fits naturally within groups and responsive columns.
• Not connected to Bubble's data: Content inside the HTML element is static unless you pass values into it using Bubble's expression editor in the content field.

For most Bubble builders, the HTML element is the tool for embedding third-party scripts and widgets that only work through custom HTML. It solves a real gap in what the visual editor covers.

How HTML Embed Works in Bubble

In Bubble, you add an HTML element from the element palette to your page. You open the element's property editor and enter your HTML content in the content field. Bubble renders that content inside an iframe or inline in the page depending on the code type.

Some types of HTML content behave differently from others when embedded in Bubble.

• Inline HTML and CSS: Standard HTML structure and CSS styles render as expected inside the page layout without isolation issues.
• JavaScript execution: Script tags inside the HTML element run after the page loads, though some third-party scripts require specific placement to work correctly.
• Iframe-based embeds: Many third-party widgets use iframe tags, which Bubble renders normally inside the HTML element's space on the page.

Third-party embed scripts from tools like Calendly's embed documentation typically include simple HTML snippets designed to be pasted into pages exactly as the HTML element allows.

Why HTML Embed Matters for No-Code Apps

The HTML embed element is what makes Bubble extensible beyond its native capabilities. Without it, any feature not covered by Bubble's elements or plugins would require a completely separate tool. With it, you can embed maps, video players, chat widgets, analytics scripts, and many other custom components directly inside your Bubble app.

Many real-world app features are delivered by third-party scripts that provide their own HTML embed code. The HTML element makes those compatible with Bubble.

• Chat and support widgets: Tools like Intercom, Crisp, and Zendesk deliver their widget via a JavaScript snippet that you paste into the HTML element.
• Custom video players: Embedded video players with specific branding or controls can be added via HTML embed when Bubble's video element is not sufficient.
• Analytics and tracking scripts: Pixel scripts and custom tracking tags from ad platforms are typically added through the HTML element in Bubble.

At LOW/CODE Agency, we use the HTML element carefully in Bubble projects. It adds power but also adds maintenance risk if the embedded code changes or breaks.

Common Mistakes When Using HTML Embeds in Bubble

The most common mistake is embedding a script in the HTML element that conflicts with Bubble's own JavaScript, causing unexpected behavior on the page. Always test third-party scripts carefully after adding them to confirm they do not interfere with your Bubble workflows.

HTML embeds are powerful but sit outside Bubble's quality controls, which means problems with them require manual debugging.

• Script conflicts: Some JavaScript snippets modify global DOM properties that Bubble also uses, causing unpredictable behavior.
• Responsive layout issues: Code pasted inside the HTML element does not automatically adapt to Bubble's responsive breakpoints unless the CSS inside it is written responsively.
• No Bubble data access: Content inside the HTML element cannot directly read Bubble's database or user data without a specific workaround using JavaScript.

Testing HTML embeds across different screen sizes and browsers is important because they do not benefit from Bubble's built-in responsive engine.

Conclusion

The HTML embed element in Bubble is a practical escape hatch that lets you go beyond the native editor when needed. It is most useful for third-party widget scripts, custom styling, and features that no Bubble plugin covers. Used carefully, it extends what your Bubble app can do without requiring a full custom development approach.

At LOW/CODE Agency, we've helped 450+ clients build and scale apps on Bubble and other no-code platforms. Our clients include global brands like Medtronic, American Express, Coca-Cola, Zapier, and Sotheby's.

Frequently Asked Questions

Where do I find the HTML embed element in Bubble?

Open the element palette in the Bubble editor and search for "HTML." Drag it onto your page to add it to your layout.

Can I use JavaScript inside a Bubble HTML embed?

Yes. You can write script tags with JavaScript inside the HTML element. The code runs in the user's browser after the page loads.

Can the HTML embed access Bubble's database?

Not directly. You can pass values from Bubble into the HTML element's content field using the expression editor, then use those values in your script.

Will a third-party chat widget work in Bubble's HTML embed?

Most chat widgets work when you paste their JavaScript snippet into the HTML element. Test after embedding to confirm it does not conflict with Bubble.

Can I add CSS styles inside Bubble's HTML embed?

Yes. You can include style tags with CSS directly inside the HTML element content field to style the embedded content.

Does HTML embed content respond to Bubble's responsive layout settings?

No. Content inside the HTML element does not inherit Bubble's responsive settings. Write responsive CSS inside the element if needed.