Can I use the widget with TypeScript in React?

Yes. The component works as-is in TypeScript. Since the widget uses HTML data attributes, there are no additional type definitions needed. Simply rename the file to .tsx and the component will work without changes.

What if I want to add the script to index.html instead?

You can add the script tag directly to your public/index.html file before the closing body tag. Then you only need the widget div in your React component, without the useEffect hook. Both approaches work equally well.

Does the widget work with React Router?

Yes. Place the WaitlistWidget component on any route. The useEffect hook handles loading the script when the route mounts. If you navigate away and back, the script will reload automatically.

Can I pass dynamic props to the widget?

Yes. You can make the data attributes dynamic by passing props to the component. For example, pass the primary color or button text as props and set them on the div's data attributes. The widget reads these attributes when it initializes.

Integration

Add a Waitlist to Your React App - Launch Queue

Integrate a waitlist signup form into your React application with a useEffect hook and a simple div. Works with Create React App, Vite, and any React setup.

Get Started Free

Embed Code

component.jsx

import { useEffect } from 'react'

function WaitlistWidget() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://launchqueue.app/widget.js'
    script.async = true
    document.body.appendChild(script)

    return () => {
      document.body.removeChild(script)
    }
  }, [])

  return (
    <div
      data-lq-widget="signup"
      data-api-key="YOUR_API_KEY"
      data-project-id="YOUR_PROJECT_ID"
      data-primary-color="#3B82F6"
      data-button-text="Join the Waitlist"
    ></div>
  )
}

export default WaitlistWidget

Step-by-step Setup

Create a waitlist component

Create a new React component that loads the Launch Queue widget script using a useEffect hook. This ensures the script is loaded when the component mounts and cleaned up when it unmounts.

jsx

// src/components/WaitlistWidget.jsx
import { useEffect } from 'react'

function WaitlistWidget() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://launchqueue.app/widget.js'
    script.async = true
    document.body.appendChild(script)

    return () => {
      document.body.removeChild(script)
    }
  }, [])

  return (
    <div
      data-lq-widget="signup"
      data-api-key="YOUR_API_KEY"
      data-project-id="YOUR_PROJECT_ID"
      data-primary-color="#3B82F6"
      data-button-text="Join the Waitlist"
      data-collect-name="true"
    ></div>
  )
}

export default WaitlistWidget

Add the component to your page

Import and render the WaitlistWidget component wherever you want the signup form to appear in your application.

jsx

// src/pages/Waitlist.jsx
import WaitlistWidget from '../components/WaitlistWidget'

function WaitlistPage() {
  return (
    <main className="max-w-md mx-auto py-16">
      <h1 className="text-3xl font-bold mb-6">
        Join Our Waitlist
      </h1>
      <WaitlistWidget />
    </main>
  )
}

export default WaitlistPage

Test and deploy

Run your React development server to verify the widget loads and functions correctly. Then build and deploy your app to your hosting platform.

bash

# Test locally
npm start

# Build for production
npm run build

Why use Launch Queue with React

Clean integration using React's useEffect hook for script lifecycle management
Works with Create React App, Vite, Remix, and any React-based framework
Component-based approach — reuse the widget anywhere in your app
Automatic cleanup on unmount prevents memory leaks and duplicate scripts
Compatible with React 16.8+ (any version that supports hooks)

Frequently Asked Questions

Add a waitlist to your React site

Start your 14-day free trial. No credit card required.

Start Free Trial