como colocar chat ao vivo no seu site sem deixar ele mais lento

27 de setembro de 2026 · por kuba · 9 min de leitura

Um chat ao vivo deveria custar quase nada para a sua página até um visitante realmente querer conversar. Este guia mostra o que um widget de chat carrega antes do primeiro clique, o que conferir antes de escolher um, como instalar o Spookat em poucos minutos e como provar no DevTools que sua página continuou rápida.

A maioria dos visitantes nunca abre o chat. Eles leem, rolam a página, talvez comprem e vão embora. Tudo o que o widget carrega junto com a página, cada um deles paga mesmo assim, inclusive quem está num celular barato com sinal fraco.

Esse custo tem quatro partes:

Bytes. JavaScript, CSS, fontes, imagens e muitas vezes um iframe com o próprio documento. JavaScript é o tipo caro: o navegador baixa, interpreta e executa na thread principal, a mesma que cuida da rolagem e dos toques.
Requisições. Cada requisição é uma ida e volta, e requisições para domínios novos ainda pagam uma consulta de DNS e um handshake TLS. Um widget que chama o servidor dele no carregamento soma tudo isso a cada visualização de página.
Armazenamento. Cookies, localStorage e IndexedDB gravados antes de qualquer interação. Na UE, isso pode decidir se você precisa de consentimento antes mesmo de o widget carregar.
Tempo na thread principal. O código que roda na inicialização disputa espaço com o seu próprio código. O Lighthouse mostra isso como Total Blocking Time, e aparece na sua nota.

Os quatro widgets das nossas páginas de comparação carregavam entre 220 e 509 kb com gzip antes de alguém clicar. Medimos isso em 2026-09-26 carregando cada widget numa página de teste vazia e somando os bytes transferidos; os números e as fontes estão em /vs. Para comparar, o texto deste artigo inteiro tem menos de 20 kb.

Nada disso é necessário para mostrar um botão. Um botão são algumas centenas de bytes de HTML e CSS. Todo o resto (o painel do chat, a conexão com um servidor, o histórico) só é necessário depois que alguém clica.

Dá para avaliar qualquer widget de chat com um navegador e dez minutos. Veja o que olhar, na ordem de quanto isso afeta seus visitantes.

o peso antes do clique

Abra a página de demonstração do fornecedor ou o seu próprio site de homologação, abra o DevTools e recarregue com o cache desativado. Filtre a aba Network pelos domínios do fornecedor e some o tamanho transferido. Qualquer coisa acima de alguns kilobytes antes de um clique é código que seus visitantes baixam para um painel que a maioria nunca abre.

requisições antes do clique, e para quem

Conte as requisições e anote os domínios. Um widget que conversa com a API dele no carregamento envia algo sobre cada visitante, no mínimo que ele existe e em qual página está. Alguns também carregam analytics ou rastreamento de erros de terceiros.

cookies e armazenamento antes do clique

Olhe a aba Application depois de um carregamento limpo, sem tocar no widget. Cookies definidos pelos domínios do widget, ou chaves de armazenamento que ele gravou, são os que um banner de consentimento talvez precise cobrir. Não somos seus advogados, e as regras mudam de país para país, então pergunte aos seus o que vale para o seu site. O caso mais fácil de explicar é um widget que não guarda nada até o visitante começar um chat.

onde sua equipe responde

Um chat é tão bom quanto a resposta. Se responder significa abrir mais um painel, alguém precisa deixar essa aba aberta o dia todo. Se os chats chegam onde sua equipe já conversa (Slack, Discord), uma resposta é uma mensagem numa thread.

quanto custa quando a equipe cresce

Preço por assento cobra cada pessoa que pode responder. Preço por resolução cobra cada resposta. Preço por site cobra o site, não importa quem responde nem quantas vezes.

o celular

Confira o botão do chat numa tela de 375 px de largura. Ele não deve cobrir seus próprios botões e precisa ter pelo menos 44 px para um polegar acertar. Abra o painel e digite: o teclado não deve esconder o campo de texto.

passo a passo: chat ao vivo com o spookat

O Spookat foi construído em volta dessas checagens. O snippet carrega um botão pequeno da nossa CDN, com a aparência do seu site já dentro. Ele faz 0 requisições à nossa API antes de um clique e não cria cookies. Sua equipe responde numa thread do Slack ou num post de fórum do Discord. Custa $4.99 por mês por site no broke af, com colegas de equipe ilimitados, e o teste dura 14 dias sem cartão.

1. pegue seu snippet

Entre no painel e adicione seu site. A página de instalação mostra seu snippet com a chave do site já preenchida e um botão para copiar. Você pode abrir a página direto com o seu domínio no endereço:

https://app.spookat.com/install?domain=your-domain.com

2. cole antes da tag body de fechamento

Uma tag, em qualquer lugar da página, de preferência logo antes de </body>:

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

async quer dizer que o navegador continua renderizando sua página enquanto busca o arquivo e executa quando ele chega. O arquivo é o botão do chat: um botão, os estilos dele e a aparência que você publicou no painel. O build dele falha se passar de 4 kb com gzip. Em 2026-09-27, ele tinha 2,0 kb.

Se o seu site é uma single-page app, coloque a tag no template HTML raiz, não num componente que renderiza de novo. O botão verifica se já existe, então uma segunda cópia não faz nada, mas uma tag num lugar só é mais fácil de entender.

3. escolha uma aparência

São 8 estilos e 12 fontes hospedadas por nós, mais a fonte do sistema do visitante. Escolha no painel e publique; o botão pega a nova aparência em menos de um minuto. Ou defina na própria página, acima do snippet, onde ela vale mais que o painel:

<script>
  window.Spookat = { style: "clean", font: "system", accent: "#2F6FEB", side: "right" };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

font: "system" não baixa fonte nenhuma. Qualquer outra fonte vem da nossa CDN, só depois do clique, nunca do Google. accent aceita uma cor hexadecimal, e a cor do texto por cima é escolhida pelo contraste. A lista completa de chaves está na documentação.

4. conecte o slack ou o discord

No painel, conecte um canal. Você aprova a conexão no próprio Slack ou Discord e depois escolhe o canal numa lista. Não é admin do workspace? O painel te dá um link de uso único para quem é, válido por 7 dias, e essa pessoa não precisa de conta no Spookat.

A partir daí, cada conversa vira uma thread no Slack ou um post de fórum no Discord.

5. responda pela thread

Responda na thread e o visitante vê no widget. Uma mensagem que começa com // fica interna, então você pode perguntar algo a um colega sem o visitante ler. Os visitantes veem seu primeiro nome do Slack ou seu apelido do Discord; /spookat me mostra ou muda isso, por site.

Se o visitante saiu antes da sua resposta e deixou um e-mail, o cool guy e os planos acima mandam a resposta por e-mail, no idioma do widget. No broke af, a resposta espera no widget até a próxima visita.

ou: deixe seu agente fazer tudo

Se você programa com Claude Code, Cursor ou outro agente de código, cole isto e deixe ele ler o manual:

Add Spookat chat to my site. Read https://spookat.com/llms.txt first, then match the chat style to my site.

O agente encontra seu template raiz, adiciona o snippet e escolhe um estilo que combina com seu site. Conectar o Slack ou o Discord e pagar continuam com você: uma pessoa aprova as duas coisas.

confira no devtools

Não acredite na palavra de nenhum fornecedor, nem na nossa. Veja como conferir sua própria página no Chrome. Firefox e Safari têm os mesmos painéis com nomes um pouco diferentes.

a aba network, antes do clique

Abra sua página numa janela anônima, para não ter armazenamento nem cache antigos no meio.
Abra o DevTools, vá em Network, marque “Disable cache” e recarregue.
Digite spookat no campo de filtro.

Você deve ver uma requisição: o botão vindo de cdn.spookat.com, cerca de 2 kb transferidos. Nada vai para api.spookat.com. Se aparecer mais que isso, outra coisa na página carregou o botão (um segundo snippet num gerenciador de tags, por exemplo).

a aba application, antes do clique

Abra Application e depois Cookies e Local storage do seu domínio. O Spookat não grava nada aqui no carregamento da página. Ele não cria nenhum cookie, nunca. A única chave de armazenamento que usa, spookat: seguida da chave do seu site, só é gravada depois que o visitante envia a primeira mensagem: ela guarda o chat dele naquele aparelho.

depois do clique

Limpe o log de Network e clique no botão do chat. Agora o painel carrega da CDN: o script dele (16,6 kb com gzip em 2026-09-27) e a folha de estilo do seu estilo (cerca de 2 kb). Uma fonte também vem, se você escolheu uma. Depois o painel abre uma conexão com a nossa API e o visitante pode digitar.

Esse é o truque todo: a parte cara vai para depois do clique, e só os visitantes que querem conversar baixam ela.

lighthouse

Rode o Lighthouse no modo mobile na página sem o snippet e com ele, algumas vezes cada, e compare as medianas. A mesma página varia vários pontos de uma execução para outra, então uma execução só não prova nada para nenhum lado. Com um botão de 2 kb e nenhum trabalho antes do clique, a diferença deve ficar dentro desse ruído.

Um botão pequeno só continua pequeno se a página em volta deixar. Estes são os erros que mais vemos, e cada um desfaz em silêncio o trabalho acima.

Abrir o chat sozinho. Um painel que abre sozinho depois de dez segundos carrega o chat inteiro para cada visitante, inclusive os que estavam prestes a comprar. No celular, ele ainda cobre a página. Se você quer puxar conversa, escreva uma saudação; ela aparece quando a pessoa abre o chat.

Pré-carregar o painel “para ficar mais rápido”. Um <link rel="preload"> ou prefetch para o script do painel joga o download dele de volta para antes do clique, para todo mundo. Depois do clique são duas requisições curtas para uma CDN perto do visitante. Deixe elas esperarem o clique.

Colocar dentro de um gerenciador de tags. Um gerenciador de tags é um script que carrega outros scripts. Se ele só existe para guardar o snippet do chat, custa mais que o próprio chat. Coloque a tag direto no seu template.

Dois snippets. Um tema adiciona um, um plugin adiciona outro, alguém cola um terceiro no rodapé. O botão ignora as próprias cópias, mas outros widgets muitas vezes não, e você acaba com dois chats disputando o mesmo canto. Procure cdn.spookat.com (ou o domínio do seu fornecedor antigo) nos seus templates e fique com um só.

o que acontece com os dados

Quando um visitante envia uma mensagem, ela é salva primeiro e depois publicada na sua thread do Slack ou no seu post do Discord. Nunca guardamos endereço IP. O país do visitante é consultado numa base de dados offline no momento da mensagem, e o endereço não é mantido. O histórico do chat fica guardado 30 dias no broke af, 90 no cool guy e 365 no vc money, e depois é apagado. Os detalhes, incluindo os suboperadores, estão na página de privacidade.

uma checklist para reutilizar

Para qualquer widget de chat, não só o nosso:

O snippet carrega com async ou defer e não bloqueia a renderização.
Antes de um clique: alguns kilobytes, uma requisição, nenhuma requisição para a API do fornecedor.
Nenhum cookie e nenhum armazenamento antes de o visitante começar um chat.
O botão não cobre seus próprios botões numa tela de 375 px.
O painel e as fontes dele só carregam depois do clique.
Sua equipe responde onde já trabalha, sem mais uma aba para vigiar.
O preço não te pune por adicionar alguém à equipe.
Você mesmo mediu, com o cache desativado, numa janela anônima.

Teste no seu próprio site: o teste dura 14 dias e não pede cartão.