Quick Start Guide

Quick Start Guide

Get your waitlist up and running in 5 minutes! 🚀

Prerequisites

Before you begin, make sure you have:

  • ✅ A Waitlist Widget account (Sign up here)
  • ✅ A project created in your dashboard
  • ✅ Your project's API key (found in Project Settings)

Step 1: Create Your Project (1 minute)

  1. Log in to your dashboard
  2. Click "Create Project" button
  3. Fill in the form:
    • Project Name: e.g., "My Awesome Product"
    • Slug: e.g., "awesome-product" (used in URLs)
    • Description (optional): Brief description of your waitlist
  4. Click "Create" button
  5. Copy your API key from the project page

Step 2: Embed the Widget (2 minutes)

Choose your framework and copy the code:

HTML (Vanilla JavaScript)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Product Waitlist</title>
</head>
<body>
  <h1>Join our waitlist</h1>
  
  <!-- Waitlist widget container -->
  <div id="waitlist-widget"></div>
  
  <!-- Waitlist widget script -->
  <script src="https://api.waitlistwidget.com/widget.js"></script>
  <script>
    WaitlistWidget.init({
      apiKey: 'YOUR_API_KEY_HERE',
      containerId: 'waitlist-widget'
    });
  </script>
</body>
</html>

React

import { useEffect } from 'react';

function WaitlistForm() {
  useEffect(() => {
    // Load widget script
    const script = document.createElement('script');
    script.src = 'https://api.waitlistwidget.com/widget.js';
    script.async = true;
    document.body.appendChild(script);
    
    script.onload = () => {
      window.WaitlistWidget.init({
        apiKey: 'YOUR_API_KEY_HERE',
        containerId: 'waitlist-widget'
      });
    };
    
    return () => {
      document.body.removeChild(script);
    };
  }, []);
  
  return (
    <div>
      <h1>Join our waitlist</h1>
      <div id="waitlist-widget"></div>
    </div>
  );
}

export default WaitlistForm;

Next.js App Router

'use client';

import { useEffect } from 'react';

export default function WaitlistPage() {
  useEffect(() => {
    // Load widget script
    const script = document.createElement('script');
    script.src = 'https://api.waitlistwidget.com/widget.js';
    script.async = true;
    document.body.appendChild(script);
    
    script.onload = () => {
      if (window.WaitlistWidget) {
        window.WaitlistWidget.init({
          apiKey: 'YOUR_API_KEY_HERE',
          containerId: 'waitlist-widget'
        });
      }
    };
    
    return () => {
      document.body.removeChild(script);
    };
  }, []);
  
  return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="text-4xl font-bold mb-8">Join our waitlist</h1>
      <div id="waitlist-widget"></div>
    </div>
  );
}

Vue.js

<template>
  <div>
    <h1>Join our waitlist</h1>
    <div id="waitlist-widget"></div>
  </div>
</template>

<script>
export default {
  name: 'WaitlistForm',
  mounted() {
    // Load widget script
    const script = document.createElement('script');
    script.src = 'https://api.waitlistwidget.com/widget.js';
    script.async = true;
    document.body.appendChild(script);
    
    script.onload = () => {
      window.WaitlistWidget.init({
        apiKey: 'YOUR_API_KEY_HERE',
        containerId: 'waitlist-widget'
      });
    };
  },
  beforeUnmount() {
    const scripts = document.querySelectorAll('script[src*="widget.js"]');
    scripts.forEach(script => script.remove());
  }
};
</script>

Step 3: Test Your Widget (1 minute)

  1. Open your page in a browser
  2. Enter a test email (e.g., test@example.com)
  3. Submit the form
  4. Check your dashboard → You should see the new subscriber!

✅ Congratulations! Your waitlist is live! 🎉

Step 4: Customize (Optional, 1 minute)

Want to match your brand? Add custom CSS:

<style>
  /* Customize the widget */
  #waitlist-widget .waitlist-form {
    background: linear-gradient(to right, #667eea, #764ba2);
    padding: 2rem;
    border-radius: 12px;
  }
  
  #waitlist-widget .waitlist-input {
    border: 2px solid #fff;
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
  }
  
  #waitlist-widget .waitlist-button {
    background: #10b981;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
  }
  
  #waitlist-widget .waitlist-button:hover {
    background: #059669;
  }
</style>

See full customization guide: WIDGET.md

Troubleshooting

Widget not showing up?

Check these common issues:

  1. API Key incorrect: Copy-paste carefully from dashboard
  2. Container ID mismatch: containerId must match your <div> ID
  3. CORS error: Make sure your domain is allowed (check project settings)
  4. Script not loaded: Check browser console for errors

Form not submitting?

Possible causes:

  1. Rate limit: Maximum 3 submissions per minute per IP
  2. Duplicate email: Email already subscribed (expected behavior)
  3. Invalid email: Check email format validation
  4. Network error: Check your internet connection

Still having issues?

  1. Check console: Open browser DevTools (F12) → Console tab
  2. View network: Network tab → Look for failed requests
  3. Contact support: support@waitlistwidget.com

Next Steps

Now that your waitlist is live, explore these features:

Example Projects

Need working examples for your framework? Contact our support team at support@waitlistwidget.com and we'll provide you with:

  • ✅ HTML + Vanilla JavaScript starter
  • ✅ React integration example
  • ✅ Next.js App Router example
  • ✅ Vue.js component example

Questions? Email us at support@waitlistwidget.com - we typically respond within 24 hours!