How do I add a waitlist to a Bolt app?

Add a waitlist signup form to the home page, using Nordva Launch. Don't create a database table or a server function for it.

1. Where the form should appear (the hero of the home page), render this element, with my key from the end of this message in place of MY_KEY:
   <nordva-waitlist data-key="MY_KEY" data-button="Join the waitlist"></nordva-waitlist>
2. In the same component, load https://cdn.nordva.dev/v1/waitlist.js once, after the element is on the page (for example, append a script tag in an effect). Don't add this script to the page head.
3. If TypeScript complains about the nordva-waitlist element, declare it as an intrinsic element. Don't replace it with a form of your own.
4. My key starts with nv_pub_live_. It is a publishable key, made for browser code: it can add signups but can't read them. Put it in the code as it is, not in Secrets. Never put a key that starts with nv_live_sk_ in browser code.
5. Don't change anything else. Tell me which files you changed.

My publishable key:

Why not build the waitlist in Bolt itself?

Ask Bolt for a waitlist and it will usually offer a database table and a form. That stores emails, but it’s only the start: the list also needs a receipt email, an unsubscribe link, protection against the same person joining twice, the source of each signup, and one email on launch day that leaves out people who unsubscribed. Each of those is another prompt, and another thing that can break when Bolt rewrites the page.

A hosted waitlist keeps all of that outside your app. The prompt above adds one element and one script, and nothing else in your project changes.

Step by step

1. Get your publishable key. In Nordva Launch, open Developer → API keys. Every new account gets one publishable key, shown once when the account is made. If you didn’t keep it, revoke it and click New publishable key, then copy it straight away. On the Free plan you can have one publishable key per project at a time.

2. Paste the prompt. Copy the prompt above into Bolt’s chat and paste your key at the end.

3. Try it in the preview. Join with your own email. The signup appears under Waitlist in Launch and a receipt lands in your inbox.

4. Publish. Bolt’s live site doesn’t change on its own. Open the Publish menu and click Update; the first time, click Publish twice.

Why the key goes in the code, not in Secrets

Bolt’s Secrets (under the database icon) are for keys only server functions may read, such as a payment provider’s secret key. Browser code can’t read them, which is the point. A publishable key is made to be public, the way Stripe’s publishable key is: anyone who opens your page can see it, and all it allows is adding a signup, a feedback message or a changelog subscriber. It can’t read, export or delete your list.

Your secret key, starting with nv_live_sk_, is different. It can read everything, so it only ever goes in Secrets, and a waitlist doesn’t need it.

What each signup records

The referring site’s hostname, the UTM tags on the link (utm_source, utm_medium, utm_campaign) and the page the person landed on. The form sets no cookie and stores nothing in the browser. Post a tagged link, such as ?utm_source=indiehackers&utm_campaign=launch, and each signup on Launch’s Waitlist page shows the post it came from.

With Launch’s analytics script on the same site, a signup carries the visitor’s first visit instead of the current page, which matters when someone reads your post, leaves, and signs up days later.

After that

Everyone who joins gets a receipt with an unsubscribe link, on every plan. Indie adds double opt-in (people confirm their email), invites in batches, CSV export, and the launch-day announcement with a report of how many of the people you told went on to pay.

Free holds 100 signups per project and Indie 2,500. Free has no time limit and needs no card.