React No-Code Integration Instructions for Waitlist
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
-
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 keeppackage.json
and then run the command). -
Go to your Waitlist Dashboard, navigate to the Waitlist, into the Widget Builder, and click the "Get Embed Code" button.
-
The window that pops up will give you a small code snippet to copy. Click the copy button.
-
Go into your code editor, and navigate to the file where you want to embed your Waitlist.
-
At the top, insert
import Helmet from "react-helmet"
. -
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.
-
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. -
Below is a minimal code example of what it should look like:
Copy-Pastable Code Example
Copy-pastable Code
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 customization, check out the Widget Embed Options.