Article

How to Add a Waitlist to Bubble (Hosted-Page Embed)

Add a waitlist to Bubble with an HTML element and GetWaitly's hosted page iframe — the reliable method, since Bubble isolates HTML elements.

AAymane E.·October 4, 2026·6 min read

A no-code app builder on a laptop, representing embedding a waitlist in Bubble

Bubble is a no-code app builder, and its native signup is tied to Bubble workflows — not a waitlist with referral links and broadcast emails. GetWaitly's widget can still collect waitlist signups on a Bubble page, but Bubble has a quirk worth knowing before you paste code.

Bubble renders HTML elements in an isolated frame, which affects how the inline widget behaves. Here are the reliable approaches, in order.

The short answer

On Bubble, the dependable method is to embed GetWaitly's hosted page in an iframe using a Bubble HTML element. Because Bubble isolates HTML elements, the hosted-page iframe is more predictable than the raw inline widget. You get a working waitlist form on your Bubble page in about 5 minutes.

What you need

A GetWaitly account with a waitlist created (free plan covers 100 subscribers).
Your waitlist's hosted page published at getwaitly.com/w/your-id.
A Bubble app and access to its editor. The HTML element is available in Bubble's visual elements.

Why the widget behaves differently on Bubble

Bubble's HTML element lets you place HTML, CSS, and JavaScript — but Bubble runs it in an isolated frame. That isolation means the gw-widget container and the widget script do not hook into your page's main document the way they do on Carrd, Webflow, or plain HTML. The popup trigger is especially unreliable for the same reason.

Embedding the fully hosted page inside a frame sidesteps the issue: it is a complete page designed to fill a frame.

Step 1 — Publish your GetWaitly hosted page

In your GetWaitly dashboard, open the waitlist and publish the hosted page. Set your headline, accent color, and font. Your page lives at:

https://getwaitly.com/w/YOUR_WAITLIST_ID

Copy that URL.

Step 2 — Add an HTML element in Bubble

Open your Bubble app in the Design tab.
In the visual elements panel, find the HTML element and drag it onto the page where the waitlist should appear.
Resize it to at least 600px tall so the form has room.

Step 3 — Paste the iframe

In the HTML element's content, paste:

<iframe
  src="https://getwaitly.com/w/YOUR_WAITLIST_ID"
  width="100%"
  height="600"
  style="border:0;"
  title="Join the waitlist"
></iframe>

Use workflows or a refresh action if you need it to update with dynamic data — but for a static waitlist page, this is enough.

Step 4 — Preview and test

Bubble's design canvas does not run scripts or iframes, so click Preview (or open the live app). You should see the waitlist form. Submit a test email and confirm the subscriber appears in your GetWaitly dashboard. If you see an empty box, increase the HTML element's height and verify the hosted page URL.

Alternative: the inline widget in an HTML element

If you specifically want the inline GetWaitly widget rather than the hosted-page frame, add the widget snippet to a Bubble HTML element and give the element a fixed height:

<div class="gw-widget" data-waitlist-id="YOUR_WAITLIST_ID"></div>
<script src="https://getwaitly.com/widget.js" defer></script>

Because Bubble isolates the HTML element, include both lines in the same element — the script must load inside the same frame as the div. Set a fixed height (350px+) on the HTML element, since the frame does not auto-resize to its content. Test in Preview; if the form does not render or is clipped, fall back to the hosted-page iframe.

Alternative: site-wide script

Bubble also allows scripts site-wide via Settings → SEO / metatags → Script/meta tags in body. You can add:

<script src="https://getwaitly.com/widget.js" defer></script>

This is useful if you want the script loaded across the app, but placing the container div so the inline form renders still runs into the HTML-element isolation. For a popup trigger, the button also needs to live in the page document, so this is best paired with the hosted-page approach. Do not load the script twice.

Testing checklist

Test in Preview or the live app, never the design canvas — Bubble does not execute scripts there.
Give the HTML element enough height (600px for the iframe; 350px+ for the inline widget).
Confirm the data-waitlist-id (inline) or the hosted URL (iframe) is exact.
Submit a real test email and check your GetWaitly dashboard.

FAQ

Does GetWaitly work on Bubble?

Yes — most reliably by embedding the hosted page in an iframe via Bubble's HTML element. The raw inline widget can work but is subject to Bubble's HTML-element isolation.

Why does the widget not render on Bubble?

Bubble runs HTML elements in isolated frames and does not execute scripts in the design canvas. Include the script inside the same HTML element as the div, set a fixed height, and test in Preview or the live app.

Can I use the popup widget on Bubble?

Not reliably. The popup trigger needs to live in the page's main document, which Bubble's HTML element does not expose. Use the hosted-page iframe or link to the hosted page from a Bubble button.

Do I need to know Bubble workflows?

No. The iframe approach is static HTML — no workflows or plugins required. If you want to react to a signup inside Bubble (for example, hide the form after joining), that would need Bubble logic, but the waitlist itself does not.

Can I match my Bubble app's design?

The hosted page uses your GetWaitly accent color and font, so it looks consistent with your brand. It will not inherit your Bubble styles. Set the branding in GetWaitly settings.