Waitlist

Collect emails for wait list of newsletter.

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

Email collection

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.

• Visit https://www.google.com/recaptcha

• 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=""

• Finally, open src/app/layout.tsx and uncomment the script HTML tag that includes https://www.google.com/recaptcha/api.js

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.

---

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