# coloque chat ao vivo num site next.js
Adicione o chat do Spookat a um app Next.js, no app router ou no pages router, com a aparência e, se quiser, o usuário logado, e confira que nenhuma requisição vai à nossa API antes de um clique.
2026-11-04 · Kuba
Chat ao vivo no Next.js é uma tag script no layout raiz. Este guia mostra onde ela vai no app router e no pages router, como passar a aparência do widget e o usuário logado sem bagunçar a ordem de carregamento, o que adicionar numa Content Security Policy e como conferir o resultado num build de produção.
## a versão curta
No app router, adicione a tag em `app/layout.tsx`, dentro de ``:
```tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Troque `YOUR_SITE_KEY` pela chave da página de instalação do painel. Essa é a instalação inteira quando a aparência fica no painel, que é o padrão. O resto deste guia é para quando você quer mais controle. Se está começando do zero, o [guia principal](/pt/blog/add-live-chat-to-your-website/) cobre a parte da conta.
## por que o layout raiz
O layout raiz envolve todas as rotas e continua montado enquanto o usuário navega. O botão do chat se prende à página uma vez só. A navegação do lado do cliente não recarrega a página, então também não recarrega o botão, e um visitante pode manter a conversa aberta enquanto clica pelo site.
Coloque a tag num componente de página e o chat só existe naquela página. Coloque num componente que renderiza em várias páginas e você ganha duplicatas nos recarregamentos completos (o botão ignora a própria segunda cópia, mas ainda é uma requisição desperdiçada).
## com next/script
`next/script` é o jeito Next.js de carregar scripts de terceiros, e funciona bem aqui:
```tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`afterInteractive` carrega o botão logo depois da hidratação. `lazyOnload` espera o navegador ficar ocioso, o que atrasa um pouco o aparecimento do botão em celulares lentos. Os dois servem para um botão de 2 kb; `afterInteractive` mostra o botão mais cedo. Não use `beforeInteractive` para o botão: ele disputaria espaço com o seu próprio código à toa.
## definindo a aparência no código
A aparência que você publica no painel vai dentro do botão. Se prefere manter no repositório, defina `window.Spookat` antes de o botão rodar. A configuração da página vale mais que a do painel.
A ordem de carregamento importa: a configuração precisa existir quando o botão executar. Com `next/script`, dê `beforeInteractive` para a configuração (permitido no layout raiz) e `afterInteractive` para o botão:
```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}
);
}
```
Scripts `beforeInteractive` rodam antes da hidratação e os `afterInteractive` depois, então a ordem é garantida. As chaves são as mesmas de qualquer outro lugar: `style` (um de 8), `font`, `accent`, `side`, `greeting`, `label`, `lang`. A [documentação](/pt/docs/) lista todas.
## o pages router
No pages router, o wrapper compartilhado é `pages/_app.tsx`:
```tsx
import type { AppProps } from "next/app";
import Script from "next/script";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
);
}
```
Para uma configuração, no pages router os scripts `beforeInteractive` ficam em `pages/_document.tsx`. Coloque o script do `window.Spookat` lá, dentro de ``, com o mesmo `id` e a mesma `strategy` de cima, e deixe o botão no `_app.tsx`.
## o usuário logado
A partir do pro, você pode dizer ao chat quem está logado. Sua equipe passa a ver `logged in as 42` no card do Slack, e os webhooks, a exportação e o `read_convo` do seu agente levam o id. O id é assinado com um segredo que só o seu servidor conhece, então ninguém consegue se passar por outra pessoa.
Crie o segredo de identidade na página de instalação do painel, coloque numa variável de ambiente e assine no servidor. No app router, o layout raiz é um componente de servidor, o que deixa isso simples:
```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 calcule a assinatura num componente de cliente: o segredo iria parar no navegador. Uma assinatura ausente ou errada não é um erro; o chat simplesmente não diz quem é. Ler a sessão no layout raiz faz toda página renderizar por requisição, então, se o seu layout é estático hoje, pense nisso antes de adicionar.
## content security policy
Se o seu app manda um cabeçalho `Content-Security-Policy`, o widget precisa de:
- `script-src` e `style-src`: `https://cdn.spookat.com`
- `font-src`: `https://cdn.spookat.com`, se você escolheu uma fonte hospedada
- `connect-src`: `wss://api.spookat.com`, para a conexão do chat depois de um clique
- `img-src`: `data:`, para os logos e as fotos da equipe
- `style-src`: o botão injeta um pequeno bloco `