Guia

Webchat no seu site

O widget de chat embarcável: instalação em 2 linhas, origens permitidas, identidade verificada e como ele conversa com o Inbox.

O webchat é o segundo canal de Conversas (ao lado do WhatsApp): um widget leve (~4 KB, sem framework, CSS isolado em shadow DOM — nem o CSS do site quebra o widget, nem o widget vaza estilo) que abre conversas direto no Inbox, com os mesmos agentes, flows, atribuição e CSAT.

#Instalação (2 linhas)

  1. Crie a conexão webchat no console (Integrações → Webchat) e configure as origens permitidas — o widget só carrega em sites da allowlist (checada no servidor).
  2. Cole o snippet no site:
html
<script src="https://unpkg.com/@noorden/webchat@0.1.0/dist/cdn/embed.js"></script>
<script>
  Noorden.init({ baseUrl: 'https://SUA-API', connectionId: 'conn_...' });
</script>

Via bundler: npm install @noorden/webchat e init({ baseUrl, connectionId, title, primaryColor, position }). O handle devolvido tem open(), close() e destroy().

#Visitante anônimo × identidade verificada

  • Anônimo (default): o visitante ganha um id local (persistido no navegador) — a mesma conversa reabre no reload. Identidade anônima é, por definição, fraca.
  • Verificada (padrão Intercom, para usuários logados): passe identity com hmac = HMAC-SHA256(identitySecret, "webchat-identity:" + userId) calculado no seu backend. Nunca exponha o identitySecret no browser.

#Como ele se comporta

  • Tempo real: respostas chegam por SSE; o token do visitante renova sozinho.
  • Sem janela de 24h: webchat não tem a janela de serviço do WhatsApp — resposta livre a qualquer momento (no Inbox, o countdown de janela só aparece em canais que têm).
  • Segurança: mensagens entram como texto puro (markup do interlocutor nunca vira DOM); origens fora da allowlist não carregam o widget.
  • Acessibilidade: painel role="dialog", thread aria-live, Escape fecha e devolve o foco.

#No Inbox

Conversas de webchat aparecem com o badge Webchat e seguem o mesmo ciclo: roteamento para agente/fila, takeover humano, notas, adiar, resolver e pesquisa de CSAT (1–5 no próprio chat). Limitações atuais do canal: sem envio de template (não há janela a reabrir) e mídia conforme a capacidade configurada da conexão.