coloque chat ao vivo num site em html puro

30 de setembro de 2026 · por kuba · 7 min de leitura

Um site em HTML puro precisa de exatamente uma linha para ter chat ao vivo: uma tag script antes de </body>. Este guia mostra onde essa linha vai em páginas escritas à mão e em sites feitos com um gerador estático, todas as opções que você pode definir junto com ela e como conferir no navegador que nada carrega antes de um clique.

a linha

<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

A chave do seu site está na página de instalação do painel, já colocada no snippet, com um botão para copiar. Ela começa com site_live_ e é pública: já aparece no código-fonte da sua página de qualquer jeito, e só funciona no domínio que você registrou.

O arquivo que ela carrega é o botão do chat: um botão, os estilos dele e a aparência que você publicou no painel. Ele tem menos de 4 kb com gzip (acima disso, o build falha). Faz 0 requisições à nossa API e não cria cookies. O painel do chat e a conexão com o nosso servidor só carregam quando um visitante clica.

Chegando agora nesse assunto? O guia principal explica quanto um widget de chat custa para uma página e o que observar.

onde ela vai

Logo antes da tag de fechamento </body>:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My site</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <h1>Hello</h1>
    <p>Everything else on your page.</p>

    <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
  </body>
</html>

Por que ali, e por que async:

No fim do body, a tag não segura nada que está acima dela. O navegador já viu o seu conteúdo quando chega nela.
async diz ao navegador para buscar o arquivo em segundo plano e executá-lo quando chegar, sem pausar a página. Mantenha.

toda página, uma vez

O chat deve estar em toda página onde um visitante pode ter uma dúvida, o que geralmente quer dizer todas. Como colocar ele lá depende de como o site é feito.

Páginas escritas à mão. Cole a tag em cada arquivo .html. Procure </body> na pasta para achar todos. Quando você criar uma página depois, copie uma existente como ponto de partida e a tag vem junto.

Um rodapé compartilhado. Se suas páginas incluem um arquivo de rodapé comum (um include do servidor, um include do PHP, um partial de template), coloque a tag lá uma vez só.

Geradores de site estático. Coloque no layout base, o template que toda página herda:

gerador	arquivo
Jekyll	`_layouts/default.html`, ou `_includes/footer.html`
Hugo	`layouts/_default/baseof.html`, ou um partial de rodapé
Eleventy	seu layout base em `_includes/`
Astro	o componente de layout base
Pandoc, scripts próprios	o template HTML que você passa

Não se preocupe com uma página que acabe com a tag duas vezes: o botão verifica se já está na página e a segunda cópia não faz nada. Ainda assim é uma requisição desperdiçada, então deixe uma só.

configurando no código

A aparência que você escolhe no painel vai dentro do botão, então a linha acima é a instalação inteira. Se você prefere manter as configurações no seu HTML, defina window.Spookat num script acima da tag:

<script>
  window.Spookat = {
    style: "clean",
    font: "system",
    accent: "#2F6FEB",
    side: "right",
    greeting: "hi. questions about an order? ask here.",
    lang: "en"
  };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

Se a página e o painel discordarem, vale a página. O que cada chave faz:

chave	o que aceita	o que faz
`style`	um de 8 estilos	a aparência. `brutal`, `clean`, `glass`, `soft`, `terminal`, `paper`, `retro`, `swiss`
`font`	`"system"` ou uma de 17 fontes hospedadas	a fonte do widget. `system` não baixa nada; as fontes hospedadas carregam da nossa CDN depois do clique, nunca do Google
`accent`	`"#RRGGBB"`	a cor da sua marca. A cor do texto por cima é escolhida pelo contraste
`side`	`"right"` ou `"left"`	onde o botão fica
`greeting`	texto, até 200 caracteres	a primeira mensagem que o visitante vê. Vazio quer dizer a do estilo
`label`	texto, até 40 caracteres	transforma o botão redondo numa pílula com esse texto
`lang`	um código de idioma, como `"en"` ou `"pl"`	o idioma do widget. Padrão: o do navegador do visitante, depois inglês
`user`	`{ id, sig }`, a partir do cool guy	quem está logado, assinado no seu servidor

A documentação tem a referência completa, incluindo como assinar user.

um site multilíngue

Se o seu site tem uma pasta por idioma (/en/, /pl/), defina lang por pasta para o widget combinar com a página, não com o navegador. O widget fala 12 idiomas. Sua equipe vê o idioma do visitante em cada chat.

um botão que diz alguma coisa

Um site simples costuma ter uma pergunta clara que os visitantes fazem: “vocês entregam em…”, “posso reservar…”. Um label como "questions? ask a human" transforma o ícone numa pequena pílula que diz isso. Mantenha curto; no celular ele também fica no canto.

o que o visitante recebe

Um botão no canto, nas suas cores. Clicar abre o painel com a sua saudação e uma linha dizendo que uma pessoa responde. Ele digita; a mensagem chega na sua thread do Slack ou do Discord, ou na nossa caixa de entrada e no app de celular; sua resposta volta para o widget. Se ele sair antes de você responder e tiver deixado um e-mail, o cool guy e os planos acima mandam a resposta por e-mail. O chat fica no aparelho dele entre trocas de página e visitas futuras, até o histórico expirar (30 dias no broke af).

confira

Abra seu site numa janela anônima, para não ter cache nem armazenamento antigos no meio. Depois abra o DevTools (F12, ou clique direito e Inspecionar).

Network. Marque “Disable cache”, recarregue e digite spookat no filtro. Uma requisição: o botão vindo de cdn.spookat.com, cerca de 2 kb transferidos. Duas, ambas de cdn.spookat.com, se o seu código define em window.Spookat um estilo diferente do que você publicou. Nada para api.spookat.com.
Application (Armazenamento no Firefox). Cookies: nada do Spookat. Local storage: nada ainda. Uma chave só aparece depois que você envia a primeira mensagem; ela guarda seu chat naquele aparelho.
Clique no botão do chat. Agora o script do painel e a folha de estilo do seu estilo carregam da CDN, e depois o chat conecta. Envie uma mensagem de teste e veja chegar no Slack ou no Discord.

Se o botão não aparecer:

Nada na aba Network. A tag não está nesta página, está dentro de um comentário HTML, ou seu build removeu ela. Veja o código-fonte da página e procure spookat.
A requisição falha. Uma chave com o tamanho errado recebe um 404 da CDN. Compare a chave na URL com a do painel.
O botão aparece no visual padrão e nunca conecta. Com um caractere errado na chave, o botão carrega mesmo assim. Compare a chave com a do painel.
O botão aparece, mas o chat não conecta. Você está num domínio diferente do registrado: um arquivo local, localhost ou um host de homologação. O chat só conecta no seu domínio e nos subdomínios dele.
Uma Content Security Policy bloqueia. O console mostra a diretiva. Libere https://cdn.spookat.com para scripts, estilos e fontes, wss://api.spookat.com para a conexão e data: para imagens, já que logos e fotos da equipe são imagens data:. O botão também injeta um pequeno bloco <style> no próprio shadow root, então style-src precisa permitir estilos inline para ele. Se você define window.Spookat num script inline, dê a esse script o nonce ou o hash da sua política.

o que não adicionar

Sites em HTML puro são rápidos porque nada fica no caminho. Mantenha assim:

Nada de gerenciador de tags só para o chat. É um script que carrega scripts, e pesa mais que o botão.
Nada de preload ou prefetch para o painel. Isso jogaria o download do painel para antes do clique, para cada visitante.
Nada de malabarismo com defer mais async. Só async é o certo para esta tag.
Nada de script que abre o chat depois de alguns segundos. Ele carrega o painel inteiro para todo mundo e cobre sua página no celular. Uma saudação faz o mesmo trabalho quando alguém abre o chat de verdade.

a hospedagem não importa

GitHub Pages, Netlify, Cloudflare Pages, uma pasta FTP numa hospedagem compartilhada, um servidor no armário: a tag é HTML puro, então funciona onde quer que seus arquivos sejam servidos. Sem build, sem pacote, sem código de servidor.

conecte as respostas

Último passo: conecte o Slack ou o Discord no painel e escolha um canal, ou pule isso e responda na nossa caixa de entrada e no app de celular. Cada visitante ganha sua própria thread, qualquer pessoa no canal pode responder e não existem assentos. Custa $4.99 por mês por site no broke af.

checklist

Uma tag, com async, antes de </body>, em toda página (ou uma vez no layout compartilhado).
Opcional: window.Spookat acima dela, se você mantém as configurações no código.
Conferido numa janela anônima: uma requisição antes do clique (duas, ambas de cdn.spookat.com, se o seu código define um estilo que você não publicou), nenhum cookie.
Uma mensagem de teste do widget chegou no Slack ou no Discord.

O teste dura 14 dias e não pede cartão. Cole a linha, e o seu site estático já consegue responder perguntas.