` snippet into the space / page where you want your form to appear. Your form will be displayed as an iframe in your website. #### Step 1. Visit the Form builder page From your projects dashboard, find and click the **Form builder** link.

#### Step 2. Find and copy the script On the form builder page, click on "Get embed code" in the form preview box.

You can also copy and paste the code below: ```html ``` #### Step 3. Find and copy the css \ The css link will be pasted into the `` of your site's homepage. Check out our documentation for specific frameworks :arrow\_left:

#### Step 4. Find and copy the html div Copy this div and paste it into your website wherever you want your form to appear.

This snippet will work with the script that you pasted earlier. It will pull the appropriate waitlist from the server and load as an iframe on your website. You can also paste this snippet: ```html ``` Replace **FORM\_CODE** with the unique code of your custom form (found on the form builder page). ### Framework references We have references for specific frameworks. Check out the table of contents on the left side of your screen. :arrow\_left: # HTML/CSS The simplest way to embed a Waitlisty form - directly in a vanilla HTML / CSS site Here's an example of embedding the script and div elements into a vanilla html / css site.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Our Waitlisty CSS -->
    <link rel="stylesheet" href="https://jzcjrtlxrpzxgszlwttl.supabase.co/storage/v1/object/public/formbuilder_v2/formBuilder_v2.css" />
    <title>You Wesbite</title>
  </head>
  <body>
    <div>This is a website with a form in it.</div>
    <!-- Our Waitlisty widget -->
    <div class="waitlisty-widget" data-key-id="4zE41Vc"></div>
    <!-- Our Waitlisty javascript -->
    <script src="https://jzcjrtlxrpzxgszlwttl.supabase.co/storage/v1/object/public/formbuilder_v2/formBuilder_v2.js" defer></script>
  </body>
</html>

[^1]: # Next.js (App Router) Next.js doesn't allow us to use a \ element in our RootLayout, so here's the workaround using a \ {children} {/* Our Waitlisty widget script */} ) } ``` # Zapier Use our Zapier app to create workflows based on Waitlisty signups. You can use Zapier to receive waitlist submissions on your favorite apps like Google Sheets, Airtable, Newsletter services like Mailchimp, HubSpot Convertkit, and many more. ### What is Zapier? Zapier is an online automation tool that connects your favorite apps, such as Gmail, Slack, Mailchimp, and more. You can connect two or more apps to automate repetitive tasks without coding or relying on developers to build the integration. With Zapier, you can connect Waitlisty Waitlist to thousands of apps and web services. Zapier can automatically trigger workflows in other apps whenever a new user signs up for your waitlist. When new triggers happen in Waitlisty, Zapier will automatically send data to the other apps you've connected. ### How to Integrate Zapier **After choosing a project, proceed to the integrations page.**

#### **Step 1. Generate an access token for Zapier** On the integrations page, click on the Generate API Key button in the Zapier Integration box. * This will generate a unique access token for your waitlist project. Copy the access token.

#### **Step 2. Create a new Zapier Zap** Follow the steps to create a new Zapier Zap * Log in to your Zapier account and go to the My Apps section or click on this link - . * Then click the **+ Create Zap** button.

Create a trigger action * You'll be taken to the Zap editor * Click on **1. Trigger** button and search for **Waitlisty** in the popup. * Select **Waitlisty** from the list of apps.

#### Step 3. Integrate with Waitlisty You'll see the options for **Trigger Event** on the right side of the page. * Select the **Waitlisty Signup** event from the list. * Then click **continue.** * You will be asked to connect your Waitlisty account. * Paste the API Key that you copied from Waitlisty into the popup input. * You'll then test the trigger. This will pull in the latest Waitlisty submission from your project. If you do not have any submissions, a sample submission will be generated. Then you'll select an event action. This event action will be performed whenever someone submits to your Waitlisty waitlist. ### Payload Events Waitlisty currently supports the following events: * New Waitlisty signup (someone submits a Waitlisty form) The following is available in the **waitlist signup** payload: | Key | Type | Description | | ------------------ | --------------------------------------------------- | ------------------------------------------------------------- | | event\_type | "new\_signup" | The type of event | | created\_at | string | The timestamp when the signup happened. | | email | string | The user's email. | | full\_name | string | The user's full name (if entered). | | status | string | | | referral\_code | string | The referral code for the user. | | referral\_points | number | How many points the user has (default 5 points per referral). | | position | number | Their position in the list. | | referred\_by\_code | string | The referral code of who referred them. | | user\_json | json (extra data like questions and responses, etc) | JSON of extra data collected in the form. | | waitlist\_id | number | The id for the waitlist project. |