Skip to main content

Documentation Index

Fetch the complete documentation index at: https://ajuda.attende.online/llms.txt

Use this file to discover all available pages before exploring further.

O widget do site é o chat flutuante que aparece no canto da tela quando alguém visita o seu site — aquele botão de “Fale conosco” que qualquer visitante pode clicar e iniciar uma conversa em segundos. No Attende, cada mensagem do site vira uma conversa igual às do WhatsApp e do Telegram: com atribuição, status, notas privadas e histórico completo. O visitante digita no site, a resposta chega pra ele no mesmo chat, e o atendente vê tudo na fila normal. A instalação tem duas partes: configurar o canal no Attende e colar um trecho de código no seu site. Leva menos de 10 minutos.
Antes de começar, vale ler Visão geral dos canais — lá explicamos por que toda mensagem (WhatsApp, Telegram, e-mail, site) cai no mesmo lugar.

​
Antes de começar: o que você vai precisar

Tenha em mãos antes de abrir o Attende:
  • Acesso para editar o seu site. Você vai precisar colar um trecho de código JavaScript no HTML do site — no <head> ou antes do </body>. Se o site está no WordPress, Webflow, Wix, Shopify ou similar, cada plataforma tem um campo para “scripts personalizados” — veja a seção Como instalar em cada plataforma abaixo.
  • Ser Administrador no Attende. Conectar canal é função de Administrador. Sem o menu Configurações, peça ao Administrador da empresa (ver Convidando sua equipe).
Se você usa um CMS como WordPress ou Webflow, não precisa mexer no código-fonte diretamente — essas plataformas têm campos específicos pra inserir scripts. Veja a seção de instalação por plataforma mais abaixo.

​
1. Crie o canal de widget no Attende

1

Vá em Configurações → Canais → Adicionar canal

No painel do Attende, acesse Configurações → Canais (Caixas de entrada) e clique em Adicionar canal no canto superior direito.
2

Escolha Website

Na lista de tipos de canal, clique no ícone de Website (Live Chat).
Site1
3

Preencha os dados do canal

▸ Nome do site: como o time vai identificar esse canal internamente (ex.: “Site Principal”, “Loja”). Não aparece pro visitante.
▸ Domínio do website: o domínio do seu site (ex.: minhaempresa.com.br). O widget só vai funcionar nesse domínio — isso evita que o código seja copiado e usado em outro lugar.
▸ Cor do Widget: escolha a cor que vai combinar com o visual do seu site. É a cor do botão flutuante e do cabeçalho do chat.
▸ Seja bem-vindo: uma saudação curta que aparece no topo do chat (ex.: “Olá!”).
▸ Bem-vindo, saudação: o texto completo de boas-vindas que o visitante vê ao abrir o chat (ex.: “Nós tornamos simples a conexão conosco. Pergunte qualquer assunto ou compartilhe seus comentários.”).
▸ Ativar saudação do canal: se ativado, envia automaticamente a mensagem de saudação quando uma nova conversa é criada.
4

Salve e copie o código

Clique em Criar caixa de entrada. Na tela seguinte (etapa “Então!”), o Attende exibe um trecho de código JavaScript — o snippet de instalação. Copie esse código agora. Você vai precisar dele no próximo passo.
Site2

​
2. Instale o código no seu site

O snippet é um bloco de JavaScript de algumas linhas. Cole-o no HTML do seu site, dentro da tag <head> ou imediatamente antes do </body>. Ele vai carregar o widget automaticamente em todas as páginas onde estiver presente.
Abra o arquivo index.html (ou o arquivo de layout base do seu site) e cole o snippet antes do </body>. Salve e publique.
▸ Instale o plugin Insert Headers and Footers (ou similar) no seu WordPress.
▸ Vá em Configurações → Insert Headers and Footers → Scripts no Rodapé e cole o snippet ali.
▸ Salve. O widget aparece em todas as páginas do site automaticamente.

Alternativa: se o seu tema tem um campo “Scripts personalizados” nas configurações, cole lá também funciona.
▸ No painel do Webflow, vá em Project Settings → Custom Code → Footer Code.
▸ Cole o snippet no campo Footer Code e salve.
▸ Publique o site. O widget aparece em todas as páginas.
▸ No painel do Shopify, vá em Configurações → Loja virtual → Temas → Editar código.
▸ Abra o arquivo theme.liquid e cole o snippet imediatamente antes do </body>.
▸ Salve. O widget aparece em todas as páginas da loja.
▸ No editor do Wix, clique em Configurações → Ferramentas avançadas → Código personalizado.
▸ Clique em + Adicionar código, cole o snippet e escolha aplicar em Todas as páginas.
▸ Defina o posicionamento como Body - end e salve.
Se você já usa o GTM no site, pode instalar o widget por lá sem tocar no código-fonte:
▸ Crie uma nova tag do tipo HTML personalizado.
▸ Cole o snippet no campo de HTML.
▸ Defina o gatilho como Todas as páginas.
▸ Salve e publique o container.

​
3. Adicione os Colaboradores

1

Vá na aba Colaboradores do canal

Nas configurações do canal que você criou (Configurações → Canais → [nome do canal] → Colaboradores), marque quem do time vai atender as mensagens do site. Só quem está marcado aqui vê as conversas — cadastrar o atendente no Attende não basta.
Site3
2

Configure a distribuição (opcional)

Se quiser que as conversas do site sejam atribuídas automaticamente, ative a atribuição automática na mesma tela. Sem isso, as conversas ficam na fila sem atendente — qualquer colaborador do canal pode pegar manualmente. Veja mais em Atribuição automática.

​
4. Personalize o widget (opcional)

Depois de criar o canal, você pode ajustar a aparência e o comportamento do widget a qualquer momento em Configurações → Canais → [nome do canal]. Aparência:
  • Posição: esquerda ou direita da tela (padrão: direita).
  • Design da bolha: padrão (ícone de chat) ou expandido (ícone + texto).
  • Texto da bolha: se usar o design expandido, personalize o texto que aparece no botão (ex.: “Precisa de ajuda?”).
  • Cor: altere a cor principal a qualquer momento — aparece no botão e no cabeçalho do chat.
Site4
Comportamento:
  • Formulário pré-chat: ative pra pedir nome e e-mail do visitante antes de iniciar a conversa. Útil pra identificar o visitante mesmo que ele saia antes de você responder.
  • Horário de atendimento: configure os horários em que o widget aceita novas conversas — fora do horário, exibe uma mensagem de ausência. Veja Horário de atendimento.

​
5. Teste antes de publicar

Depois de instalar o código, abra o seu site em uma aba anônima (Ctrl+Shift+N no Chrome) e confirme:
1

O botão aparece no canto da tela

A bolha do chat deve estar visível no canto que você configurou (padrão: inferior direito). Se não aparecer, veja Não está dando certo? abaixo.
2

Clique no botão e inicie uma conversa de teste

Digite uma mensagem de teste. A conversa deve aparecer em Conversas no Attende, no canal de website que você criou.
3

Responda pelo Attende

Responda a mensagem de teste. A resposta deve aparecer imediatamente no chat do site, na aba anônima que você abriu.
Use a aba anônima pro teste — em sessão normal, o Attende pode reconhecer que você é Administrador e não exibir o widget (comportamento normal em algumas configurações).

​
6. Pronto: o widget está no ar

Chat do site conectado. Daqui pra frente, é igual a qualquer outro canal:
  • Cada mensagem de visitante vira uma conversa nova na fila, identificada com o canal de website.
  • O histórico completo fica dentro da conversa — visitante manda, você responde, tudo registrado.
  • Os mesmos status valem: Aberto, Pendente, Resolvido.
  • As mesmas respostas prontas, notas privadas e transferências funcionam.
  • Se o visitante informou nome e e-mail (via formulário pré-chat ou durante a conversa), o contato é criado automaticamente no CRM.
Visitantes anônimos: se o visitante não se identificar, a conversa fica registrada como “Visitante” com um identificador automático. Você ainda consegue atender e registrar — o contato pode ser atualizado depois com os dados reais se o visitante os informar.

​
Não está dando certo?

Verifique: (1) O snippet foi colado no HTML e está sendo carregado — abra o DevTools do navegador (F12), vá em Network e filtre por “chatwoot” ou pelo domínio do Attende. Se nada aparecer, o script não está sendo carregado. (2) A URL do domínio que você configurou no canal bate exatamente com o endereço do site (com ou sem www, com ou sem https). Uma divergência simples bloqueia o widget. (3) Seu site usa Content Security Policy (CSP)? Pode estar bloqueando scripts externos — peça ao TI ou desenvolvedor do site pra liberar o domínio do Attende.
Confirme que há pelo menos um Colaborador marcado no canal. Sem colaborador associado, o widget abre mas as conversas ficam sem destino. Vá em Configurações → Canais → [nome do canal] → Colaboradores e marque alguém.
A resposta aparece em tempo real via WebSocket. Se não aparecer, o navegador do visitante pode ter bloqueado a conexão WebSocket — isso acontece em redes corporativas ou com bloqueadores de conteúdo agressivos. Peça pro visitante tentar em outro navegador ou rede.
O snippet carrega o widget em todas as páginas onde está instalado. Se você só quer o widget em algumas páginas, remova o snippet das páginas onde não quer, ou use o Google Tag Manager com um gatilho de URL específico (ex.: só na página de contato ou de preços).
Ative o Horário de atendimento no canal. Fora do horário, o widget pode ser configurado pra exibir uma mensagem de ausência ou pra ficar oculto — dependendo da configuração escolhida. Veja Horário de atendimento.
Conectar canal é função de Administrador. Se você entrou como Atendente, peça ao Administrador da empresa para conectar ou te promover. Veja Convidando sua equipe.
Em resumoWidget do site conectado em dois passos: criar o canal em Configurações → Canais → Adicionar canal → Website (informando nome, URL do domínio e cor) e colar o snippet JavaScript gerado no HTML do seu site. Marque os Colaboradores do canal, personalize posição e aparência se quiser, e pronto — cada visitante que abrir o chat vira uma conversa na sua fila, tratada igual ao WhatsApp e ao Telegram, com histórico completo e status. Sem formulário perdido, sem e-mail esquecido, sem visitante sumindo sem resposta. Ponto.