Build a Waitlist Page
Build a high-converting waitlist page with email capture, referral mechanics, social proof counters, and automated welcome emails — the launchpad for any new product.
What makes a waitlist page convert
A waitlist page has one job: convince visitors to give you their email address. Every element on the page either supports that goal or distracts from it. The highest-converting waitlist pages share five traits: a clear headline that names the problem, a subheadline that previews the solution, visual credibility through design quality and social proof, a low-friction signup form with minimal fields, and urgency or exclusivity that motivates action now rather than later. Ask Claude Code: Create a new Next.js project for a waitlist page. Set up TypeScript and Tailwind CSS. Create the landing page at src/app/page.tsx with these elements: a hero section with a bold headline (the problem statement), a subheadline (one sentence describing the solution), an email input with a Join the Waitlist button, a live counter showing how many people have signed up, three feature preview cards below the fold with icons and short descriptions, a FAQ section answering common questions, and a footer with links to your social profiles. Use a colour scheme based on a single accent colour. Make the design feel premium — generous whitespace, large typography, subtle shadows. The page should be fully responsive and look great on mobile. Ask Claude Code: Add a favicon and Open Graph meta tags with a title, description, and preview image so the page looks good when shared on social media. Generate a simple OG image using HTML and CSS rendered to a canvas. This social preview is critical because most traffic to a waitlist page comes from social sharing.
Email capture and data storage
Ask Claude Code: Create an API route at src/app/api/waitlist/route.ts that handles POST requests with an email address. The handler should validate the email format using a regex, check for duplicates, generate a unique referral code for the new subscriber (8 character alphanumeric string), calculate their waitlist position, store the data, and return the position and referral code. For storage, use a JSON file initially — create a subscribers.json file that stores an array of objects with email, referral_code, referred_by (the code of who referred them), position, signed_up_at, and referral_count. Create a GET endpoint that returns the total subscriber count (for the live counter on the page) without exposing individual emails. Ask Claude Code: Update the frontend signup form to call the API. When the user submits their email: disable the button and show a loading spinner, call the POST endpoint, on success redirect to a thank you page at /welcome/[referralCode] that shows their position, their unique referral link, and a share section. On error, show the error message inline without clearing the input. Handle the duplicate email case gracefully — show a message like You are already on the list at position X instead of a generic error. Add rate limiting to the API endpoint: maximum 5 signups per IP address per hour. This prevents abuse while allowing legitimate signups. Ask Claude Code: Add basic analytics tracking. Log each signup with the referral source (UTM parameters from the URL), the timestamp, and whether they were referred by someone. This data helps you understand which channels drive the most signups.
Referral system for viral growth
The best waitlist pages grow themselves through referral mechanics. Each subscriber gets a unique link. When someone signs up through that link, the referrer moves up the waitlist or earns a reward. Ask Claude Code: Build a referral system. When a new subscriber signs up through a referral link (the URL contains a ref query parameter with the referrer's code), record the referral in the referred_by field and increment the referrer's referral_count. Create a rewards tier system: 3 referrals earns early access, 5 referrals earns a free month, 10 referrals earns founding member status. On the welcome page, show the subscriber's referral link with copy-to-clipboard functionality, their current referral count, progress toward the next reward tier as a visual progress bar, and share buttons for Twitter, LinkedIn, and email that pre-populate a message with their referral link. Ask Claude Code: Create share templates for each platform. Twitter: I just joined the waitlist for [Product] — [one-line value prop]. Join me: [referral link]. LinkedIn: a slightly longer professional version. Email: a subject line and body that the user can send to colleagues. Each share button should open the appropriate sharing interface with the pre-written text including the referral link. Ask Claude Code: Add a leaderboard page at /leaderboard that shows the top 10 referrers by referral count, with their position anonymised to the first letter of their email plus asterisks. This adds a competitive element that motivates more sharing. Update the welcome page to show where the subscriber ranks on the leaderboard if they are in the top 50. The referral system creates a flywheel: every new subscriber potentially brings more subscribers, each of whom brings more. Even a modest viral coefficient of 0.3 (each subscriber brings 0.3 additional subscribers) significantly amplifies your growth.
Automated welcome emails
Every new subscriber should receive an immediate welcome email that confirms their signup and encourages sharing. Ask Claude Code: Set up email sending with Resend. Install the resend package. Create an email utility at src/lib/email.ts. Build an HTML email template for the welcome email that includes: a branded header with your product name and logo, a personalised greeting, their waitlist position, their unique referral link prominently displayed, the referral rewards explanation, share buttons (these will be links since HTML emails do not support JavaScript), and a brief teaser of what the product does. The email should look professional and render well in Gmail, Outlook, and Apple Mail. Send the welcome email automatically when a subscriber signs up by calling the email function from the API route. Ask Claude Code: Create a second email template for referral milestones. When a subscriber hits 3, 5, or 10 referrals, send them a congratulations email telling them what they have unlocked. Update the referral tracking code to check for milestone crossings after each new referral and trigger the appropriate email. Ask Claude Code: Add an email preference for frequency. In the welcome email, include an unsubscribe link at the bottom. Create an API endpoint at /api/unsubscribe/[code] that marks a subscriber as opted out. Check the opt-out status before sending any email. This is not just good practice — it is legally required under GDPR, CAN-SPAM, and similar regulations. Common email issues: emails going to spam. To improve deliverability, set up SPF and DKIM records for your sending domain. Resend's documentation walks through this setup. Test by sending to Gmail, Outlook, and Yahoo accounts and checking which folder the email lands in.
A/B testing and conversion optimisation
A 1 percent improvement in conversion rate on a page with 10000 visitors means 100 more signups. Ask Claude Code: Add A/B testing capability to the waitlist page. Create a system that randomly assigns visitors to variant A or variant B using a cookie so they always see the same variant on return visits. Track which variant each signup came from. Start with testing two headlines: variant A uses the current headline and variant B uses a benefit-focused alternative. Log every page view and every signup with the variant identifier. Create an admin page at /admin that shows the A/B test results: views, signups, and conversion rate for each variant, with a simple statistical significance indicator. Ask Claude Code: Build the significance calculator. Use a basic chi-squared test to determine whether the difference between variants is statistically significant or likely due to random chance. Show a green badge for significant results (p less than 0.05) and a grey badge for not yet significant. Show how many more views are needed to reach significance at the current conversion rates. Beyond headlines, test these elements sequentially — only test one thing at a time for clean results. Test the CTA button text (Join the Waitlist versus Get Early Access versus Reserve My Spot). Test the page layout (hero with form above the fold versus features first with form below). Test social proof (showing the live counter versus hiding it). Ask Claude Code: Add a simple heatmap tracker that logs click positions on the page. Store clicks as x and y percentages relative to the viewport. Create a visualisation on the admin page that overlays a heatmap on a screenshot of the page, showing where people click most. This reveals which elements attract attention and whether the signup form is being noticed.
Admin dashboard and subscriber management
As your waitlist grows, you need visibility into the data and tools to manage subscribers. Ask Claude Code: Create a comprehensive admin dashboard at /admin/dashboard that shows: total subscribers with a daily growth chart for the last 30 days, signup sources breakdown (organic, referral, by UTM campaign), referral statistics including total referrals, viral coefficient, and top referrers, email delivery stats if available from the Resend API, and geographic distribution by timezone from signup timestamps. Add a subscriber table below the charts with columns for email, position, referral code, referral count, rewards earned, signup date, and source. Add search by email and filter by date range, referral count, and source. Include export functionality to download the subscriber list as a CSV file. Ask Claude Code: Add subscriber management actions. The admin should be able to send a bulk email to all subscribers or a filtered segment. Create an email compose page with a template selector, subject line input, and body editor. Preview the email before sending. Add a send test email button that sends to the admin's email first. For bulk sends, process emails in batches of 50 with a 1-second delay between batches to respect rate limits. Show a progress bar during sending with a count of sent, failed, and remaining. Ask Claude Code: Add a simple authentication layer to the admin routes. Use a single admin password stored as an environment variable. The admin login page sets a secure HTTP-only cookie on successful authentication. Middleware on all /admin/* routes checks for this cookie. This is not production-grade auth but is sufficient for a pre-launch waitlist.
Deploying and promoting the waitlist
Ask Claude Code: Prepare the waitlist for production deployment. Move subscriber storage from a JSON file to a PostgreSQL database on Railway for reliability and concurrent access. Create a subscribers table with proper indexes on email (unique) and referral_code (unique). Update all API routes to use the database. Set up environment variables for the database URL, Resend API key, admin password, and the site URL. Deploy to Vercel: vercel --prod. Verify the complete flow: visit the live URL, sign up, receive the welcome email, share the referral link, sign up through the referral link, verify the referrer's count increments, and check the admin dashboard. Ask Claude Code: Create a launch promotion checklist as a JSON file. Include these promotion channels with specific instructions for each: Product Hunt (create a coming soon page), Twitter/X (write 5 teaser tweets that can be scheduled), LinkedIn (write a launch post), relevant subreddits (identify 3 subreddits where the target audience is active), Hacker News (write a Show HN post), IndieHackers (create a product page), and direct outreach (write a template email for sending to contacts in your network). For each channel, include the optimised messaging, the best time to post, and the referral link with appropriate UTM parameters so you can track which channel drives the most signups. The waitlist page is now your pre-launch engine. Drive traffic to it, watch signups grow through organic sharing, use the referral mechanics to amplify reach, and build an audience of interested people you can notify when the product launches. The waitlist does double duty: it validates demand (are people signing up?) and builds a launch audience (who will you tell when it is ready?).
Launch Strategy
This guide is hands-on and practical. The full curriculum covers the conceptual foundations in depth with structured lessons and quizzes.
Go to lesson