# Waitlist

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

<figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FsMd6eiV4OrvnQGfjxfK0%2Fwaitlist.png?alt=media&#x26;token=00f102a2-a85e-4372-9cf3-95e2f32f6f3b" alt=""><figcaption><p>Email collection</p></figcaption></figure>

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`&#x20;

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

{% code title="page.tsx" %}

```typescript
import { Waitlist } from "@/components/Waitlist/Waitlist";
```

{% endcode %}

### 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`

```typescript
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`&#x20;

```typescript
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:

{% code title=".env" %}

```properties
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=""
RECAPTCHA_SECRET_KEY=""
```

{% endcode %}

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

{% code title="src/app/layout.tsx" %}

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

{% endcode %}

ReCaptcha should now work correctly.

***

{% hint style="info" %}
If you need basic components like buttons, inputs, etc, they are all available with [ChakraUI](https://chakra-ui.com/).
{% endhint %}