OperatorStack Astro Integration: Waitlist, Analytics, and Forms on Any Astro Site

Open src/layouts/Layout.astro and add the script tag before </body>. Replace pk_your_project_key with your key from the OperatorStack dashboard.

---
// src/layouts/Layout.astro
interface Props {
  title: string;
}
const { title } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
  </head>
  <body>
    <slot />
    <script is:inline src="https://operatorstack.dev/os.js" data-project="pk_your_project_key"></script>
  </body>
</html>

The is:inline directive tells Astro to emit this script tag exactly as written, bypassing Vite processing. Without it, Astro may deduplicate, rebundle, or strip the data-project attribute entirely. The embed reads document.currentScript.dataset.project on init -- if that attribute is missing, the entire embed fails silently.

Add the widget div to any page or component.

---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
---

<Layout title="Join the waitlist">
  <main>
    <h1>Get early access</h1>
    <p>Join 400 founders waiting for launch.</p>
    <div data-os-widget="waitlist"></div>
  </main>
</Layout>

OperatorStack scans the DOM once the script loads and renders the signup form inside a Shadow DOM. No useEffect, no island, no extra JavaScript from your side.

Add a form and wire it up with a script block in the same .astro file.

---
// src/components/WaitlistForm.astro
---

<form id="waitlist-form">
  <input type="email" id="waitlist-email" placeholder="your@email.com" required />
  <button type="submit">Join waitlist</button>
</form>
<div id="share-links" style="display:none">
  <p>You are on the list. Share to move up:</p>
  <a id="share-twitter" href="#">Share on Twitter</a>
</div>

<script>
  const form = document.getElementById("waitlist-form") as HTMLFormElement;
  const shareSection = document.getElementById("share-links") as HTMLDivElement;

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const email = (document.getElementById("waitlist-email") as HTMLInputElement).value;

    const result = await window.OperatorStack.joinWaitlist({ email });

    window.OperatorStack.trackEvent("waitlist_signup", {
      source: document.referrer || "direct",
    });

    const links = window.OperatorStack.getShareLinks(result.referral_code, {
      text: "I just joined -- come check it out:",
    });

    (document.getElementById("share-twitter") as HTMLAnchorElement).href = links.twitter;
    form.style.display = "none";
    shareSection.style.display = "block";
  });
</script>

This pattern works for any Astro site, including fully static (SSG) projects. The <script> block runs in the browser after the layout script loads, so window.OperatorStack is available.

Create a React island component and import it into the page with client:load.

// src/components/WaitlistSignup.tsx
import { useState } from "react";

declare global {
  interface Window {
    OperatorStack: {
      joinWaitlist: (p: { email: string }) => Promise<{ referral_code: string }>;
      getShareLinks: (code: string, opts?: { text?: string }) => { twitter: string; copy: string };
      trackEvent: (name: string, data?: Record<string, unknown>) => void;
    };
  }
}

export function WaitlistSignup() {
  const [email, setEmail] = useState("");
  const [shareLinks, setShareLinks] = useState<{ twitter: string; copy: string } | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    const result = await window.OperatorStack.joinWaitlist({ email });
    window.OperatorStack.trackEvent("waitlist_signup", { source: document.referrer || "direct" });
    const links = window.OperatorStack.getShareLinks(result.referral_code, {
      text: "Joining early -- get in line:",
    });
    setShareLinks(links);
    setLoading(false);
  }

  if (shareLinks) {
    return (
      <div>
        <p>You are on the list. Share to move up.</p>
        <a href={shareLinks.twitter}>Tweet your link</a>
        <button onClick={() => navigator.clipboard.writeText(shareLinks.copy)}>Copy link</button>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="your@email.com"
        required
      />
      <button type="submit" disabled={loading}>
        {loading ? "Joining..." : "Join waitlist"}
      </button>
    </form>
  );
}

Then use it in an Astro page:

---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
import { WaitlistSignup } from '../components/WaitlistSignup';
---

<Layout title="Join the waitlist">
  <main>
    <h1>Get early access</h1>
    <WaitlistSignup client:load />
  </main>
</Layout>

The client:load directive hydrates the island immediately on page load. client:idle waits for the browser's idle callback, which works for non-critical UI but can cause a visible delay on the waitlist form itself -- stick with client:load here.