Integrate a Waitlist into your React Website

The Waitlist Widget involves an inline <script> that has to be sourced and executed. Vanilla React makes it difficult to execute scripts, so we will need a separate library to get the job done. We'll use React Helmet, which allows us to execute scripts inside React renders.

Integration Guide

1. Install React Helmet with npm install react-helmet. You'll want to do this either globally (-g) or in your project's directory (i.e. navigate to where you keep package.json and then run the command).

2. Go to your Waitlist Dashboard, navigate to the Waitlist, into the Widget Builder, and click the "Get Embed Code" button.

3. The window that pops up will give you a small code snippet to copy. Click the copy button.

4. Go into your code editor, and navigate to the file where you want to embed your Waitlist.

5. At the top, insert import Helmet from "react-helmet".

6. Then paste the code snippet in, wherever you want the Waitlist to render. Importantly, you need to paste the three lines together and exactly in the same order.

7. Now wrap the last two lines (the <link> and <src> tags) inside <Helmet> tags. You must wrap only and exactly these elements; divs and other elements are not admissible for Helmet.

8. Below is a minimal code example of what it should look like:

Copy-Pastable Code Example

import Helmet from "react-helmet";

export default function NewWidget() {
    return (
        <>
            <div
                id="getWaitlistContainer"
                data-waitlist_id="71"
            ></div>
            <Helmet>
                <link
                rel="stylesheet"
                type="text/css"
                href="https://prod-waitlist-widget.s3.us-east-2.amazonaws.com/getwaitlist.min.css"
                />
                <script src="https://prod-waitlist-widget.s3.us-east-2.amazonaws.com/getwaitlist.min.js"></script>
            </Helmet>
        </>
    );
}

Customization

For more waitlist form customization, check out the Widget Embed Options.