Os Widgets do Site colocam no seu site um botão flutuante que reúne os seus canais: WhatsApp, Telegram, Instagram, Messenger e e-mail. O visitante clica, escolhe por onde quer falar, e a conversa chega na sua Caixa de Entrada. Você cria o widget em Configurações → Widgets do Site e cola um código no site uma vez só.
O que é
É uma central de contato para o site: um balão no canto da tela que, ao ser clicado, abre um painel com os canais que você escolheu. Cada canal abre numa nova aba, já na conversa com a sua empresa.
O Codewo tem três jeitos de levar quem visita o site até uma conversa:
| Widgets do Site | WebChat | Link Rastreável | |
|---|---|---|---|
| O que é | Botão flutuante com a lista dos seus canais | Chat ao vivo dentro do próprio site | Um endereço para divulgar |
| Onde a conversa acontece | No canal que o visitante escolher | Na janela do chat, sem sair do site | No canal que você escolheu |
| Como instalar | Código colado no site | Código colado no site | Nada: é só divulgar o endereço |
| Bom para | Dar ao visitante a escolha do canal | Atender sem o visitante sair do site | Anúncios, bio, e-mail e QR Code impresso |
Os três convivem. O WebChat não entra na lista do widget: se você quer os dois no mesmo site, instale os dois códigos. Aparecem dois balões, então coloque um de cada lado.
Como funciona para o visitante
- Ele vê o balão no canto inferior do site, com a cor e o ícone do canal nº 1 (verde para WhatsApp, azul para Telegram, e assim por diante). Com Texto CTA no balão ligado, o balão mostra também um texto, como "Falar no WhatsApp".
- Ao clicar, abre o painel: o nome e o logotipo da sua empresa, o selo "Online" e a sua mensagem de boas-vindas.
- Com Realçar canal #1 ligado, o primeiro canal vira um botão grande no topo, e os outros aparecem abaixo, em "Ou fale por outro canal". Desligado, todos aparecem numa lista só.
- Se você tem dois canais do mesmo tipo (por exemplo, dois WhatsApp conectados por QR Code, um da recepção e um do comercial), o painel mostra uma linha só, com o nome do tipo ("WhatsApp Web") e o número 2. Ao clicar, o visitante escolhe qual, vendo o rótulo e o número de cada um. WhatsApp oficial e WhatsApp Web contam como tipos diferentes: um de cada aparece em duas linhas, "WhatsApp" e "WhatsApp Web".
- O canal escolhido abre numa nova aba: o WhatsApp com a mensagem pronta, o bot do Telegram, o Direct do Instagram, o Messenger ou o programa de e-mail.
Se o widget tem um canal só, o clique no balão leva direto a ele, sem abrir o painel e sem mostrar a mensagem de boas-vindas.
Como criar
Cenário: uma clínica tem dois WhatsApp conectados por QR Code (o da recepção e o do comercial) e o Instagram, e quer oferecer os três no site, com o WhatsApp em destaque.
- Vá em Configurações → Widgets do Site e clique em Novo widget. A janela tem o formulário à esquerda e o Preview ao vivo à direita.
- Nome: serve só para você identificar o widget (o padrão é "Central de atendimento"). Exemplo: "Site da clínica". A chave Ativo liga e desliga o widget.
- Posição: Inferior Direita ou Inferior Esquerda. Use a esquerda se o site já tem outro botão flutuante à direita.
- Texto CTA no balão: ligado, o balão vira uma pílula com texto; desligado, fica só o ícone redondo.
- Realçar canal #1: ligado, o primeiro canal vira o botão grande do painel; desligado, todos ficam numa lista, em pé de igualdade.
- Canais e ordem: clique em Adicionar canal e escolha. Exemplo: WhatsApp da recepção, WhatsApp do comercial e Instagram. Arraste pela alça para mudar a ordem: o primeiro da lista é o canal nº 1. Em cada canal:
- a chave liga e desliga o canal no widget, sem removê-lo;
- o campo Rótulo customizado (opcional) troca o nome que o visitante vê. Exemplo: "Recepção" e "Comercial", que aparecem quando o visitante escolhe entre os dois WhatsApp;
- o ícone de lixeira, que aparece ao passar o mouse, tira o canal do widget.
- Mensagem de boas-vindas: o texto do topo do painel. O padrão é "Olá! Como podemos ajudar?".
- Domínios permitidos: digite o domínio do site e clique em Adicionar (veja a tabela abaixo).
- Clique em Criar widget. O botão só é liberado quando há pelo menos um canal na lista.
Entram no widget os canais ativos de WhatsApp (oficial e Web), Telegram, Instagram, Messenger e e-mail. WebChat e SMS não aparecem na lista. Se nenhum canal aparece, crie ou ative um em Configurações → Canais.
Domínios permitidos
| O que você cadastra | Onde o botão aparece |
|---|---|
| Nada | Em qualquer site |
exemplo.com.br |
Em exemplo.com.br e em www.exemplo.com.br |
*.exemplo.com.br |
Em exemplo.com.br e em todos os subdomínios (www, loja, blog...) |
www.exemplo.com.br |
Só em www.exemplo.com.br |
Preencher a lista impede que outro site use o seu código.
Instalar no site
- No cartão do widget, abra o menu de três pontos e clique em Ver código de integração.
- Clique em Copiar.
- Cole o código antes de
</body>em todas as páginas do site. Em construtores de site e lojas virtuais, procure a opção de scripts no rodapé ou de código personalizado. - Publique o site, abra-o numa nova aba e clique em cada canal para conferir.
O balão aparece assim que o código carrega. Colar o código duas vezes na mesma página não duplica o balão.
Quem pode Ver canais vê a tela e o código. Criar, editar e remover widgets exige Gerenciar canais.
A origem dos contatos
Cada botão do widget passa pelo Link Rastreável do canal. Ao carregar, o código guarda no navegador do visitante, por 30 dias, as UTMs e os identificadores de clique do Google e da Meta da página em que ele entrou, mesmo que ele navegue por outras páginas antes de clicar. No clique, leva também os cookies de anúncio que o site já tem e o endereço da página.
A origem fica registrada quando a conversa começa pelo WhatsApp Web ou pelo Telegram. Pelo WhatsApp oficial e pelo e-mail, a conversa entra como Direto. Pelo Instagram e pelo Messenger, o contato fica sem origem.
Quando o visitante chega ao site sem UTM nem identificador de clique, a origem costuma aparecer como Referral, porque o clique veio do seu próprio site. Para separar as campanhas, use UTMs nos links que levam ao site.
Editar, pausar e remover
- Editar: clique no cartão ou em Editar, no menu. Depois de salvar, quem abrir o site já vê a mudança; quem estava com a página aberta vê ao recarregar.
- Pausar: desligue Ativo. O código continua no site, mas o balão não aparece.
- Remover: menu → Remover. Os sites com o código deixam de mostrar o balão.
- Canal desativado em Configurações → Canais sai do balão sozinho, sem precisar editar o widget.
- Você pode ter vários widgets, cada um com o seu código. Exemplo: um para o site institucional e outro para a loja virtual.
Pegadinhas comuns
- A prévia mostra o rótulo do canal nº 1 como texto do botão, mas o site não. No site, o balão e o botão grande usam o texto padrão do canal: "Falar no WhatsApp", "Falar no Telegram", "Falar no Instagram" ou "Falar no Messenger". O rótulo customizado aparece na lista de canais do painel e na escolha entre dois números do mesmo tipo.
- Sem rótulo, o visitante vê o nome do tipo. Na lista do painel, um canal sem Rótulo customizado aparece como "WhatsApp", "WhatsApp Web", "Telegram", "Instagram", "Facebook" ou "E-mail". Preencha o rótulo para mostrar algo que o visitante entenda.
- O selo "Online" aparece sempre, inclusive fora do seu horário de atendimento. Se isso incomoda, diga o horário na mensagem de boas-vindas: "Respondemos de segunda a sexta, das 8h às 18h".
- O balão não aparece? Confira se o widget está Ativo, se o domínio está nos Domínios permitidos (quem cadastrou
www.exemplo.com.bre abriuexemplo.com.brfica de fora) e se o código foi colado na página certa. Com a assinatura da empresa suspensa, o balão também some. - O código muda cada vez que você abre Ver código de integração. É normal: todas as versões funcionam. Editar o widget também não muda o código já publicado.
- O código não expira, e a tela não tem botão para trocá-lo. A proteção contra uso em outro site é a lista de Domínios permitidos. Se precisar mesmo de um código novo, crie outro widget com a mesma configuração, instale o código dele e remova o antigo: o código do widget removido para de funcionar.
- O WebChat fica de fora. Chat ao vivo e botão com vários canais são dois códigos separados.
- Um canal só pula o painel. Com um canal, o clique no balão vai direto para a conversa.
Boas práticas
- Ponha como nº 1 o canal que a equipe mais atende. Ele define a cor, o ícone e o botão principal.
- Dê rótulos pelo assunto, não pelo nome técnico do canal: "Agendamentos", "Orçamentos", "Suporte".
- Preencha os Domínios permitidos.
- Cole o código em todas as páginas, sobretudo nas que recebem visitas de anúncio: é nelas que o botão guarda a campanha.
- Teste cada botão depois de publicar. Se um deles não abrir a conversa, confira se o canal está ativo e conectado em Configurações → Canais.