# dodaj live chat do strony w next.js
Wepnij czat Spookat w appkę Next.js, w app routerze albo pages routerze, z wyglądem i opcjonalnie zalogowanym userem, i sprawdź, że przed kliknięciem nie leci ani jeden request do naszego API.
2026-11-04 · Kuba
Live chat w Next.js to jeden tag script w głównym layoucie. Z tego poradnika dowiesz się, gdzie go dać w app routerze i w pages routerze, jak przekazać wygląd widżetu i zalogowanego usera bez psucia kolejności ładowania, co dopisać do Content Security Policy i jak sprawdzić efekt na produkcyjnym buildzie.
## wersja krótka
W app routerze dodaj tag do `app/layout.tsx`, wewnątrz ``:
```tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Zamiast `YOUR_SITE_KEY` wstaw klucz ze strony instalacji w dashboardzie. To cała instalacja, jeśli wygląd siedzi w dashboardzie, a tak jest domyślnie. Reszta poradnika jest na wypadek, gdy chcesz mieć więcej kontroli. Jeśli zaczynasz od zera, [główny poradnik](/pl/blog/add-live-chat-to-your-website/) ogarnia stronę kontową.
## czemu główny layout
Główny layout owija każdą ścieżkę i zostaje zamontowany, kiedy user nawiguje. Launcher podpina się do strony raz. Nawigacja po stronie klienta nie przeładowuje strony, więc nie przeładowuje też launchera, a odwiedzający może mieć otwartą rozmowę, klikając dalej.
Wrzuć tag do komponentu strony, a czat będzie istniał tylko na tej stronie. Wrzuć go do komponentu, który renderuje się na kilku stronach, a przy twardych przeładowaniach dostaniesz duplikaty (launcher ignoruje swoją drugą kopię, ale to i tak zmarnowany request).
## z next/script
`next/script` to next.js-owy sposób ładowania skryptów z zewnątrz i tutaj działa bez problemu:
```tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`afterInteractive` ładuje launcher zaraz po hydracji. `lazyOnload` czeka, aż przeglądarka będzie bezczynna, co na wolnych telefonach trochę opóźnia pojawienie się przycisku. Przy 2 kb launchera oba są okej; `afterInteractive` szybciej pokazuje przycisk. Nie używaj `beforeInteractive` do launchera: konkurowałby z twoim kodem za nic.
## wygląd w kodzie
Wygląd opublikowany w dashboardzie jedzie w środku launchera. Jeśli wolisz trzymać go w repo, ustaw `window.Spookat`, zanim launcher się odpali. Konfiguracja ze strony wygrywa z dashboardem.
Kolejność ładowania ma znaczenie: konfiguracja musi istnieć, kiedy launcher się wykonuje. Z `next/script` daj konfiguracji `beforeInteractive` (dozwolone w głównym layoucie), a launcherowi `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}
);
}
```
Skrypty `beforeInteractive` odpalają się przed hydracją, `afterInteractive` po niej, więc kolejność jest pewna. Klucze są te same co wszędzie: `style` (jeden z 8), `font`, `accent`, `side`, `greeting`, `label`, `lang`. [Dokumentacja](/pl/docs/) wymienia wszystkie.
## pages router
W pages routerze wspólny wrapper to `pages/_app.tsx`:
```tsx
import type { AppProps } from "next/app";
import Script from "next/script";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
);
}
```
W pages routerze skrypty `beforeInteractive` należą do `pages/_document.tsx`. Daj tam skrypt z `window.Spookat`, wewnątrz ``, z tym samym `id` i `strategy` co wyżej, a launcher zostaw w `_app.tsx`.
## zalogowany user
Na pro i wyżej możesz powiedzieć czatowi, kto jest zalogowany. Twój zespół widzi wtedy `logged in as 42` na karcie na Slacku, a webhooki, eksport i `read_convo` twojego agenta niosą to id. Id jest podpisane sekretem, który zna tylko twój serwer, więc nikt nie podszyje się pod kogoś innego.
Zrób sekret tożsamości na stronie instalacji w dashboardzie, wrzuć go do zmiennej środowiskowej i podpisuj na serwerze. W app routerze główny layout to server component, co wszystko upraszcza:
```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 && (
)}
);
}
```
Nigdy nie licz podpisu w client componencie: sekret poleciałby do przeglądarki. Brak podpisu albo zły podpis to nie błąd; czat po prostu nie mówi, kto pisze. Czytanie sesji w głównym layoucie sprawia, że każda strona renderuje się per request, więc jeśli twój layout jest dziś statyczny, przemyśl to, zanim to dodasz.
## content security policy
Jeśli twoja appka wysyła nagłówek `Content-Security-Policy`, widżet potrzebuje:
- `script-src` i `style-src`: `https://cdn.spookat.com`
- `font-src`: `https://cdn.spookat.com`, jeśli wybrałeś font hostowany u nas
- `connect-src`: `wss://api.spookat.com`, na połączenie czatu po kliknięciu
- `img-src`: `data:`, na logo i zdjęcia ludzi z zespołu
- `style-src`: launcher wstrzykuje jeden mały blok `