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).
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
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
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
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 developmentCopy the captcha site key and captcha secret key values and use them in the
.env
file:
Finally, open
src/app/layout.tsx
and uncomment the script HTML tag that includes https://www.google.com/recaptcha/api.js
ReCaptcha should now work correctly.
If you need basic components like buttons, inputs, etc, they are all available with ChakraUI.
Last updated