# live chat op een next.js-site
Voeg de chat van Spookat toe aan een Next.js-app, met de app router of de pages router, met de look en eventueel de ingelogde gebruiker, en controleer dat er voor een klik geen verzoek naar onze API gaat.
2026-11-04 · Kuba
Live chat in Next.js is één script-tag in de root-layout. Deze gids laat zien waar die komt in de app router en de pages router, hoe je de look van de widget en de ingelogde gebruiker doorgeeft zonder de laadvolgorde te breken, wat er in een Content Security Policy moet en hoe je het resultaat controleert in een productiebuild.
## de korte versie
In de app router voeg je de tag toe aan `app/layout.tsx`, binnen ``:
```tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Vervang `YOUR_SITE_KEY` door de key van de installatiepagina in het dashboard. Dat is de hele installatie als de look in het dashboard staat, en dat is de standaard. De rest van deze gids is voor als je meer controle wilt. Begin je vanaf nul, dan behandelt de [basisgids](/nl/blog/add-live-chat-to-your-website/) de accountkant.
## waarom de root-layout
De root-layout omsluit elke route en blijft gemount terwijl de gebruiker navigeert. De launcher hecht zich één keer aan de pagina. Navigatie aan de clientkant herlaadt de pagina niet, dus ook de launcher niet, en een bezoeker kan een gesprek openhouden terwijl die rondklikt.
Zet je de tag in een paginacomponent, dan bestaat de chat alleen op die pagina. Zet je hem in een component dat op meerdere pagina's rendert, dan krijg je bij harde reloads dubbele exemplaren (de launcher negeert zijn eigen tweede kopie, maar het blijft een verspild request).
## met next/script
`next/script` is de Next.js-manier om scripts van derden te laden, en het werkt hier prima:
```tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`afterInteractive` laadt de launcher direct na de hydration. `lazyOnload` wacht tot de browser idle is, waardoor de knop op trage telefoons iets later verschijnt. Beide zijn prima voor een launcher van 2 kb; `afterInteractive` toont de knop eerder. Gebruik geen `beforeInteractive` voor de launcher: die zou voor niets met je eigen code concurreren.
## de look in code instellen
De look die je in het dashboard publiceert, zit in de launcher. Hou je hem liever in de repo, zet dan `window.Spookat` voordat de launcher draait. De config van de pagina wint van die van het dashboard.
De laadvolgorde telt: de config moet bestaan als de launcher wordt uitgevoerd. Met `next/script` geef je de config `beforeInteractive` (toegestaan in de root-layout) en de launcher `afterInteractive`:
```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}
);
}
```
`beforeInteractive`-scripts draaien voor de hydration, `afterInteractive`-scripts erna, dus de volgorde is gegarandeerd. De keys zijn dezelfde als overal: `style` (een van 8), `font`, `accent`, `side`, `greeting`, `label`, `lang`. De [docs](/nl/docs/) noemen ze allemaal.
## de pages router
In de pages router is de gedeelde wrapper `pages/_app.tsx`:
```tsx
import type { AppProps } from "next/app";
import Script from "next/script";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
);
}
```
Voor een config horen `beforeInteractive`-scripts in de pages router in `pages/_document.tsx`. Zet het `window.Spookat`-script daar, binnen ``, met dezelfde `id` en `strategy` als hierboven, en laat de launcher in `_app.tsx`.
## de ingelogde gebruiker
Vanaf pro kun je de chat vertellen wie er ingelogd is. Je team ziet dan `logged in as 42` op de Slack-kaart, en webhooks, de export en `read_convo` van je agent dragen de id mee. De id wordt ondertekend met een secret dat alleen jouw server kent, zodat niemand zich als iemand anders kan voordoen.
Maak het identity-secret op de installatiepagina van het dashboard, zet het in een omgevingsvariabele en onderteken op de server. In de app router is de root-layout een servercomponent, en dat maakt het eenvoudig:
```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 && (
)}
);
}
```
Bereken de handtekening nooit in een clientcomponent: dan zou het secret naar de browser gaan. Een ontbrekende of verkeerde handtekening is geen fout; de chat zegt dan gewoon niet wie het is. Lees je de sessie in de root-layout, dan rendert elke pagina per request. Is je layout nu statisch, weeg dat dan af voordat je het toevoegt.
## content security policy
Stuurt je app een `Content-Security-Policy`-header, dan heeft de widget nodig:
- `script-src` en `style-src`: `https://cdn.spookat.com`
- `font-src`: `https://cdn.spookat.com`, als je een gehost font koos
- `connect-src`: `wss://api.spookat.com`, voor de chatverbinding na een klik
- `img-src`: `data:`, voor logo's en foto's van je teamgenoten
- `style-src`: de launcher voegt een klein `