Integration

This guide covers how to integrate WaitKit across different frameworks and environments.

The join endpoint and subscribers.create() method must be called from the browser (client-side). The join request collects the subscriber's IP address, country (via geolocation), and device type to power analytics. If you call it from a server route, API handler, or server component, every subscriber will appear to come from your deployment server's location, rendering the Countries and Devices analytics meaningless.

Vanilla JavaScript

Install the package and use it directly in a module script or bundle.

npm install waitkit

import { WaitKit } from "waitkit";

const wk = new WaitKit({
  apiKey: "wk_...",
  projectSlug: "my-project",
});

document.querySelector("#join-form")?.addEventListener("submit", async (e) => {
  e.preventDefault();
  const email = document.querySelector<HTMLInputElement>("#email")?.value;
  if (!email) return;

  await wk.subscribers.create({ email });
});

React

Use the React Hook for a declarative integration with loading and error state handling.

import { WaitKit } from "waitkit";
import { useWaitlist } from "waitkit/react";

const wk = new WaitKit({ apiKey: "wk_...", projectSlug: "my-project" });

function JoinForm() {
  const { join, count, isJoining, error } = useWaitlist(wk);

  return (
    <form onSubmit={() => join({ email: "user@example.com" })}>
      <button disabled={isJoining} type="submit">
        Join {count}
      </button>
      {error && <p>{error.message}</p>}
    </form>
  );
}

Next.js (App Router)

Use environment variables prefixed with NEXT_PUBLIC_ so they are accessible in the browser.

NEXT_PUBLIC_WAITKIT_API_KEY=wk_...
NEXT_PUBLIC_WAITKIT_PROJECT_SLUG=my-project

Create the client in a waitkit.ts file and use it from a client component.

// lib/waitkit.ts
import { WaitKit } from "waitkit";

export const wk = new WaitKit({
  apiKey: process.env.NEXT_PUBLIC_WAITKIT_API_KEY!,
  projectSlug: process.env.NEXT_PUBLIC_WAITKIT_PROJECT_SLUG!,
});

Mark your component with "use client" and call join from an event handler or form action.

"use client";

import { wk } from "@/lib/waitkit";
import { useWaitlist } from "waitkit/react";

export function JoinForm() {
  const { join, count, isJoining } = useWaitlist(wk);

  return (
    <button
      onClick={() => join({ email: "user@example.com" })}
      disabled={isJoining}
    >
      Join Waitlist ({count})
    </button>
  );
}

Do not call wk.subscribers.create() inside a Server Action, Route Handler, or getServerSideProps. The request must originate from the user's browser for accurate analytics. See the warning at the top of this page.

Other frameworks

The SDK works in any environment that supports fetch (Node 18+, browsers, Bun, Deno). The principles are the same regardless of framework:

Initialize the client on the client side
Keep the API key in client-accessible environment variables
Never proxy the join request through your own server

Integration

Vanilla JavaScript

React

Next.js (App Router)

Other frameworks

On this page