O botão flutuante do WhatsApp é um botão que fica fixo num canto inferior do site do seu hotel. Ao tocar nele, o visitante abre um chat do WhatsApp com o número do seu hotel, com uma mensagem já escrita se você configurar uma. A conversa chega à WeSpeak como qualquer outro chat do WhatsApp: o seu assistente atende e você a vê em Chats (a seção Conversas do menu lateral).
Este guia é para o hotel e para quem administra o site dele, que pode ser o próprio hotel, o web designer ou a agência. O código é gerado na WeSpeak e colado uma única vez no site. É HTML e CSS, sem scripts, então quem administra o site pode editá-lo: trocar a imagem (por exemplo, pelo logo do hotel), mudar o tamanho ou adicionar um texto embaixo (veja Personalizar o botão).
Exemplo ilustrativo do design original: o banner no computador e o logo no celular. Nos dois casos, tocar na imagem abre o WhatsApp.
Qual é a diferença em relação ao Chat Web
A WeSpeak tem duas formas de receber contatos pelo seu site, e elas podem conviver:
| O que muda | Botão do WhatsApp | Chat Web |
|---|---|---|
| Onde o visitante conversa | No WhatsApp, com o número do seu hotel. Ele precisa ter WhatsApp. | No seu site, sem sair da página. Ele não precisa de WhatsApp. |
| O que se cola no site | Um bloco de HTML e CSS: a imagem do botão e o estilo dela. | Um código de uma linha (um script). |
| Como se muda a aparência | Editando o código: a imagem, o tamanho ou um texto (veja mais abaixo). | Na WeSpeak, em Personalizar: a imagem (por exemplo, o seu logo), a cor, a saudação e mais, sem mexer no código. |
| Quem responde | O seu assistente, como em qualquer chat do WhatsApp. | O mesmo assistente. |
Você pode ter os dois: quem prefere o WhatsApp toca no botão, e quem prefere não sair do seu site escreve no Chat Web. Se você não mudar nada, os dois ficam embaixo à direita, então coloque-os em cantos diferentes: por exemplo, o botão à Esquerda (você escolhe ao gerar o código) e a bolha do Chat Web à direita, ou o contrário (um Administrador ou um Supervisor muda a bolha de lugar em Personalizar, no cartão dela em Canais). Mais sobre o Chat Web: o que é e como ativá-lo e como instalá-lo.
1. Gere o código
- Na WeSpeak, entre em Canais e desça até a seção Ferramentas, no final da página.
- Clique no cartão Gerador de botão flutuante do WhatsApp para abri-lo.
- Preencha as opções (explicadas na tabela abaixo) e clique em Gerar Código. Aparece o Código HTML, e o painel mostra uma prévia do botão: com Visualizar você a oculta ou a mostra de novo. Se depois você mudar a mensagem, a posição ou Apenas logo do WhatsApp, o código não se atualiza sozinho: clique de novo em Gerar Código antes de copiá-lo.
- Clique em Copiar e envie o código para quem administra o seu site, junto com o link deste guia.
| Opção | O que faz |
|---|---|
| Número de WhatsApp | Só aparece se a sua conta tiver mais de um número de WhatsApp. Escolha para qual número os visitantes vão escrever. |
| Mensagem Padrão | O texto que aparece já escrito no chat quando o visitante toca no botão, por exemplo: "Olá, estou escrevendo pelo site". O visitante pode mudá-lo ou apagá-lo antes de enviar. Se você deixar vazio, o chat abre sem texto. Uma mensagem assim ajuda você a reconhecer em Chats as conversas que chegam pelo botão. |
| Posição do botão | Esquerda ou Direita (a que vem marcada): o canto inferior da tela onde o botão fica. |
| Apenas logo do WhatsApp | Desligado (o padrão), o botão é o logo do WhatsApp no celular e no tablet, e no computador um banner mais largo: o logo com o texto "Atención Inmediata | 24hs" (em espanhol) e a assinatura da WeSpeak. Ligado, é só o logo do WhatsApp, do mesmo tamanho em todos os dispositivos. |
ℹ️ O cartão aparece se a sua conta tiver pelo menos um número de WhatsApp (conectado por QR Code ou pela WhatsApp API). Qualquer pessoa da equipe que entre em Canais pode usá-lo, seja qual for o papel: Administrador, Supervisor ou Usuário.
💡 A WeSpeak não guarda o código nem as opções: se você precisar dele de novo, gere-o outra vez. Ele sempre sai com o design original, então, se você o personalizou, guarde uma cópia do código editado.
2. Cole o código no seu site
A regra é sempre a mesma: uma única vez, num lugar que carregue em todas as páginas, dentro do <body> (o normal é logo antes de </body>). Ele não vai no <head>: é conteúdo visível —um link com uma imagem—, não um script. Escolha a opção de acordo com a forma como o seu site foi feito.
Se o seu site já tiver outro botão do WhatsApp (de um plugin, por exemplo), remova-o para não aparecerem dois.
No HTML do site
Cole o código na linha anterior a </body>, no modelo ou no rodapé (footer) que todas as páginas compartilham. Se o seu site tiver páginas soltas, sem modelo comum, cole em cada uma.
Com o Google Tag Manager
- No seu contêiner, entre em Tags e clique em Nova.
- Em Configuração da tag, escolha HTML personalizado e cole o código.
- Em Acionamento, escolha o acionador Todas as páginas.
- Salve a tag e publique o contêiner (Enviar → Publicar). Enquanto você não publicar, o botão não aparece no seu site.
No WordPress
- O jeito mais simples é um plugin de trechos de código como o WPCode (antes chamado Insert Headers and Footers): na seção Header & Footer (cabeçalho e rodapé), cole o código na caixa do rodapé (Footer) e salve.
- Muitos temas e construtores (Elementor, Divi, Avada e outros) têm um campo próprio de "código personalizado" para o rodapé: ele serve se aceitar HTML.
- Se preferir editar o tema, cole antes de
</body>nofooter.php, mas faça isso num tema filho: senão, a mudança se perde quando o tema é atualizado.
No Wix, Squarespace, Shopify, Webflow e outros construtores
| Plataforma | Onde colar |
|---|---|
| Wix | Configurações → Código personalizado → + Adicionar código personalizado. Cole o código, escolha Todas as páginas e posicione o código em Corpo - fim. Clique em Aplicar. O site precisa estar publicado e com um domínio conectado. |
| Squarespace | No painel Injeção de código, cole o código em Rodapé e salve. Está disponível nos planos Core, Plus e Advanced. |
| Shopify | Loja virtual → no seu tema, o botão ⋯ → Editar código → arquivo theme.liquid: cole o código logo antes de </body> e salve. |
| Webflow | Site settings → Custom code → Footer code (a interface do Webflow é em inglês). Salve e publique o site. |
| Outro construtor ou motor de reservas | Procure a opção para adicionar HTML personalizado em todas as páginas ou no rodapé. Se você quiser o botão também nas páginas do seu motor de reservas, cole-o lá. |
Sites feitos sob medida (React, Next.js e outros)
Adicione o código uma vez, no modelo ou layout comum a todas as páginas. É HTML padrão: se o seu site usa JSX, é preciso adaptá-lo a essa sintaxe (por exemplo, os atributos style, o bloco <style> e os comentários <!-- -->).
3. Confira se funciona
- Abra o seu site num celular: o botão aparece no canto inferior que você escolheu.
- Toque nele: o WhatsApp abre com o chat do seu hotel e, se você configurou uma, a mensagem padrão já escrita.
- Repita o teste num computador, com a janela do navegador maximizada. Ali aparece o banner largo, a não ser que você tenha ligado Apenas logo do WhatsApp ou colocado a sua própria imagem. Ao clicar, abre uma aba do WhatsApp, de onde se continua no WhatsApp Web ou no aplicativo para computador.
- Se você enviar uma mensagem de teste, ela chega a Chats na WeSpeak e o assistente responde como em qualquer chat do WhatsApp.
💡 Se o seu site usa um plugin de cache ou uma CDN, limpe o cache depois de colar o código.
Personalizar o botão
O gerador não tem opções para enviar uma imagem nem para adicionar um texto, mas isso não é necessário: o botão é HTML e CSS que fica no seu site, e quem administra o site pode editá-lo com qualquer editor de texto, antes de colá-lo ou onde ele já está colado.
O código tem quatro partes:
- Uma caixa (
<div id="wapp-button">) que deixa o botão fixo num canto inferior da tela. - Um link, dentro da caixa, que começa com
https://api.whatsapp.com/send?phone=: ele abre o chat com o número do seu hotel e a mensagem padrão. - A imagem do botão, dentro do link (
<picture>): uma versão para telas de até 1024 px de largura, ou seja, celular e tablet (whatsapp.png, o logo do WhatsApp), e outra para telas mais largas, o computador (right.pngouleft.png, o banner). Com Apenas logo do WhatsApp, há uma única imagem:whatsapp.png. - Um bloco
<style>, no final, com o tamanho: 80 px de largura no celular e no tablet, e 320 px no computador (80 px em todos os dispositivos com Apenas logo do WhatsApp).
Assim é a parte do link e da imagem, simplificada e com um número e uma mensagem de exemplo:
<a id="whatsapp-message" target="_blank" href="https://api.whatsapp.com/send?phone=5511900000000&text=Ol%C3%A1%2C%20quero%20reservar">
<picture>
<source media="(max-width: 480px)" srcset="https://d2txcta0d7tijy.cloudfront.net/wespeak/whatsapp.png" />
<source media="(max-width: 1024px)" srcset="https://d2txcta0d7tijy.cloudfront.net/wespeak/whatsapp.png" />
<img src="https://d2txcta0d7tijy.cloudfront.net/wespeak/right.png" alt="botão do whatsapp" />
</picture>
</a>
Usar a sua própria imagem (por exemplo, o logo do hotel)
- Envie a imagem para o seu site (por exemplo, para a biblioteca de mídia do WordPress) e copie o endereço dela. Ela precisa ser pública: se você abri-la numa janela anônima, ela tem que aparecer. O ideal é uma imagem quadrada, de pelo menos 160 × 160 px, para que fique nítida.
- No código, troque os três endereços de imagem pelo seu: os dois que terminam em
whatsapp.png(celular e tablet) e o que termina emright.pngouleft.png(computador). Se você gerou o código com Apenas logo do WhatsApp, há só um, o que termina emwhatsapp.png.
Você também pode trocar só alguns: por exemplo, manter o logo do WhatsApp no celular e colocar o seu próprio banner no computador.
Mudar o tamanho
No computador, o botão tem 320 px de largura, pensado para o banner. Com uma imagem quadrada, nessa largura ela fica enorme: no bloco <style>, abaixo de /* Desktop sizes */, troque as duas linhas width: 320px; por width: 80px; (ou pela largura que você quiser).
No celular e no tablet ele tem 80 px: se quiser outro tamanho ali, troque as linhas width: 80px; dos blocos /* Mobile sizes */ e /* Tablet sizes */. Com Apenas logo do WhatsApp, ele tem 80 px em todos os dispositivos e não é preciso mudar nada.
Adicionar um texto embaixo
Adicione esta linha logo depois de </a> (assim ela fica dentro da caixa, embaixo da imagem):
<div style="margin-top:4px; padding:2px 6px; background:#ffffff; border-radius:6px; font-size:12px; text-align:center; color:#333333;">Reservas pelo WhatsApp</div>
Troque "Reservas pelo WhatsApp" pelo seu texto e, se quiser, as cores: background é o fundo e color, a letra. Use um texto curto: no celular o botão tem 80 px de largura, e "Reservas pelo WhatsApp" já ocupa duas ou três linhas, conforme a fonte do seu site. O texto não é um link: o chat só abre ao tocar na imagem.
Com a sua imagem e um texto, essa parte do código fica assim (o link não muda: mantenha o seu, com o seu número e a sua mensagem):
<a id="whatsapp-message" target="_blank" href="https://api.whatsapp.com/send?phone=…&text=…">
<picture>
<source media="(max-width: 480px)" srcset="https://seuhotel.com/img/botao-whatsapp.png" />
<source media="(max-width: 1024px)" srcset="https://seuhotel.com/img/botao-whatsapp.png" />
<img src="https://seuhotel.com/img/botao-whatsapp.png" alt="botão do whatsapp" />
</picture>
</a>
<div style="margin-top:4px; padding:2px 6px; background:#ffffff; border-radius:6px; font-size:12px; text-align:center; color:#333333;">Reservas pelo WhatsApp</div>
À esquerda, a opção Apenas logo do WhatsApp do gerador. À direita, um exemplo com imagem e texto próprios, editando o HTML. Só a imagem abre o chat; o texto embaixo não é um link.
O que não alterar
O link https://api.whatsapp.com/send?phone=…: é ele que abre o chat com o número do seu hotel e a mensagem padrão. Para mudar o número ou a mensagem, não o edite à mão: gere o código de novo na WeSpeak, substitua o anterior e aplique outra vez as suas mudanças de imagem, tamanho ou texto.
Confira o resultado
Abra o seu site num celular e num computador: o botão tem que aparecer com a sua imagem e o seu texto, no tamanho escolhido, no canto escolhido. Toque nele: o WhatsApp tem que abrir com o chat do seu hotel.
Editar o código não muda nada na WeSpeak: as conversas continuam chegando ao número conectado e o assistente responde como sempre.
Se algo não funcionar
| O que acontece | O que revisar |
|---|---|
| O botão não aparece | Se você colou o código no HTML do site, abra o código-fonte da página (Ctrl+U, ou Cmd+Option+U no Mac) e procure wapp-button. Se instalou pelo Google Tag Manager, ele não aparece ali: confira se o contêiner foi publicado. Nos dois casos, confira também o cache do site. |
| No computador aparece um banner largo, e não só o logo | É o design do gerador para computador. Para mostrar só o logo, gere o código de novo com Apenas logo do WhatsApp ligado, ou use a sua própria imagem. |
| A sua imagem fica enorme no computador | Troque as duas linhas width: 320px; por width: 80px; (veja Mudar o tamanho). |
| No lugar da sua imagem aparece um ícone quebrado ou um texto | O endereço da imagem não é público ou está escrito errado. Abra-o numa janela anônima: a imagem tem que aparecer. |
| O WhatsApp abre com outro número | Confira se não há outro botão do WhatsApp no seu site (de um plugin, por exemplo). Se for este, gere o código de novo com o número certo (se a sua conta tiver mais de um, ele é escolhido em Número de WhatsApp) e substitua o código inteiro. |
| O botão cobre a bolha do Chat Web ou outro botão do seu site | Coloque cada um num canto diferente: gere o código escolhendo o outro canto em Posição do botão ou mude a bolha do Chat Web de lugar em Personalizar. |
Limites atuais
- O painel não tem opções para enviar uma imagem nem para adicionar um texto. Isso se faz editando o código, como explicado em Personalizar o botão.
- A WeSpeak não edita o site do seu hotel. O código é colado e personalizado por quem administra o site: o hotel, o web designer ou a agência. Se tiver dúvidas sobre o botão, fale com o seu consultor da WeSpeak.
- O banner para computador é fixo: diz "Atención Inmediata | 24hs" (em espanhol), leva a assinatura da WeSpeak e não pode ser alterado pelo painel. Para não mostrá-lo, gere o código com Apenas logo do WhatsApp ou use a sua própria imagem.
- Cada botão leva a um único número. Se você tem vários números (por exemplo, um por propriedade, cada uma com o seu site), gere um código para cada um.
- A WeSpeak não guarda o código nem as suas mudanças. Cada código novo sai com o design original.
- Não conta cliques. O código não tem scripts nem rastreamento: na WeSpeak você vê as conversas que chegam, não quantas pessoas tocaram no botão.
Perguntas frequentes
Posso usar o logo do meu hotel no botão?
Sim, editando o código: envie a sua imagem para o site, troque os endereços de imagem do código pelo da sua imagem e, se ela for quadrada, mude a largura no computador de 320 px para 80 px (veja Personalizar o botão). O painel não tem uma opção para enviá-la.
Posso adicionar um texto embaixo do botão, como "Reservas pelo WhatsApp"?
Sim: adicione a linha do texto logo depois de </a> (veja Personalizar o botão). Use um texto curto: no celular o botão tem 80 px de largura.
Editar o código muda alguma coisa na WeSpeak?
Não. As conversas continuam chegando ao mesmo número e o assistente responde como sempre. A única coisa que não se deve alterar é o link que começa com https://api.whatsapp.com/send.
Como mudo o número ou a mensagem padrão?
Gere o código de novo em Canais → Ferramentas, com o número ou a mensagem nova, e substitua o anterior no seu site. Se você o tinha personalizado, aplique as mudanças outra vez.
A WeSpeak pode mudar o botão ou instalá-lo no meu site?
Não: o botão fica no seu site, e a WeSpeak não edita os sites dos clientes. Quem faz isso é quem administra o seu site, com este guia.
Posso tirar o banner "Atención Inmediata | 24hs"?
Sim. Gere o código com Apenas logo do WhatsApp ligado (assim o botão é só o logo do WhatsApp em todos os dispositivos) ou troque a imagem do banner pela sua.
Posso ter o botão do WhatsApp e o Chat Web ao mesmo tempo?
Sim, os dois convivem. Coloque-os em cantos diferentes para que um não cubra o outro (veja Qual é a diferença em relação ao Chat Web).
Como tiro o botão do meu site?
Apague o código de onde você o colou (ou pause ou exclua a tag no Google Tag Manager e publique). Nada muda na WeSpeak: as conversas que já chegaram continuam em Chats.