One script tag, then mark your buttons.

<script src="https://knockbox-flame.vercel.app/w.js" data-app="YOUR_PUBLIC_KEY" defer></script>

<button data-knockbox="ai-insights">Your feature</button>

<!doctype html>
<html>
  <head>
    <!-- 1. Once per site -->
    <script src="https://knockbox-flame.vercel.app/w.js" data-app="YOUR_PUBLIC_KEY" defer></script>
  </head>
  <body>
    <!-- 2. On every button you want to test -->
    <button data-knockbox="ai-insights">AI insights</button>
  </body>
</html>

<!-- index.html (Vite) or public/index.html (CRA) -->
<head>
  <script src="https://knockbox-flame.vercel.app/w.js" data-app="YOUR_PUBLIC_KEY" defer></script>
</head>

// Any component. The widget picks the button up even if it renders late.
<button data-knockbox="ai-insights">AI insights</button>

// Alternative: load the script from a component, once.
import { useEffect } from "react";

export function useKnockbox() {
  useEffect(() => {
    if (document.querySelector("script[data-app]")) return;
    const s = document.createElement("script");
    s.src = "https://knockbox-flame.vercel.app/w.js";
    s.defer = true;
    s.dataset.app = "YOUR_PUBLIC_KEY";
    document.head.appendChild(s);
  }, []);
}

// Call useKnockbox() once in your root component (App.tsx).

// app/layout.tsx (Next.js App Router)
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://knockbox-flame.vercel.app/w.js"
          data-app="YOUR_PUBLIC_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

// Anywhere in a page or component:
// <button data-knockbox="ai-insights">AI insights</button>

Add the Knockbox widget to this app. It shows a "not available yet" popup that collects emails when someone clicks a feature that does not exist yet. Do exactly the following and nothing else.

1. Add this script tag ONCE, in the <head> of index.html (or in the root layout; if this is Next.js use next/script with strategy="afterInteractive"). Keep the src and the data-app value exactly as written:
<script src="https://knockbox-flame.vercel.app/w.js" data-app="YOUR_PUBLIC_KEY" defer></script>

2. For each feature listed at the end, find the existing button or link that would open it and add a data-knockbox attribute with the slug, for example:
<button data-knockbox="ai-insights">AI insights</button>
If the element is one of my own components, forward the attribute to the underlying DOM element. Slugs use lowercase letters, numbers and hyphens only.

3. Do NOT change any existing logic: keep onClick handlers, routes, styles, state and API calls as they are. If a feature has no button yet, tell me instead of inventing a page.

4. Do NOT add any API keys, environment variables, packages or backend code. The widget is a single script and needs none. YOUR_PUBLIC_KEY is a placeholder: leave it as is, I will replace it with my public key from the Knockbox dashboard.

5. When you finish, list the files you changed and the slugs you added.

Features to mark (button label -> slug):
- <label> -> <slug>
- <label> -> <slug>