# 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:

```html
<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.