How to add a waitlist to Bubble

Bubble gives you three ways in. Pick by how much of the form you want to own.

Add the form with an HTML element#

1. In LaunchList, open Embed & API → Your website, choose Bubble under What is your site built with?, pick your form if you have more than one, and copy the Inline snippet it shows.
2. In the Bubble editor, drag an HTML element onto the page where the form should appear.
3. Paste the snippet into the element.

<!-- frm_8Kd2Qm4Rp9 is an example ID; use your own from Embed & API → Your website -->
<div data-launchlist-form="frm_8Kd2Qm4Rp9"></div>
<script src="https://embed.getlaunchlist.com/v1/embed.js" async></script>

4. Leave Display as an iFrame unchecked, and check Stretch to fit content so the element grows with the form and pushes what sits below it down.
5. Click Preview and submit a test signup. It appears in Audience in LaunchList.

The form renders inside a shadow root, so your Bubble styles cannot break it and its styles cannot leak into your app. Change the form's fields in LaunchList later and the live form updates itself, with nothing to re-paste.

Why not "Display as an iFrame"#

That option runs the HTML as if it were an independent web page. Our form then reads the address of that frame rather than your app's page, so the ?ref= on a referral link never reaches it and the referral does not credit. Without the option the form sits in your page and picks the code up itself.

Forms on several pages, or inside groups that appear later#

Load the script once for the whole app instead of in every HTML element. Go to Settings → SEO / metatags and paste it into Script/meta tags in header, which Bubble adds to the head of every page:

<script src="https://embed.getlaunchlist.com/v1/embed.js" async></script>

Every HTML element after that only needs the target:

<div data-launchlist-form="frm_8Kd2Qm4Rp9"></div>

The script watches the page, so a form inside a group or popup that Bubble shows later, or on a page reached without a reload, mounts the moment it appears.

Use your own Bubble form with the API#

Keep your own inputs and button, and send each signup to LaunchList from a workflow. It runs the same pipeline as our form: deduplication, referral credit, trust scoring, the verification email, webhooks and automations.

1. Create a key#

In LaunchList, open Embed & API → Developers → API keys, press New API key, choose Full access, pin it to the project this waitlist belongs to, and press Create key. Copy the key now: it is shown once. Copy the project's prj_ handle too. Details: authentication.

2. Add LaunchList to the API Connector#

1. In Bubble, install the API Connector plugin if it is not already in your app, and add a new API.
2. Name it LaunchList and set Authentication to Private key in header.
3. Set Key name to Authorization and Private key to Bearer followed by a space and your key (Bubble manual: authentication).
4. Add a call named Create contact, set Use as to Action, the method to POST and the URL to:

https://api.getlaunchlist.com/v1/contacts

5. Add a header Content-Type with the value application/json, and set the body to:

{
    "project": "prj_7Qk2mN4pR8",
    "email": "<email>",
    "referred_by": "<ref>"
}

Replace prj_7Qk2mN4pR8 with your own handle. Bubble turns <email> and <ref> into parameters you fill from the workflow. Leave Client-safe unchecked on both.

6. Click Initialize call. Bubble makes a real request, so give it a test address you then delete from Audience, and leave <ref> empty.

API Connector calls run through Bubble's server and a private header stays there (Bubble manual: API Connector security), so the key never reaches the browser.

3. Call it from a workflow#

The safest place for the call is a backend workflow, which runs on Bubble's server:

1. On the Backend workflows page (in the application menu above the palette), create an API workflow named join_waitlist with two text parameters, email and ref.
2. Add the action Plugins → LaunchList - Create contact, with email and ref from the workflow's parameters.
3. On your page, in the workflow for your button's click, add Schedule API workflow, choose join_waitlist, set Scheduled date to Current date/time, and pass your input's value as email and Get data from page URL (parameter name ref) as ref (Bubble manual: backend workflow actions).

Passing ref matters: a form you build does not read a referral link's ?ref= by itself, so without it referrals never credit. The full request and its responses are in create a contact.

Link to your hosted page#

Every LaunchList project has a hosted launch page at your-slug.launchlist.page. Add a Link element, or a Button whose workflow opens an external website, pointing at that address. Nothing to install, and it works whatever your Bubble plan. See the launch page.

If something is not working#

Using the classic LaunchList dashboard#

A waitlist made in the classic LaunchList dashboard has its own snippet: a <div class="launchlist-widget"> with widget.js in an HTML element. That snippet keeps working for now and sends signups to the classic dashboard's waitlist, not to a project here. A classic form key does not work with the snippet on this page.

To bring that waitlist here, import it into a project, then replace the classic snippet on your Bubble site with the one from Embed & API → Your website. Your signups are copied, and the classic waitlist is not changed.

---

Next: every way to integrate · the REST API