DEV Community: Aymane

How to Add a Waitlist to Any Website (2 Lines of Code)

Aymane — Mon, 12 Oct 2026 13:20:48 +0000

Almost any website can host a GetWaitly waitlist, because the embed is just two lines of HTML: a script tag and a container div. If your site lets you add custom HTML anywhere, you can add a waitlist to it — no plugin, no framework, no SDK.

Here is the generic HTML embed, plus the popup and no-JavaScript variants and how to troubleshoot it.

The short answer

Paste <script src="https://getwaitly.com/widget.js" defer></script> once near the end of your page, and place <div class="gw-widget" data-waitlist-id="YOUR_WAITLIST_ID"></div> where you want the form. The widget renders inline and matches your waitlist's branding. Total time: 2 minutes.

What you need

A GetWaitly account with a waitlist created (free plan covers 100 subscribers).
Your waitlist's public ID from the Widget/Embed section of the dashboard.
A website where you can add custom HTML — your own HTML, or any builder with an "Embed" or "Custom Code" feature.

The two lines

Script tag (loads the widget; place it once per page):

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

Container div (where the form appears):

<div class="gw-widget" data-waitlist-id="YOUR_WAITLIST_ID"></div>

Use the waitlist's public ID, not its URL slug. Both come from the Embed section of your dashboard.

Where to put them

Put the script just before the closing </body> tag, or anywhere on the page. The defer attribute makes it load after your content, so it does not block rendering.
Put the div exactly where you want the form. To control width and alignment, wrap it in a container:

<div style="max-width: 480px; margin: 0 auto;">
  <div class="gw-widget" data-waitlist-id="YOUR_WAITLIST_ID"></div>
</div>
<script src="https://getwaitly.com/widget.js" defer></script>

If you want the form on several pages, load the script once in your site's global footer or a shared template, and place only the div on each page.

Platform guides

The widget works the same everywhere, but each platform has its own place to paste it. Step-by-step guides:

Website builders

Ecommerce

No-code & app builders

Blog & publishing

Developers

React & Next.js

The popup variant

For a button that opens the form in a modal, use a trigger element instead of the div:

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

This is useful for a header CTA, a floating button, or a "Join" link anywhere on the page.

Full control: your own form

If you want to style the form yourself, write custom HTML and let GetWaitly handle submission with the DIY script (widget-diy.js):

<form class="gw-form" data-waitlist-id="YOUR_WAITLIST_ID">
  <input name="email" type="email" required placeholder="Your email" />
  <input name="name" type="text" placeholder="Full name (optional)" />
  <button type="submit">Join waitlist</button>
</form>
<script src="https://getwaitly.com/widget-diy.js" defer></script>

This submits without a page reload and shows an inline success message, while you keep full CSS control.

No JavaScript at all

If scripts are blocked or you simply do not want one, post a plain HTML form to your waitlist's join endpoint:

<form action="https://getwaitly.com/api/join/YOUR_WAITLIST_ID" method="post">
  <input type="email" name="email" required placeholder="Your email" />
  <button type="submit">Join the waitlist</button>
</form>

The browser posts the signup and redirects to your thank-you page. You lose the inline success animation, but the subscriber still lands in your dashboard.

Testing

Open the page, submit a test email, and confirm you see the success message and the subscriber appears in GetWaitly. Then check mobile — the widget is responsive out of the box.

Troubleshooting

Nothing renders. Check the browser console for a blocked script. Ad blockers, strict Content Security Policy (CSP), or a security plugin can block third-party scripts. If your site has a CSP, add https://getwaitly.com to script-src and connect-src.

The box is empty. Usually a wrong data-waitlist-id. It must be the public ID, not the slug.

It works locally but not in production (or vice versa). Confirm the script tag is on the published page, not just your template or a preview.

Two forms appear. You loaded the script twice (for example, in a global footer and again in the page). Load it once.

FAQ

What kind of website can use the GetWaitly embed?

Any site that lets you add a <script> tag and an HTML element. That includes hand-coded HTML, WordPress, Webflow, Squarespace, Shopify, Framer, Carrd, and most page builders. Platform-specific guides are linked below.

Do I need to know how to code?

No. Copy two lines and paste them. If you can paste into an "Embed" or "Custom HTML" box, you can add a waitlist.

Will the widget slow down my site?

No. The script is small and loaded with defer, so it does not block rendering.

Can I style the form to match my site?

The standard widget uses your GetWaitly accent color and font. For full styling control, use the DIY form (widget-diy.js) and style the inputs yourself, or the no-JavaScript form action.

Does it work if my site blocks external scripts?

Not the widget. Use the no-JavaScript form action above, which posts directly to your waitlist, or link to GetWaitly's hosted page at getwaitly.com/w/your-id.

Where do I find my waitlist ID?

In your GetWaitly dashboard, open the waitlist and go to the Widget/Embed section. Copy the public ID shown in the data-waitlist-id example.

Related guides

How to Add a Waitlist to WordPress — the Custom HTML block method
How to Add a Waitlist to Webflow — the Code Embed method
How to Add a Waitlist to React & Next.js — script + component
7 Best Waitlist Tools for Solo Founders in 2026 — the full comparison
Waitlist Creator: How to Create a Waitlist Page in Minutes — what a waitlist creator is and how to set one up

The simple, affordable waitlist tool for founders and makers. Start free in 5 minutes — no credit card required. Try GetWaitly free →

Which Form Builder for a Waitlist? (Tally, Typeform, Carrd, GetWaitly)

Aymane — Sun, 11 Oct 2026 19:08:13 +0000

You need a waitlist form live today. Not next week, not after you research every tool — today, so you can start collecting emails while you build. The problem is that "form builder" and "waitlist tool" sound like the same thing, and picking the wrong one costs you either money, time, or features you will not notice you are missing until launch.

This guide covers how to get a waitlist form live in an afternoon, which form builders can do it, and the one shortcut that skips the workarounds.

The short answer

If you want a waitlist form live fast, you have two paths. Use a general form builder (Tally, Google Forms, Typeform) if you only need to collect email addresses and do not care about referrals or follow-up emails. Use a dedicated waitlist tool (like GetWaitly) if you want referrals, automated emails, and analytics built in from day one. For most solo founders launching a product, the dedicated tool saves more time than it costs.

Why a plain form builder starts to hurt

A form builder is great at one thing: turning input into data. Tally and Typeform are excellent at that. But a waitlist is not just a data-capture problem. It is a people-engineering problem.

Here is what a general form builder does not give you without extra work:

A referral loop. "Share to move up the list" needs a unique link per subscriber and logic to track who referred whom. Form builders do not do this out of the box.
A confirmation and welcome email. You need a second tool (Mailchimp, Kit) wired to the form, or you send nothing.
Position tracking. People want to know where they are in line and how to move up. That requires state, not just a form submission.
Analytics. Visitors, signups, and conversion rate on one screen. A form builder shows submissions, not a funnel.
Spam handling. A public waitlist form attracts bot signups. Dedicated tools ship with spam protection; raw forms often do not.

None of those is fatal. But each one is a workaround — a second tool, a Zap, a script. By the third workaround, you have spent more time than a dedicated tool would have cost.

The form builders you might consider

Here is an honest look at the common starting points, and where each one stops being enough.

Tally

What it is: A free, genuinely pleasant form builder with a no-code editor and unlimited free responses.

When it works: You need a fast, clean form and you are happy piping results into a spreadsheet or sending manual emails.

Where it falls short: No referral system, no position tracking, and no built-in email sequence. You are exporting a CSV and emailing people by hand, or paying for a separate email tool.

Best for: Validating whether there is any interest at all, before you commit to a real waitlist.

Typeform

What it is: A polished, conversational form builder with strong design and logic jumps.

When it works: You want a beautiful, interactive form and your brand leans on design.

Where it falls short: Free plan is capped (10 responses/month), and it has the same gaps as Tally — no referrals, no waitlist-specific email, no analytics funnel.

Best for: Founders who want a premium form experience and will handle the waitlist mechanics separately.

Google Forms

What it is: The fastest free option, if you already live in Google Workspace.

When it works: You literally just need a text box and a spreadsheet.

Where it falls short: No design control, no referrals, no emails, and it looks like — a Google Form. For a product you want people to be excited about, presentation matters.

Best for: A throwaway test, not a launch.

Carrd's built-in form

What it is: If your landing page is already on Carrd, its native form sends submissions to an email platform.

When it works: Your page is on Carrd and you only need basic email capture.

Where it falls short: You still need an external tool for the emails and referral logic. There is a better path: embed a real waitlist widget on Carrd instead of using the native form.

Best for: People already committed to Carrd who want minimal moving parts.

GetWaitly (a dedicated waitlist tool)

What it is: A waitlist-specific tool for founders and makers — a signup form, referrals, broadcast emails, and analytics in one place.

When it works: You are launching a product and want the whole waitlist loop working without stitching tools together.

Where it falls short: It is not a general-purpose form builder. If you need complex form logic, payments, or dozens of custom fields, a form builder is more flexible. GetWaitly deliberately does not try to be that.

Best for: Solo founders who want a waitlist live today and want referrals and emails built in.

Comparison at a glance

Tool	Free tier	Referrals	Auto emails	Position tracking	Analytics funnel
Tally	Yes (unlimited)	No	No	No	No
Typeform	10/mo	No	No	No	No
Google Forms	Yes	No	No	No	No
Carrd form	With Carrd	No	No (external)	No	Basic
GetWaitly	100 subscribers	Yes (Starter)	Yes (Starter)	Yes	Yes

How to get a waitlist form live today

Whichever tool you pick, the sequence is the same. Here is the fast path with GetWaitly.

1. Create the waitlist (2 minutes)

Sign up, name your waitlist, and publish. The free plan gives you one waitlist and up to 100 subscribers — enough to validate.

2. Choose where the form lives

You have two options:

Hosted signup: GetWaitly provides a page at a shareable link. Customize the content and branding, then share the URL. Best for a fast start.
Embed on your own site: Drop a two-line embed into your existing site so the form lives on your domain. Best when you already have a page.

If you want the form on your own domain, the embed is the move — the Carrd embed guide walks through it step by step. The same widget works on any site that accepts custom HTML; there are dedicated guides for WordPress, Webflow, Squarespace, and Shopify.

3. Turn on referrals

On the Starter plan ($5/mo), every subscriber gets a unique referral link automatically and moves up the list when friends join. This turns a static form into a small growth loop — the single biggest reason to use a dedicated waitlist tool over a form builder.

4. Send your first email

Write the welcome email in the built-in editor and send it to everyone who joins. Open and click tracking tell you what lands. If you want the exact copy, the waitlist email template library has a paste-ready version.

5. Watch the funnel

The analytics dashboard shows views, signups, and conversion rate with a 30-day trend, so you can tell whether the problem is traffic or the page itself.

Frequently asked questions

Can I build a waitlist with a form builder?

Yes — Tally, Typeform, or Google Forms will collect email addresses. What they will not do is referrals, position tracking, or the follow-up email sequence without a second tool. If you only need emails, a form builder is fine.

What is the fastest way to build a waitlist form?

A dedicated waitlist tool like GetWaitly: create the waitlist, copy the embed or share the hosted link, and publish. That is a live form in minutes with referrals and emails already wired up. A form builder is faster to create but slower to finish, because of the missing pieces you add later.

Do I need a form builder and a waitlist tool?

No. If you use a waitlist tool, the form is included. You only need both if you want a general-purpose form (with payments or complex logic) and a separate waitlist system — which is rare for a pre-launch product.

Is a free form builder good enough for a real launch?

For validation, yes. For a launch where you want referral growth and follow-up emails, no — you will end up bolting on tools. Starting with a waitlist tool that includes both is simpler and usually cheaper than three free tools that do not talk to each other.

The bottom line

A form builder answers "how do I collect emails." A waitlist tool answers "how do I collect emails, grow them through referrals, and keep them warm until launch." If all you need is the first question, Tally is free and fine. If you are actually launching a product, the second question is the one that matters — and it is worth starting there.

GetWaitly is the simple, affordable waitlist for founders and makers: a live form, referrals, and emails from $0, with the paid tier at $5/mo. Try it free →

Related guides

Waitlist Creator: How to Create a Waitlist Page in Minutes — what a waitlist creator is, and how to make one
7 Best Waitlist Tools for Solo Founders in 2026 — the full dedicated-tool comparison
How to Embed GetWaitly on Carrd — put the form on your own site in two lines
How to Add a Waitlist to WordPress — the Custom HTML block method
How to Add a Waitlist to Webflow — the Code Embed method
How to Add a Waitlist to Any Website — the generic HTML embed
Waitlist Email Templates You Can Copy Today — what to send after someone signs up
Email vs Waitlist vs Landing Page: Which Do You Need? — choosing the right pre-launch approach

How to Add a Waitlist to WordPress (No Plugin)

Aymane — Sat, 10 Oct 2026 14:13:47 +0000

You want a waitlist signup form on your WordPress site — not a Mailchimp redirect, but a real waitlist that tracks referrals and sends updates. GetWaitly's embeddable widget drops into WordPress with two lines of code, no plugin required.

Here is exactly how to add a waitlist to WordPress, and the one plan limitation to know about first.

The short answer

Add a Custom HTML block to the page where you want the form and paste your GetWaitly embed snippet. The widget renders inline, matches your brand colors, and collects subscribers straight into your dashboard. On a self-hosted WordPress site (WordPress.org) this always works. On WordPress.com, JavaScript in HTML blocks requires a Business plan or higher. Total time: 5 minutes.

What you need

A GetWaitly account with a waitlist created. The free plan covers 100 subscribers.
Your waitlist's public ID (from the Widget/Embed section of the dashboard).
A WordPress site. Self-hosted (WordPress.org) works on any host. WordPress.com needs a plan that allows custom JavaScript — free, Personal, and Premium strip script tags; Business and Commerce allow them.

Step 1 — Get your embed code

In your GetWaitly dashboard, open the waitlist and go to the Widget section. Copy two pieces of code:

Script tag (loads the widget):

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

Container div (where the form appears):

<div class="gw-widget" data-waitlist-id="YOUR_WAITLIST_ID"></div>

Replace YOUR_WAITLIST_ID with your waitlist's public ID.

Step 2 — Add the form to a page

Open the page or post where the waitlist belongs in the WordPress block editor. Click the + button, search for Custom HTML, and add the block.

Paste both parts into the block:

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

Click Preview or Publish. The signup form renders where the block sits.

That is the whole integration. If your theme supports it, the form inherits your GetWaitly accent color and font automatically.

Step 3 — Or load the script site-wide (optional)

If you plan to show the widget on several pages, load the script once instead of on every page. Add only the script tag globally, then place only the container div on each page.

With a plugin: Install a header/footer plugin like WPCode or Insert Headers and Footers, and paste the script tag into the Footer section (before </body>).

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

Then, on each page, add a Custom HTML block with only the div:

<div class="gw-widget" data-waitlist-id="YOUR_WAITLIST_ID"></div>

Without a plugin: Edit your theme's footer.php (in Appearance → Theme File Editor) and paste the script tag just before </body>. A plugin is safer — theme updates overwrite manual edits.

Step 4 — Use the popup variant (optional)

If you want a button that opens the form in a modal instead of an inline form, use the trigger variant. Add the script once (Step 3), then place a button where you want it:

<button class="gw-trigger" data-waitlist-id="YOUR_WAITLIST_ID">Join waitlist</button>

This is a good fit for a header CTA or a sticky button.

Step 5 — Test it

Publish and open the page in a private window. You should see the signup form. Submit a test email and confirm:

The success message appears.
The subscriber shows up in your GetWaitly dashboard.
On mobile, the form is full-width and easy to tap.

If the form does not appear, see the troubleshooting section below.

Troubleshooting

The form is blank. Most often, JavaScript was stripped from the HTML block. On WordPress.com, move to a Business plan, or use the no-JavaScript method below. On self-hosted sites, check whether a security or caching plugin is stripping <script> tags — some "optimization" plugins defer or remove them.

The script loads but the form does not render. The data-waitlist-id must be the waitlist's public ID, not its URL slug. Copy it again from the dashboard.

Nothing shows in the editor. Some block editors do not run third-party JavaScript in the editor preview. Check the published page, not the editor.

Alternative: no JavaScript at all

If you cannot run scripts (for example, on WordPress.com free), point a native HTML form at your waitlist's form action URL. No widget script, no plugin:

<form action="https://getwaitly.com/api/join/YOUR_WAITLIST_ID" method="post">
  <input type="email" name="email" required placeholder="Your email" />
  <button type="submit">Join the waitlist</button>
</form>

The browser posts the signup and redirects to your thank-you page. You lose the inline success animation and the match-your-branding styling, but the signup still lands in your dashboard.

Alternative: the hosted page

If editing your WordPress theme or blocks is more than you want to do right now, GetWaitly includes a hosted page. Publish it at getwaitly.com/w/your-id, customize the content and branding, and link to it from your site. It works as a standalone destination while you build the product.

FAQ

Do I need a plugin to add a waitlist to WordPress?

No. A Custom HTML block on the page is enough for the inline form. A plugin is only useful if you want to load the widget script site-wide and place the form on multiple pages without repeating the script tag.

Does the GetWaitly widget work on WordPress.com?

Yes, if your plan allows custom JavaScript. WordPress.com free, Personal, and Premium plans strip <script> tags; Business and Commerce allow them. On lower plans, use the no-JavaScript form action above or link to the hosted page.

Will the widget slow down my WordPress site?

No. The script uses defer, so it loads after your content, and it is under 15KB. Load it site-wide once via a footer plugin if you use the widget on several pages.

Can I add the waitlist to a sidebar or footer widget area?

Yes. Use a Custom HTML widget in Appearance → Widgets (or the block-based widget editor) and paste the container div there. Load the script site-wide first.

Does the form match my site's design?

The widget uses your waitlist's accent color and font from GetWaitly settings. It cannot be styled independently, but you can control its width and alignment by placing the container div inside a styled wrapper in the block editor.

How do I collect names or phone numbers, not just emails?

Enable those fields in your GetWaitly widget settings. The inline widget form renders the fields you configure. Custom questions are supported too.

Related guides

How to Embed GetWaitly on Carrd — the same widget on Carrd, step by step
How to Add a Waitlist to Webflow — the Code Embed method
Which Form Builder for a Waitlist? — form builders vs a dedicated waitlist tool
7 Best Waitlist Tools for Solo Founders in 2026 — the full comparison

The simple, affordable waitlist tool for founders and makers. Start free in 5 minutes — no credit card required. Try GetWaitly free →

Waitlist Benchmarks: Conversion, Referral & Email Rates (2026)

Aymane — Fri, 09 Oct 2026 07:30:12 +0000

"How many signups should my waitlist get?" is the wrong question until you know what good looks like. This page collects the formulas behind the numbers and the benchmark ranges to aim for — so you can set targets that hold up instead of guessing.

Disclaimer: figures below come from public benchmark reports and vendor studies, cited inline. Your results will depend on your audience and page. Use these as orientation, not guarantees. The formulas are exact; plug in your own data.

Waitlist conversion rate: the formula

Conversion rate = signups ÷ unique visitors × 100.

This is the number to watch first. It isolates whether your page and offer connect, separate from how much traffic you send. If you drive 1,000 visitors and get 30 signups, your conversion rate is 3%.

What is a good range?

Conversion rate	What it usually means
Under 5%	The page, offer, or traffic is off — fix these before scaling
5–10%	Typical for an average landing page
10%+	Strong; a well-run waitlist
20%+	Excellent, usually with warm or targeted traffic

For context, Unbounce's conversion benchmark report — analyzing roughly 57 million conversions across more than 41,000 landing pages — puts the median landing page conversion rate at about 6.6%. Waitlister's analysis of thousands of waitlists reports a median waitlist conversion rate around 11%, suggesting a focused waitlist page out-converts a generic landing page. Treat both as directional, not targets to beat.

If your traffic is cold (ads, broad social), expect the lower end; if it is warm (your followers, a community, referrals), expect higher.

Referral k-factor (viral coefficient)

k = i × c, where:

i = average invites sent per subscriber
c = conversion rate of those invites (invites that become signups)

Worked example: if 100 subscribers each send 3 invites on average (i = 3) and 15% of invites convert (c = 0.15), then k = 3 × 0.15 = 0.45. Those 100 subscribers bring in about 45 more. Growth still depends on new traffic — the loop slows down.

To get k above 1 (self-sustaining growth), you need the product of the two numbers above 1. For example, 4 invites per subscriber at 25% conversion gives k = 1.0; 5 invites at 25% gives k = 1.25.

Two levers raise k: make sharing easier (more invites) and make the reward compelling (higher conversion). Only about 7% of waitlists run a referral program at all, per Waitlister's analysis — so simply turning on referrals puts you ahead of most.

Referral rate and referral conversion

Two different metrics are often confused:

Referral rate = subscribers who referred at least one person ÷ total subscribers. This measures how many people share at all. A healthy program gets a meaningful share of subscribers to refer; if almost nobody shares, the reward or the friction is the problem.
Referral conversion rate = signups from referral links ÷ clicks on referral links. This measures the quality of referred traffic. Referred visitors often convert better than cold traffic because the recommendation comes from a friend.

Track both. A high referral rate with low conversion means people are sharing to a cold audience; a low referral rate with high conversion means the reward is good but hard to find.

Email open and click rates

Once you can email your list, three formulas matter:

Open rate = opens ÷ emails delivered.
Click rate = clicks ÷ emails delivered.
Click-to-open rate (CTOR) = clicks ÷ opens. This tells you whether the people who opened found the content worth clicking.

Email benchmarks vary widely by list, industry, and send frequency. For an engaged pre-launch list, open rates are often reported in the 20–40% range, with click rates of a few percent. A dropping open rate is the earliest warning that your audience is losing interest — tighten your sending, and email only when you have something worth saying.

Related: Waitlist Email Sequence Guide.

Launch-day conversion

Launch conversion = paying customers ÷ waitlist size.

This is the number people brag about, and the one with the widest spread. It depends almost entirely on product, price, and how warm the waitlist is — not on the waitlist tool. Expect a range rather than a fixed target, and watch the trend across launches rather than one data point.

Related: Launch Day Playbook.

How to set targets that hold up

Start with your conversion rate. If it is under 5%, do not scale traffic yet — improve the page.
Add a referral loop. Even a simple milestone ("invite 3 friends for early access") raises your referral rate from zero, and word-of-mouth remains the most trusted channel (Nielsen puts word-of-mouth trust around 88%).
Protect deliverability. Double opt-in and a clean list keep your launch email out of spam.
Compare against yourself. Your own last 30 days are a better benchmark than any industry average.

The point of benchmarks is not to hit a number — it is to know which number to fix next.

FAQ

What is a good waitlist conversion rate?

A median landing page converts around 6.6% (Unbounce's benchmark report), while waitlist-specific analyses report a median closer to 11%. Anything above 10% is strong; under 5% usually signals a page or traffic problem worth fixing first.

What is the formula for the viral coefficient (k-factor)?

k = i × c, where i is the average number of invites per subscriber and c is the conversion rate of those invites. k above 1 means self-sustaining growth; below 1 means growth relies on new traffic.

How many people on a waitlist actually refer?

Only about 7% of waitlists run a referral program, according to Waitlister's analysis, so a large share of list owners never measure this. Among those that do, referral rate (percent of subscribers who refer at least one person) is the metric to track.

What email open rate should I expect?

For an engaged pre-launch list, open rates commonly fall in the 20–40% range, with click rates of a few percent. Both vary by list and send frequency, so watch your own trend over time.

Where do these benchmark numbers come from?

The conversion figures are cited from Unbounce's conversion benchmark report and Waitlister's published waitlist analysis. The formulas are standard. All figures are directional — use your own data for decisions.

Related guides

Waitlist Glossary: 16 Terms Every Founder Should Know — plain-English definitions for every term here
Pre-Launch Referral Program Guide — raising your referral rate and k-factor
Waitlist Copywriting that Converts — lifting your conversion rate
Waitlist Email Sequence Guide — the emails behind the open and click rates

The simple, affordable waitlist tool for founders and makers. Start free in 5 minutes — no credit card required. Try GetWaitly free →

How to Add a Waitlist to React & Next.js

Aymane — Thu, 08 Oct 2026 08:53:11 +0000

If you are building your pre-launch site in React or Next.js, you do not need a waitlist SDK or npm package. GetWaitly ships a single script tag and a container element — the same embed that works on any site. Here is how to wire it into a React or Next.js app cleanly.

The short answer

Load https://getwaitly.com/widget.js once in your root layout, then render a <div className="gw-widget" data-waitlist-id="YOUR_WAITLIST_ID" /> wherever the form should appear. For a popup, render a <button className="gw-trigger" data-waitlist-id="YOUR_WAITLIST_ID">. Use the waitlist's public ID, not its slug. Total time: 5 minutes.

What you need

A GetWaitly account with a waitlist created (free plan covers 100 subscribers).
Your waitlist's public ID from the Widget/Embed section of the dashboard.
A React or Next.js app. The widget is plain JavaScript — it does not care which framework you use.

The embed, in framework terms

The GetWaitly widget is two parts: a script that defines the <div class="gw-widget"> behavior, and the div itself. In JSX:

<div className="gw-widget" data-waitlist-id="YOUR_WAITLIST_ID" />

The script must load once per page. In Next.js that is next/script; in plain React you can put it in index.html or inject it in an effect. The widget finds the .gw-widget element and renders the form into it, styled with your waitlist branding.

Next.js (App Router)

Load the script in your root layout so it is present on every route, and render the widget on the page that needs it.

app/layout.tsx

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://getwaitly.com/widget.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

app/page.tsx (or any page)

export default function Home() {
  return (
    <main>
      <h1>Something great is coming.</h1>
      <div className="gw-widget" data-waitlist-id="YOUR_WAITLIST_ID" />
    </main>
  );
}

strategy="afterInteractive" loads the script after the page becomes interactive, so it does not block your render.

Next.js (Pages Router)

Use _app.tsx to load the script once, and place the div in your page:

pages/_app.tsx

import Script from "next/script";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://getwaitly.com/widget.js"
        strategy="afterInteractive"
      />
    </>
  );
}

Plain React (Vite / Create React App)

There is no next/script, so add the script tag to index.html before the closing </body>, and render the div in a component:

index.html

<body>
  <div id="root"></div>
  <script src="https://getwaitly.com/widget.js" defer></script>
</body>

src/App.tsx

export default function App() {
  return (
    <main>
      <h1>Join the waitlist</h1>
      <div className="gw-widget" data-waitlist-id="YOUR_WAITLIST_ID" />
    </main>
  );
}

If you cannot edit index.html, inject the script in an effect instead:

import { useEffect } from "react";

useEffect(() => {
  if (document.querySelector('script[src="https://getwaitly.com/widget.js"]')) return;
  const s = document.createElement("script");
  s.src = "https://getwaitly.com/widget.js";
  s.defer = true;
  document.body.appendChild(s);
}, []);

The popup variant

For a button that opens the form in a modal, load the script once (above) and render a trigger button:

<button className="gw-trigger" data-waitlist-id="YOUR_WAITLIST_ID">
  Join waitlist
</button>

TypeScript and custom fields

data-waitlist-id is a valid data-* attribute on a div and button in JSX, no type changes needed. Enable name, phone, or custom fields in your GetWaitly widget settings and the form renders them automatically.

Single-page apps: one caveat

The widget script initializes on page load. In a single-page app the script loads once and does not re-run on client-side navigation. In practice this is fine because the widget renders into the .gw-widget div wherever it appears. If you mount the div conditionally after the script has loaded, the widget may miss it on the first client-side transition — a full page load fixes it. If that matters for your flow, keep the container div mounted, or drive the form yourself with the no-JavaScript form action below.

Full control: post to the join endpoint

If you would rather build your own React form (for custom validation or styling), skip the widget script and POST to your waitlist's join endpoint:

<form action="https://getwaitly.com/api/join/YOUR_WAITLIST_ID" method="post">
  <input type="email" name="email" required placeholder="Your email" />
  <button type="submit">Join the waitlist</button>
</form>

The browser posts the signup and redirects to your thank-you page. You lose the inline success animation and the automatic branding, but you keep full control of the markup.

Testing

Run your app, open the page, and submit a test email. Confirm the success message appears and the subscriber lands in your GetWaitly dashboard. If the form does not render, check the browser console for a blocked script (ad blockers and strict CSP can block third-party scripts) and verify the data-waitlist-id exactly matches your waitlist.

FAQ

Is there an npm package for the GetWaitly widget?

No. You inject one script tag (https://getwaitly.com/widget.js) and render a container div. There is nothing to install.

Does GetWaitly work with Next.js Server Components?

Yes — the script loads via next/script in your layout, and the container div is a plain element you can render from a Server Component. If you add the script in an effect, put that in a Client Component.

Why does the widget not render after client-side navigation?

The script initializes on load and does not re-run on route changes. Keep the .gw-widget div mounted, or use the form action to POST to /api/join yourself. A hard refresh always re-initializes.

Can I use the popup trigger in React?

Yes. Render a <button className="gw-trigger" data-waitlist-id="YOUR_WAITLIST_ID">. Load the script once and any trigger on the page opens the modal.

Does it work with Vite, Remix, or Astro?

Yes. Anywhere you can add a <script> tag and render a div, the widget works. For server-rendered frameworks, load the script with whatever mechanism the framework recommends (or a plain defer tag).

How do I collect custom fields?

Configure them in your GetWaitly widget settings. The inline widget renders the fields you enable. For a fully custom form, use cf_0, cf_1, … inputs matched to your custom field order and post to /api/join.

Related guides

How to Add a Waitlist to Any Website — the generic HTML embed
How to Add a Waitlist to Framer — the Embed component method
Which Form Builder for a Waitlist? — form builders vs a dedicated waitlist tool
7 Best Waitlist Tools for Solo Founders in 2026 — the full comparison

The simple, affordable waitlist tool for founders and makers. Start free in 5 minutes — no credit card required. Try GetWaitly free →