# añade chat en vivo a una web con next.js
Añade el chat de Spookat a una app de Next.js, con app router o pages router, con su aspecto y opcionalmente el usuario con sesión iniciada, y comprueba que no hace ninguna petición a nuestra API antes de un clic.
2026-11-04 · Kuba
El chat en vivo en Next.js es una etiqueta script en el layout raíz. Esta guía muestra dónde va con el app router y con el pages router, cómo pasar el aspecto del widget y el usuario con sesión iniciada sin romper el orden de carga, qué añadir a una Content Security Policy y cómo comprobar el resultado en un build de producción.
## la versión corta
Con el app router, añade la etiqueta en `app/layout.tsx`, dentro de ``:
```tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Sustituye `YOUR_SITE_KEY` por la clave de la página de instalación del panel. Esa es toda la instalación cuando el aspecto vive en el panel, que es lo normal. El resto de la guía es para cuando quieres más control. Si empiezas de cero, la [guía principal](/es/blog/add-live-chat-to-your-website/) cubre la parte de la cuenta.
## por qué el layout raíz
El layout raíz envuelve cada ruta y se mantiene montado mientras el usuario navega. El lanzador se engancha a la página una sola vez. La navegación del lado del cliente no recarga la página, así que tampoco recarga el lanzador, y un visitante puede mantener una conversación abierta mientras hace clic por ahí.
Si pones la etiqueta en un componente de página, el chat solo existe en esa página. Si la pones en un componente que se renderiza en varias páginas, tendrás duplicados en las recargas completas (el lanzador ignora su propia segunda copia, pero sigue siendo una petición desperdiciada).
## con next/script
`next/script` es la forma de Next.js de cargar scripts de terceros, y aquí funciona bien:
```tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`afterInteractive` carga el lanzador justo después de la hidratación. `lazyOnload` espera a que el navegador esté inactivo, lo que retrasa un poco la aparición del botón en móviles lentos. Cualquiera de los dos va bien para un lanzador de 2 kb; `afterInteractive` muestra el botón antes. No uses `beforeInteractive` para el lanzador: competiría con tu propio código para nada.
## definir el aspecto en el código
El aspecto que publicas en el panel viaja dentro del lanzador. Si prefieres tenerlo en el repositorio, define `window.Spookat` antes de que se ejecute el lanzador. La configuración de la página tiene prioridad sobre la del panel.
El orden de carga importa: la configuración tiene que existir cuando el lanzador se ejecuta. Con `next/script`, dale `beforeInteractive` a la configuración (permitido en el layout raíz) y `afterInteractive` al lanzador:
```tsx
import Script from "next/script";
const spookat = { style: "clean", font: "system", accent: "#2F6FEB", side: "right" };
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Los scripts `beforeInteractive` se ejecutan antes de la hidratación y los `afterInteractive` después, así que el orden está garantizado. Las claves son las mismas que en cualquier otro sitio: `style` (uno de 8), `font`, `accent`, `side`, `greeting`, `label`, `lang`. La [documentación](/es/docs/) las lista todas.
## el pages router
Con el pages router, el envoltorio compartido es `pages/_app.tsx`:
```tsx
import type { AppProps } from "next/app";
import Script from "next/script";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
);
}
```
Para una configuración, en el pages router los scripts `beforeInteractive` van en `pages/_document.tsx`. Pon ahí el script de `window.Spookat`, dentro de ``, con el mismo `id` y la misma `strategy` que arriba, y deja el lanzador en `_app.tsx`.
## el usuario con sesión iniciada
Desde pro, puedes decirle al chat quién ha iniciado sesión. Tu equipo verá entonces `logged in as 42` en la tarjeta de Slack, y los webhooks, la exportación y el `read_convo` de tu agente llevan el id. El id se firma con un secreto que solo conoce tu servidor, así que nadie puede hacerse pasar por otra persona.
Crea el secreto de identidad en la página de instalación del panel, guárdalo en una variable de entorno y firma en el servidor. Con el app router, el layout raíz es un componente de servidor, lo que lo hace sencillo:
```tsx
import { createHmac } from "node:crypto";
import Script from "next/script";
import { getSession } from "@/lib/auth"; // yours
const sign = (id: string) => createHmac("sha256", process.env.SPOOKAT_IDENTITY_SECRET!).update(id).digest("hex");
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const session = await getSession();
const user = session ? { id: String(session.userId), sig: sign(String(session.userId)) } : undefined;
return (
{children}
{user && (
)}
);
}
```
Nunca calcules la firma en un componente de cliente: el secreto acabaría en el navegador. Una firma que falta o es incorrecta no es un error; el chat simplemente no dice quién es. Leer la sesión en el layout raíz hace que cada página se renderice por petición, así que si tu layout hoy es estático, valóralo antes de añadirlo.
## content security policy
Si tu app envía una cabecera `Content-Security-Policy`, el widget necesita:
- `script-src` y `style-src`: `https://cdn.spookat.com`
- `font-src`: `https://cdn.spookat.com`, si elegiste una fuente alojada
- `connect-src`: `wss://api.spookat.com`, para la conexión del chat después de un clic
- `img-src`: `data:`, para los logos y las fotos de tu equipo
- `style-src`: el lanzador inyecta un pequeño bloque `