# ajouter un live chat à un site next.js
Ajoutez le chat de Spookat à une application Next.js, avec l’app router ou le pages router, son apparence et éventuellement l’utilisateur connecté, et vérifiez qu’aucune requête ne part vers notre API avant un clic.
2026-11-04 · Kuba
Un live chat dans Next.js, c’est une balise script dans le layout racine. Ce guide montre où elle va avec l’app router et le pages router, comment transmettre l’apparence du widget et l’utilisateur connecté sans casser l’ordre de chargement, quoi ajouter à une Content Security Policy, et comment vérifier le résultat dans un build de production.
## la version courte
Avec l’app router, ajoutez la balise dans `app/layout.tsx`, à l’intérieur de `` :
```tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Remplacez `YOUR_SITE_KEY` par la clé affichée sur la page d’installation du tableau de bord. C’est toute l’installation quand l’apparence vit dans le tableau de bord, ce qui est le cas par défaut. La suite de ce guide sert quand vous voulez plus de contrôle. Si vous partez de zéro, le [guide de référence](/fr/blog/add-live-chat-to-your-website/) couvre la partie compte.
## pourquoi le layout racine
Le layout racine englobe chaque route et reste monté pendant que l’utilisateur navigue. Le lanceur s’attache une seule fois à la page. La navigation côté client ne recharge pas la page, donc elle ne recharge pas non plus le lanceur, et un visiteur peut garder une conversation ouverte en cliquant partout.
Mettez la balise dans un composant de page et le chat n’existe que sur cette page. Mettez-la dans un composant rendu sur plusieurs pages et vous obtenez des doublons lors des rechargements complets (le lanceur ignore sa deuxième copie, mais c’est quand même une requête gaspillée).
## avec next/script
`next/script` est la façon Next.js de charger des scripts tiers, et ça fonctionne bien ici :
```tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`afterInteractive` charge le lanceur juste après l’hydratation. `lazyOnload` attend que le navigateur soit inactif, ce qui retarde un peu l’apparition du bouton sur les téléphones lents. Les deux conviennent pour un lanceur de 2 kb ; `afterInteractive` affiche le bouton plus tôt. N’utilisez pas `beforeInteractive` pour le lanceur : il entrerait en concurrence avec votre propre code pour rien.
## définir l’apparence dans le code
L’apparence que vous publiez dans le tableau de bord voyage dans le lanceur. Si vous préférez la garder dans le dépôt, définissez `window.Spookat` avant que le lanceur ne s’exécute. La configuration de la page l’emporte sur celle du tableau de bord.
L’ordre de chargement compte : la configuration doit exister quand le lanceur s’exécute. Avec `next/script`, donnez `beforeInteractive` à la configuration (autorisé dans le layout racine) et `afterInteractive` au lanceur :
```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}
);
}
```
Les scripts `beforeInteractive` s’exécutent avant l’hydratation, les `afterInteractive` après, donc l’ordre est garanti. Les clés sont les mêmes que partout ailleurs : `style` (l’un des 8), `font`, `accent`, `side`, `greeting`, `label`, `lang`. La [documentation](/fr/docs/) les liste toutes.
## le pages router
Avec le pages router, l’enveloppe partagée est `pages/_app.tsx` :
```tsx
import type { AppProps } from "next/app";
import Script from "next/script";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
);
}
```
Pour une configuration, avec le pages router, les scripts `beforeInteractive` vont dans `pages/_document.tsx`. Mettez-y le script `window.Spookat`, dans ``, avec le même `id` et la même `strategy` que plus haut, et gardez le lanceur dans `_app.tsx`.
## l’utilisateur connecté
À partir de pro, vous pouvez indiquer au chat qui est connecté. Votre équipe voit alors `logged in as 42` sur la carte Slack, et les webhooks, l’export et le `read_convo` de votre agent transmettent l’identifiant. L’identifiant est signé avec un secret que seul votre serveur connaît, pour que personne ne puisse se faire passer pour quelqu’un d’autre.
Créez le secret d’identité sur la page d’installation du tableau de bord, placez-le dans une variable d’environnement et signez côté serveur. Avec l’app router, le layout racine est un composant serveur, ce qui rend la chose simple :
```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 && (
)}
);
}
```
Ne calculez jamais la signature dans un composant client : le secret partirait vers le navigateur. Une signature absente ou fausse n’est pas une erreur ; le chat n’indique simplement pas qui c’est. Lire la session dans le layout racine fait rendre chaque page à chaque requête ; si votre layout est statique aujourd’hui, pesez cela avant de l’ajouter.
## content security policy
Si votre application envoie un en-tête `Content-Security-Policy`, le widget a besoin de :
- `script-src` et `style-src` : `https://cdn.spookat.com`
- `font-src` : `https://cdn.spookat.com`, si vous avez choisi une police hébergée
- `connect-src` : `wss://api.spookat.com`, pour la connexion du chat après un clic
- `img-src` : `data:`, pour les logos et les photos de votre équipe
- `style-src` : le lanceur injecte un petit bloc `