Una etiqueta de script y luego marcas tus botones.

<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. Una vez por sitio -->
    <script src="https://knockbox-flame.vercel.app/w.js" data-app="YOUR_PUBLIC_KEY" defer></script>
  </head>
  <body>
    <!-- 2. En cada botón que quieras probar -->
    <button data-knockbox="ai-insights">Análisis con IA</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>

// Cualquier componente. El widget detecta el botón aunque se renderice tarde.
<button data-knockbox="ai-insights">Análisis con IA</button>

// Alternativa: carga el script desde un componente, una sola vez.
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);
  }, []);
}

// Llama a useKnockbox() una sola vez en tu componente raíz (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="es">
      <body>
        {children}
        <Script
          src="https://knockbox-flame.vercel.app/w.js"
          data-app="YOUR_PUBLIC_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

// En cualquier página o componente:
// <button data-knockbox="ai-insights">Análisis con IA</button>

Agrega el widget de Knockbox a esta app. Muestra un aviso de "todavía no disponible" que recoge correos cuando alguien hace clic en una función que aún no existe. Haz exactamente lo siguiente y nada más.

1. Agrega esta etiqueta de script UNA SOLA VEZ, en el <head> de index.html (o en el layout raíz; si es Next.js usa next/script con strategy="afterInteractive"). Conserva el src y el valor de data-app exactamente como están escritos:
<script src="https://knockbox-flame.vercel.app/w.js" data-app="YOUR_PUBLIC_KEY" defer></script>

2. Para cada función de la lista del final, busca el botón o enlace existente que la abriría y agrégale un atributo data-knockbox con el slug, por ejemplo:
<button data-knockbox="ai-insights">Análisis con IA</button>
Si el elemento es un componente mío, reenvía el atributo al elemento DOM de fondo. Los slugs usan solo letras minúsculas, números y guiones.

3. NO cambies ninguna lógica existente: conserva los onClick, las rutas, los estilos, el estado y las llamadas a la API tal como están. Si una función todavía no tiene botón, avísame en lugar de inventar una página.

4. NO agregues claves de API, variables de entorno, paquetes ni código de backend. El widget es un solo script y no necesita nada de eso. YOUR_PUBLIC_KEY es un marcador de posición: déjalo tal cual, yo lo reemplazaré por mi clave pública del panel de Knockbox.

5. Al terminar, lista los archivos que cambiaste y los slugs que agregaste.

Funciones para marcar (texto del botón -> slug):
- <texto> -> <slug>
- <texto> -> <slug>