Shipped
HomeContacts
  • Get started
  • 📚Tutorials
    • Make a waiting list
    • Launch a pre-sale
    • Build a SaaS
    • Create your store on Lemon Squeezy
  • 🟩Features
    • AI Services
    • Affiliate Program
    • Analytics
    • Authentication
      • MailChimp
      • Loops
      • AWS SES
      • SendGrid
      • Supabase Auth
        • Supabase Authentication Flow
        • Supabase Magic Link
        • Supabase Email & Password
        • Supabase Login with Google
    • API endpoints
      • 🛡️Authenticated API
    • Blog
    • Customer support
    • Chrome Extension
    • Dark mode
    • Database
      • Update your database
      • MongoDB
    • Emails
    • Error pages
    • Icons
    • Onboarding
    • Payments
      • Lemon Squeezy
        • Subscriptions
        • One-time purchase
        • Test mode
      • Stripe
    • Private pages
    • SEO
    • shadcn/ui
    • Supabase
    • Workspace / Organizations
  • 📦Components
    • AccountMenu
    • CtaBox
    • DarkModeSwitch
    • Explainer video
    • FAQ
    • Features
    • Footer
    • Header
    • Hero
    • Lifetime
    • Pricing
    • Sales Notification
    • Secondary Sidebar Pages
    • Sidebar
    • Tabs
    • Testimonials
    • Waitlist
    • WebAppPage
  • 🚀Deployment
  • ✅Other
    • Configuration
    • Changelog widget
    • Favicon
    • Google Fonts
    • Sitemap
    • Theme
  • Updates
  • GitHub Repository
  • Support
Powered by GitBook
On this page
  • MailChimp
  • Loops
  • Enable reCaptcha

Was this helpful?

  1. Components

Waitlist

Collect emails for wait list of newsletter.

PreviousTestimonialsNextWebAppPage

Last updated 1 year ago

Was this helpful?

This component can be used for a waitlist landing page, or to collect the email of users for your newsletter (just update the copy).

When the user hits the "Remind me" button, we call the /api/waitlist endpoint.

To set up the email collection service, open src/app/api/waitlist/route.ts

Component: <Waitlist /> File: src/components/Waitlist/Waitlist.tsx

page.tsx
import { Waitlist } from "@/components/Waitlist/Waitlist";

MailChimp

Remember to set the environment variable MAILCHIMP_AUDIENCE_LIST_ID into the .env file (or your online service like Vercel, Netlify, Render, etc).

Add this code to src/app/api/waitlist/route.ts

import { addMailChimpListMember } from "@/libs/mailchimp";
import type { NextApiRequest, NextApiResponse } from "next";

type ResponseData = {
  result: boolean;
};

export async function POST(req: Request) {
  const body = await req.json();
  const email = body.email;
  if (email) {
    addMailChimpListMember({
      email,
      firstName: "",
      lastName: "",
      tags: ["waitlits"],
    }); 
  }

  return Response.json({ result: true });
}

Loops

Remember to set the environment variable LOOPS_API_KEY into the .env file (or your online service like Vercel, Netlify, Render, etc).

Add this code to src/app/api/waitlist/route.ts

import { createLoopsContact } from "@/libs/loops";
import type { NextApiRequest, NextApiResponse } from "next";

type ResponseData = {
  result: boolean;
};

export async function POST(req: Request) {
  const body = await req.json();
  const email = body.email;
  if (email) {
    createLoopsContact({
      email,
      firstName: "",
      lastName: "",
      userGroup: "Waitlist",
    }); 
  }

  return Response.json({ result: true });
}

Enable reCaptcha

When you launch a waitlist, it is usually public.

This means that your website and the waitlist endpoint is subject to abuse by someone with malicious intent.

To prevent this, the waitlist form and endpoint comes with support to reCaptcha by Google, which is preset by default.

These are the instructions to correctly configure it.

  • Create a project and add your domain and localhost for local development

  • Copy the captcha site key and captcha secret key values and use them in the .env file:

.env
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=""
RECAPTCHA_SECRET_KEY=""
src/app/layout.tsx
<script
    defer
    type="text/javascript"
    src={`https://www.google.com/recaptcha/api.js?render=${process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}`}
/>

ReCaptcha should now work correctly.


Visit

Finally, open src/app/layout.tsx and uncomment the script HTML tag that includes

If you need basic components like buttons, inputs, etc, they are all available with .

📦
https://www.google.com/recaptcha
https://www.google.com/recaptcha/api.js
ChakraUI
Email collection