Webchat no seu site: como configurar e instalar o código, passo a passo

O webchat é o balão de conversa que fica no canto do seu site: o visitante clica, conversa em tempo real e a conversa cai na sua fila de atendimento como qualquer outro canal. Este guia mostra como criar o canal, personalizar a aparência e — o mais importante — como instalar o código no site, plataforma por plataforma.

1. Criar o canal de webchat

1. Acesse Configurações → Caixas de Entrada → Adicionar caixa de entrada.
2. Escolha Website.
3. Preencha:
   • Nome do site — como o canal aparece na sua lista (ex.: "Site institucional").
   • Domínio do site — o endereço onde o chat vai rodar (ex.: www.suaempresa.com.br).
   • Título de boas-vindas e Slogan — o texto que recebe o visitante quando abre o chat (ex.: "Olá! 👋" / "Como podemos ajudar?").
   • Cor do widget — a cor do balão e do cabeçalho, para combinar com a identidade do site.
4. Avance e selecione os agentes que vão atender esse canal.
5. Pronto — a tela final já mostra o código de instalação. Você pode copiá-lo agora ou buscar depois (passo 3).

2. Personalizar o chat

Na caixa de entrada criada, abra as abas de configuração:

• Widget Builder — visualize e ajuste em tempo real: cor, posição na tela (direita/esquerda), tipo do botão flutuante (só ícone ou ícone + texto), texto do lançador e mensagem de resposta esperada ("Normalmente respondemos em minutos"). O preview ao lado mostra exatamente como ficará no site.
• Pré-atendimento — ative o formulário pré-chat para pedir nome, e-mail e telefone antes da conversa começar. Recomendado: com o contato identificado, o histórico fica unificado e você consegue retornar por outros canais.
• Horário de atendimento — defina os horários em que a equipe responde; fora deles o visitante vê uma mensagem de ausência e a conversa fica aguardando.
• CSAT — pesquisa de satisfação automática ao resolver a conversa.
• Configuração — é aqui que fica o código de instalação (o mesmo do passo 1) e as opções avançadas do canal.

3. Copiar o código de instalação

Em Configurações → Caixas de Entrada → [sua caixa Website] → aba Configuração, copie o bloco que se parece com este:

<script>
  (function(d,t) {
    var BASE_URL="https://chat.suaplataforma.com.br";
    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=BASE_URL+"/packs/js/sdk.js";
    g.async = true;
    s.parentNode.insertBefore(g,s);
    g.onload=function(){
      window.simplesdeskSDK.run({
        websiteToken: 'SEU-TOKEN-AQUI',
        baseUrl: BASE_URL
      })
    }
  })(document,"script");
</script>

Importante: use sempre o código copiado do SEU painel — o websiteToken é único por caixa de entrada. O exemplo acima é ilustrativo.

4. Onde e como inserir no site

A regra geral vale para qualquer site: cole o código imediatamente antes do fechamento da tag </body>, em todas as páginas onde o chat deve aparecer. Como fazer em cada plataforma:

Site em HTML puro

Abra o arquivo da página (ex.: index.html), localize </body> no final e cole o código na linha de cima. Repita nos demais arquivos ou no rodapé compartilhado (footer) se o site usa includes.

WordPress

Três caminhos, do mais simples ao mais técnico:

1. Plugin de código (recomendado): instale um plugin como "WPCode" ou "Insert Headers and Footers", cole o código na seção Footer e salve.
2. Personalizador do tema: alguns temas têm campo "Scripts de rodapé" em Aparência → Personalizar.
3. functions.php (avançado): adicione o código via hook wp_footer no tema filho.

Google Tag Manager

Crie uma tag de HTML personalizado, cole o código, acionador All Pages e publique o contêiner. Ideal quando o time de marketing gerencia os scripts do site.

Loja Nuvemshop / Shopify / plataformas de e-commerce

Procure a área de edição de tema/layout e cole o código antes do </body> do arquivo de layout principal (theme.liquid no Shopify). Em plataformas com campo de "scripts adicionais" ou "código de rastreamento", cole lá — funciona igual.

Sites feitos em React, Vue ou outras SPAs

Cole o código no index.html público do projeto (antes de </body>). O widget carrega uma única vez e permanece entre as trocas de rota.

5. Testar

1. Abra o site numa aba anônima (evita cache).
2. O balão deve aparecer no canto escolhido em alguns segundos.
3. Envie uma mensagem de teste — ela deve chegar na sua fila de Conversas na hora, no canal Website.
4. Responda pela plataforma e confira a resposta chegando no chat do site.

Problemas comuns

• O balão não aparece: confira se o código está antes do </body> (e não dentro de um comentário), limpe o cache do site/CDN e verifique se não há bloqueador de anúncios interferindo no seu navegador de teste.
• Aparece em uma página e não em outra: o código precisa estar em todas as páginas — prefira colocá-lo no rodapé/layout compartilhado ou via Tag Manager.
• Site em HTTP: o widget exige site em HTTPS para funcionar corretamente.
• Mudei a cor/texto e não atualizou: as personalizações do Widget Builder aplicam em até alguns minutos; teste em aba anônima.