Make a Waiting List

Learn how to create a waitlist landing page to evaluate interest and onboard users progressively.

If you're still building your product while talking to potential customers, creating a waitlist is a great way to evaluate interest in your value proposition and onboard new users progressively.

Why Create a Waitlist?

A waitlist landing page helps you:

  • • Validate your product idea with real interest
  • • Build an audience before launch
  • • Create anticipation and FOMO (fear of missing out)
  • • Manage onboarding in controlled batches
  • • Collect early feedback from engaged users

Creating Your Waitlist Page

The waiting list is already built into your template. You don't need to write any code — just toggle one setting in lib/config.ts:

lib/config.ts
// lib/config.ts → waitingList section
waitingList: {
  enabled: true,  // ← Set to true to show the waiting list
  // ...
}

In app/page.tsx, the template automatically switches between the Pricing section and the WaitingList component based on this config:

app/page.tsx
// app/page.tsx — just toggle in config.ts
{siteConfig.waitingList.enabled ? <WaitingList /> : <Pricing />}

The WaitingList component lives at components/landing/WaitingList.tsx and reads all its text and behavior from the config file — no code changes needed.

No Third-Party Email Service Needed

We use Supabase directly — no third-party email platforms required. The lib/waiting-list.ts file contains two server actions: joinWaitingList(email) and getWaitingListCount(). They use the existing Supabase client from lib/supabase.ts.

Customizing the Waitlist

All waitlist text and behavior is configured from the waitingList section in lib/config.ts. Zero code changes needed:

lib/config.ts
// lib/config.ts
waitingList: {
  enabled: true,
  title: "Join the Waiting List",
  subtitle: "Be the first to know when we launch.",
  buttonText: "Join Now",
  placeholder: "your@email.com",
  successMessage: "You're on the list! 🎉",
  duplicateMessage: "You're already on the list!",
  showCount: true,
}

title & subtitle: Customize the heading and subtext to explain your value proposition

buttonText & placeholder: Customize the CTA button and input placeholder text

successMessage & duplicateMessage: Define what users see after signing up or if they're already on the list

showCount: Toggle showing the number of people already on the waitlist as social proof

Best Practices

Tips for Success

  • • Keep the signup form simple - just email is often enough
  • • Communicate clearly what users will get by joining
  • • Set expectations on when they'll hear from you
  • • Send regular updates to keep the waitlist engaged
  • • Consider offering early access or special perks to waitlist members

Supabase Database Setup

Run the following SQL in your Supabase Dashboard → SQL Editor to create the waiting list table:

Supabase SQL Editor
CREATE TABLE waiting_list (
  id BIGSERIAL PRIMARY KEY,
  email TEXT UNIQUE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

CREATE OR REPLACE FUNCTION get_waiting_list_count()
RETURNS INTEGER AS $$
  SELECT COUNT(*)::INTEGER FROM waiting_list;
$$ LANGUAGE SQL;

That's it! The lib/waiting-list.ts server actions will handle inserting emails and fetching the count automatically using your existing Supabase connection.

You're Ready to Launch! 🚀

Your waitlist page is now ready to start collecting interested users. Make sure to promote it on social media, forums, and anywhere your target audience hangs out. Remember to engage with your waitlist regularly to keep them excited about your launch!