Embedding the SDK

2-minute quickstart

PreLaunch Waitlist works with any HTML form on any platform. You need two things: a form with an email input, and your project ID from the dashboard.

Step 1 — Get your project ID

Sign in to your dashboard, open your project, and copy the Project ID shown at the top of the page.

Step 2 — Add the snippet

Paste this into your HTML, replacing YOUR_PROJECT_ID with the ID you just copied. Put it just before the closing </body> tag.

<!-- 1. Load the SDK -->
<script src="https://prelaunchwaitlist.com/v1/plw.js"></script>

<!-- 2. Initialise with your project ID -->
<script>
  PLW.init({
    projectId: 'YOUR_PROJECT_ID',
    formSelector:       '#waitlist-form',
    emailInputSelector: '#email',
  });
</script>

Step 3 — Make sure your form matches

The selectors in PLW.init() must match the IDs (or classes) of your actual form elements. Here's the minimal markup:

<form id="waitlist-form">
  <input type="email" id="email" placeholder="[email protected]" />
  <button type="submit">Join the waitlist</button>
</form>

That's it. The SDK intercepts the form submission, sends the email to Pre Launch Waitlist, and calls your onSuccess or onError callback when it's done.

How it works

The SDK is a small, dependency-free script (~5 KB gzipped) that attaches to your existing form. When a visitor submits the form:

1. The SDK intercepts the submit event and prevents the default page reload.
2. It reads the email from emailInputSelector and any extra fields you have configured.
3. It posts to the PreLaunch Waitlist API, which stores the subscriber, deduplicates, and fires any webhooks you've set up.
4. Your onSuccess callback is called — update the UI however you like.

Everything runs in the visitor's browser — there is no server-side code to write or maintain on your side.

PLW.init() options

All options accepted by PLW.init():

Callbacks

Use onSuccess and onError to give visitors instant feedback without a page reload.

PLW.init({
  projectId: 'YOUR_PROJECT_ID',
  formSelector:       '#waitlist-form',
  emailInputSelector: '#email',

  onSuccess() {
    document.getElementById('waitlist-form').innerHTML =
      '<p>You\'re on the list! We\'ll be in touch. 🎉</p>';
  },

  onError(err) {
    document.getElementById('error-msg').textContent =
      'Something went wrong. Please try again.';
    console.error(err);
  },
});

The onSuccess handler is the right place to fire any analytics (e.g. gtag('event', 'sign_up')) or show a celebration animation.

Platform guides

The SDK works the same way on every platform. The only difference is where to paste the snippet.

  ...
  <form id="waitlist-form">
    <input type="email" id="email" />
    <button>Join waitlist</button>
  </form>

  <script src="https://prelaunchwaitlist.com/v1/plw.js"></script>
  <script>
    PLW.init({ projectId: 'YOUR_PROJECT_ID',
               formSelector: '#waitlist-form', emailInputSelector: '#email' });
  </script>
</body>

// app/components/WaitlistForm.tsx
'use client';
import Script from 'next/script';
import { useEffect } from 'react';

export default function WaitlistForm() {
  useEffect(() => {
    // PLW is added to window by the script below
    if (typeof window !== 'undefined' && (window as any).PLW) {
      (window as any).PLW.init({
        projectId: 'YOUR_PROJECT_ID',
        formSelector:       '#waitlist-form',
        emailInputSelector: '#email',
        onSuccess() { /* show confirmation */ },
      });
    }
  }, []);

  return (
    <>
      <Script
        src="https://prelaunchwaitlist.com/v1/plw.js"
        strategy="afterInteractive"
        onLoad={() => {
          (window as any).PLW?.init({ /* same options */ });
        }}
      />
      <form id="waitlist-form">
        <input type="email" id="email" placeholder="[email protected]" />
        <button type="submit">Join the waitlist</button>
      </form>
    </>
  );
}

Single-page apps

In SPAs the DOM can update after the SDK initialises. If your waitlist form is rendered dynamically (e.g. inside a modal or after a route change) call PLW.init() again after the form is in the DOM — the SDK is safe to call multiple times and will rebind cleanly.

// Call whenever the waitlist form is mounted
function initWaitlist() {
  if (!document.querySelector('#waitlist-form')) return;
  PLW.init({
    projectId: 'YOUR_PROJECT_ID',
    formSelector:       '#waitlist-form',
    emailInputSelector: '#email',
    onSuccess() { /* … */ },
  });
}

// React example
useEffect(() => { initWaitlist(); }, []);

// Vue example
onMounted(() => { initWaitlist(); });

Custom form fields

You can capture extra form fields alongside the email. Any named <input>, <select>, or <textarea> inside your form is automatically included in the formData payload and stored with the subscriber.

<form id="waitlist-form">
  <input type="email"  id="email"    name="email"    />
  <input type="text"   name="fullName"             />
  <select                   name="role">
    <option value="founder">Founder</option>
    <option value="investor">Investor</option>
  </select>
  <button type="submit">Join</button>
</form>

Limits: up to 30 extra fields; keys ≤ 100 chars; values ≤ 1 000 chars. Fields are visible in the dashboard and included in CSV exports.

Metadata & UTM

Pass static metadata at init time to tag every subscriber from this embed with the same attributes — useful for multi-tenant apps or A/B tests:

PLW.init({
  projectId: 'YOUR_PROJECT_ID',
  formSelector:       '#waitlist-form',
  emailInputSelector: '#email',
  metadata: {
    variant: 'hero-a',
    plan:    'pro',
  },
});

UTM parameters (utm_source, utm_medium, utm_campaign, utm_term, utm_content) are captured automatically from the page URL — no extra config needed.