> ## 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. # Widget do site > Como adicionar o chat ao vivo do Attende no seu site: configure o canal, instale o código e receba mensagens de visitantes diretamente na sua caixa de conversas. 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](https://ajuda.attende.online/visao-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 `` ou antes do ``. 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](#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](https://ajuda.attende.online/primeiros-passos/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 No painel do Attende, acesse **Configurações → Canais** (Caixas de entrada) e clique em **Adicionar canal** no canto superior direito. Na lista de tipos de canal, clique no ícone de **Website** (Live Chat). Site1 ▸ **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. 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 {/* IMG: formulário de criação do canal de website com os campos Nome, URL, Cor e Mensagem de boas-vindas */} *** ## 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 `` ou imediatamente antes do ``. 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 ``. 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 ``. \ ▸ 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 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 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](/gestao/atribuicao-automatica). *** ## 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](/automacoes/horario-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: 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?](#não-está-dando-certo) abaixo. Digite uma mensagem de teste. A conversa deve aparecer em **Conversas** no Attende, no canal de website que você criou. 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](/crm/ficha-do-cliente). **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](/automacoes/horario-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](https://ajuda.attende.online/primeiros-passos/convidando-sua-equipe). *** **Em resumo** Widget 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.