Waitlist Guide

Comprehensive guide to collect emails before launch.

Pre-Launch Waitlist System

Complete guide to setting up and managing your pre-launch waitlist with email capture, live counter, and admin dashboard.

Features

  • ✅ Email Capture - Collect emails with optional fields (name, feature interest, pain points)
  • ✅ Live Counter - Real-time signup counter for FOMO
  • ✅ Admin Dashboard - View, export, and manage all signups
  • ✅ Announcements - Send bulk emails to waitlist members
  • ✅ Conversion Tracking - Track who converts from waitlist to customer
  • ✅ Social Proof - Testimonials and feature highlights
  • ✅ Responsive Design - Mobile-first design with dark mode

Setup

1. Run Database Migration

  1. Go to your Supabase dashboard
  2. Navigate to SQL Editor
  3. Copy and paste the contents of supabase/migrations/003_waitlist.sql
  4. Click Run

This creates:

  • waitlist table - Stores email signups
  • waitlist_conversions table - Links waitlist entries to converted customers
  • Helper functions for stats

2. Environment Variables

No new environment variables needed! The system uses existing Supabase and Resend credentials.

3. Access the Pre-Launch Page

Visit: http://localhost:3000/coming-soon

Usage

For Users

  1. Join Waitlist
    • Visit /coming-soon
    • Enter email (required)
    • Optional: Name, feature interest, pain point
    • Get confirmation message

For Admins

  1. Access Waitlist Dashboard

    • Navigate to /admin/waitlist
    • View all signups with stats

  2. View Statistics

    • Total signups
    • Conversion count
    • Conversion rate

  3. Export Data

    • Click "Export CSV"
    • Get all emails with metadata
    • Use for email marketing

  4. Send Announcements

    • Write subject and message
    • Click "Send to All"
    • Emails sent via Resend

  5. Manage Entries

    • Select entries with checkboxes
    • Delete unwanted entries
    • Bulk operations supported

API Endpoints

Public Endpoints

POST /api/waitlist/signup

{
  "email": "user@example.com",
  "full_name": "John Doe",
  "feature_interest": "Analytics dashboard",
  "pain_point": "Manual reporting"
}

Response:

{
  "success": true,
  "message": "Successfully joined the waitlist"
}

GET /api/waitlist/stats

Response:

{
  "total_signups": 247,
  "conversions": 12,
  "conversion_rate": 4.86
}

Admin Endpoints

GET /api/admin/waitlist

  • Returns all waitlist entries
  • Requires admin authentication

POST /api/admin/waitlist

{
  "action": "export" // or "delete"
  "ids": ["id1", "id2"] // for delete action
}

POST /api/admin/waitlist/announce

{
  "subject": "We are launching!",
  "message": "Join us on launch day...",
  "htmlContent": "<h1>We are launching!</h1>..." // optional
}

Customization

Change Pre-Launch Page Content

Edit /src/app/(landing)/coming-soon/page.tsx:

const FEATURES = [
  {
    icon: Zap,
    title: 'Your Feature',
    description: 'Your description',
  },
  // Add more features
];
 
const FAQ_ITEMS = [
  {
    question: 'Your question?',
    answer: 'Your answer',
  },
  // Add more FAQs
];
 
const TESTIMONIALS = [
  {
    name: 'John Doe',
    role: 'CEO, Company',
    content: 'Great product!',
  },
  // Add testimonials
];

Customize Email Form

Edit /src/components/waitlist/EmailForm.tsx:

  • Add/remove fields
  • Change validation
  • Customize styling

Customize Hero Section

Edit /src/components/waitlist/Hero.tsx:

  • Change title, subtitle, CTA text
  • Modify background effects
  • Adjust colors and spacing

Conversion Tracking

When a user signs up for your app:

// In your signup handler
const { error } = await supabase
  .from('waitlist_conversions')
  .insert({
    waitlist_id: waitlistId,
    user_id: newUserId,
  });

This links the waitlist entry to the converted customer and updates conversion rate.

Email Announcements

Send Launch Announcement

  1. Go to /admin/waitlist
  2. Fill in subject and message
  3. Click "Send to All"
  4. Emails sent via Resend

Customize Email Template

Edit /src/app/api/admin/waitlist/announce/route.ts:

html: htmlContent || `
  <h1>${subject}</h1>
  <p>${message}</p>
  <a href="${process.env.NEXT_PUBLIC_APP_URL}">Visit our site</a>
`

Best Practices

1. Collect Valuable Data

  • Ask about feature interest
  • Ask about pain points
  • Use for product validation

2. Leverage FOMO

  • Show live signup counter
  • Update frequently
  • Highlight milestones ("500 people signed up!")

3. Engagement

  • Send regular updates
  • Build anticipation
  • Share behind-the-scenes content

4. Conversion

  • Track who converts
  • Monitor conversion rate
  • Optimize based on data

Troubleshooting

Emails not sending?

  • Check Resend API key in .env.local
  • Verify email addresses are valid
  • Check Resend dashboard for errors

Stats not updating?

  • Check API endpoint is working
  • Verify RLS policies allow access
  • Check browser console for errors

Admin page not accessible?

  • Verify user has admin role
  • Check authentication token
  • Ensure user is logged in

Security

RLS Policies

  • Public can insert (join waitlist)
  • Only admins can view all entries
  • Service role can manage data
  • Prevents unauthorized access

Best Practices

  • Never expose API keys in frontend
  • Validate all inputs server-side
  • Use HTTPS in production
  • Implement rate limiting for signup endpoint

Next Steps

  1. Customize content - Update hero, features, FAQ
  2. Send test announcement - Verify email delivery
  3. Monitor signups - Check admin dashboard
  4. Launch campaign - Share pre-launch page
  5. Track conversions - Link signups to customers

Support

For issues or questions:

  • Check the troubleshooting section
  • Review API endpoint documentation
  • Check browser console for errors
  • Verify Supabase and Resend are configured correctly