Integration
Add waitlists
to any website
Integrate Waitlister into any platform with just two lines of code. Works with React, WordPress, Squarespace, and more.
Used by 1,000+
businesses & entrepreneurs
.png?alt=media&token=939637fa-d391-4d15-85ea-7005e07d08eb)
.png?alt=media&token=264537c9-b2e0-44e7-9d78-3b558d4e10c2)
Works with all major platforms
Add a form in
two simple steps
Follow these steps to add a Waitlister form to any website.
Add script to your HTML head
Copy and paste the script code into the head section of your page. This only needs to be added once.
<script src="https://waitlister.me/js/embed.js" defer></script>Add form to your HTML body
Copy and paste the body code where you want the form to appear on your page. You can add multiple forms to a single page.
<div class="waitlister-form" data-waitlist-key="YOUR_WAITLIST_KEY" data-height="450px"></div>Finding your waitlist key
The data-waitlist-key in the body code is unique to each form. You can find it on the "Overview" page in your waitlist dashboard.
Works anywhere
Check out these examples of how to integrate Waitlister on different platforms.
<!DOCTYPE html>
<html>
<head>
<title>My Waitlist Page</title>
<script src="https://waitlister.me/js/embed.js" defer></script>
</head>
<body>
<div class="container">
<!-- Waitlister Form -->
<div class="waitlister-form"
data-waitlist-key="YOUR_WAITLIST_KEY"
data-height="450px">
</div>
</div>
</body>
</html>- Works with any HTML page
- No dependencies required
- Responsive out of the box
- Compatible with all modern browsers
import { useEffect } from 'react';
function WaitlistForm() {
useEffect(() => {
// Load the Waitlister script
const script = document.createElement('script');
script.src = 'https://waitlister.me/js/embed.js';
script.async = true;
document.head.appendChild(script);
// Initialize the form after script loads
script.onload = () => {
window.WaitlisterForm && window.WaitlisterForm.initialize();
};
// Clean up
return () => {
document.head.removeChild(script);
};
}, []);
return (
<div
className="waitlister-form"
data-waitlist-key="YOUR_WAITLIST_KEY"
data-height="450px">
</div>
);
}
export default WaitlistForm;- Works with React and Next.js
- Handles component lifecycle properly
- Can be used in server-side rendered apps
- Compatible with React hooks
<!-- Add to your theme's header.php file -->
<?php
function add_waitlister_script() {
echo '<script src="https://waitlister.me/js/embed.js" defer></script>';
}
add_action('wp_head', 'add_waitlister_script');
?>
<!-- Add to your page or post using the HTML block -->
<div class="waitlister-form"
data-waitlist-key="YOUR_WAITLIST_KEY"
data-height="450px">
</div>
<!-- Or create a shortcode in functions.php -->
<?php
function waitlister_shortcode($atts) {
$atts = shortcode_atts(array(
'key' => 'YOUR_WAITLIST_KEY',
'height' => '450px',
), $atts);
return '<div class="waitlister-form" data-waitlist-key="' . esc_attr($atts['key']) . '" data-height="' . esc_attr($atts['height']) . '"></div>';
}
add_shortcode('waitlister', 'waitlister_shortcode');
?>- Add to WordPress using HTML blocks
- Create a custom shortcode for non-technical users
- Works with Elementor, Divi, and other page builders
- Easily add to widget areas or templates
{%- comment -%}
Add to theme.liquid in the <head> section
{%- endcomment -%}
<script src="https://waitlister.me/js/embed.js" defer></script>
{%- comment -%}
Add to any template or section file
{%- endcomment -%}
<div class="page-width section-{{ section.id }}-padding">
<h2>{{ section.settings.heading }}</h2>
<div class="waitlister-form"
data-waitlist-key="YOUR_WAITLIST_KEY"
data-height="450px">
</div>
</div>
{% schema %}
{
"name": "Waitlist Form",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Join our waitlist"
}
],
"presets": [
{
"name": "Waitlist Form"
}
]
}
{% endschema %}- Create a custom Shopify section
- Add to product pages for out-of-stock items
- Works with Shopify 2.0 themes
- Can be used in announcement bars or footers
<!-- Step 1: Add to the HEAD section in Project Settings -->
<script src="https://waitlister.me/js/embed.js" defer></script>
<!-- Step 2: Create a new Custom Code element on your page -->
<!-- and paste this HTML inside -->
<div class="waitlister-form"
data-waitlist-key="YOUR_WAITLIST_KEY"
data-height="450px">
</div>- Add to Webflow using Custom Code elements
- Works with Webflow animations and interactions
- Style container to match your design system
- Compatible with Webflow CMS collections
FAQ
Common questions
Find answers to frequently asked
questions about integrating Waitlister.
Yes! You can add multiple Waitlister forms to the same page. Just make sure to include the script once in the head section, and then add multiple form divs with different waitlist keys in the body.
Yes, Waitlister works with single-page applications built with React, Vue, Angular, and other frameworks. For SPAs, we recommend initializing the form after the component mounts. See our React and Vue examples for implementation details.
Absolutely! You can fully customize your form in the form editor.
Yes, all Waitlister forms are fully responsive and will adapt to any screen size.
We don't have a dedicated WordPress plugin yet, but you can easily add the form to WordPress using a Custom HTML block or by adding the embed code to your theme's header and footer. See our WordPress example for details.
Get started for free
Start collecting sign ups for your
product launch in minutes — no coding required.