Este guia é para quem administra o site do hotel: o próprio hotel, o web designer ou a agência. Instalar o Chat Web é colar um código de uma linha, uma única vez, num lugar que carregue em todas as páginas do site — igual a um pixel de rastreamento. Leva poucos minutos e, depois, não é preciso mexer em mais nada: a aparência e o comportamento do chat são configurados na WeSpeak.
Em vídeo: o tutorial de configuração (em espanhol) mostra de onde se copia o código e como instalá-lo com o Google Tag Manager, além de como personalizar o chat.
Ver vídeo: configuração do Chat Web
1. Pegue o código
O hotel copia o código na WeSpeak, em Canais → Conectados, com o botão de copiar do cartão Chat Web (veja como ativá-lo). Ele é assim:
<script async src="https://chat.wespeak.pro/widget.js?id=7f3a9c2e4b1d48f6a0c5e9b2d7a1f3c8"></script>
O id do final é diferente para cada hotel: use sempre o código que enviarem para você.
- Um código por propriedade. Se o hotel tiver várias propriedades, cada uma tem o seu código: no site de cada propriedade vai o dela, assim as conversas ficam associadas à propriedade certa.
- Um único código por página. Se você colar dois na mesma página (por exemplo, os de duas propriedades), só o primeiro funciona.
- Não é preciso alterá-lo nem colá-lo de novo quando o hotel muda as cores, a imagem ou a saudação do chat: essas mudanças se aplicam sozinhas.
- Domínios permitidos. Se o hotel preencheu essa lista na WeSpeak, o endereço do seu site precisa estar nela exatamente como o navegador mostra: com
https://e, se você usa as duas versões, com e semwww. Se o chat também for para outro domínio —o do motor de reservas, por exemplo—, esse endereço também.
2. Cole o código no seu site
A regra é sempre a mesma: uma única vez, no modelo comum a todas as páginas, logo antes de </body>. Também funciona dentro do <head>, porque ele carrega com async e não deixa a página mais lenta. Escolha a opção de acordo com a forma como o seu site foi feito.
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 chat 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" ou "scripts do rodapé": ele serve do mesmo jeito.
- 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 de "scripts personalizados", "código de rastreamento" ou "HTML no rodapé": o mesmo lugar onde se cola um pixel da Meta ou o código do Google Analytics. |
Sites feitos sob medida (React, Next.js e outros)
Carregue o código uma vez, no modelo ou layout raiz, e não a cada troca de rota.
No Next.js, use o componente
Scriptcomstrategy="afterInteractive":<Script src="https://chat.wespeak.pro/widget.js?id=7f3a9c2e4b1d48f6a0c5e9b2d7a1f3c8" strategy="afterInteractive" />
Não carregue de forma adiada (por exemplo, com
strategy="lazyOnload"ou "quando a página terminar de carregar"): a bolha esperaria todo o resto baixar —vídeos, fotos pesadas— e poderia levar muitos segundos para aparecer.
3. Opcional: abra o chat por um botão do seu site
Se você quiser que um botão próprio do seu site ("Fale com a gente pelo chat", "Tire suas dúvidas no chat") abra o chat, chame WsChat.show():
<button type="button" onclick="window.WsChat && WsChat.show()">Fale com a gente pelo chat</button>
Também existem WsChat.hide(), que fecha o chat, e WsChat.toggle(), que abre ou fecha. O código do Chat Web precisa estar instalado nessa mesma página.
4. Confira se funciona
- Abra o seu site numa janela anônima: a bolha deve aparecer no canto inferior (à direita, ou à esquerda se o hotel a moveu).
- Abra a bolha e escreva uma pergunta de teste: o assistente responde em segundos.
- Peça ao hotel que confirme que a conversa chegou a Chats na WeSpeak.
- Repita o teste num celular: ali o chat abre em tela cheia.
💡 Se o seu site usa um plugin de cache ou uma CDN, limpe o cache depois de colar o código.
Se algo não funcionar
| O que acontece | O que revisar |
|---|---|
| A bolha não aparece | Se o código está publicado: abra o código-fonte da página (Ctrl+U, ou Cmd+Option+U no Mac) e procure chat.wespeak.pro. Confira também o cache do site, se o contêiner do Google Tag Manager foi publicado e se o seu endereço está em Domínios permitidos (caso o hotel tenha preenchido essa lista). |
| Aparece na página inicial, mas não em outras páginas (por exemplo, nas de reserva) | O código está só em um modelo, ou essas páginas estão em outro domínio. Cole-o no modelo comum e peça ao hotel que adicione esse domínio em Domínios permitidos. |
| A bolha demora para aparecer | O código está sendo carregado de forma adiada ou a página é muito pesada (vídeos, imagens grandes). Carregue-o com async no <head> ou antes de </body>, e não "quando a página terminar de carregar". |
| A bolha aparece, mas o chat não carrega | Costuma ser um navegador muito antigo (no iPhone, anterior ao iOS 16.4). Depois de 10 segundos aparece um ✕ para fechar o chat. Num navegador atual, funciona. |
| O hotel mudou as cores ou a saudação e elas não aparecem | A configuração é renovada em uns 5 minutos. Recarregue a página depois desse tempo. |
| O seu site tem uma política de segurança de conteúdo (CSP) rígida | Permita https://chat.wespeak.pro para scripts, iframes, conexões e imagens. Se o chat usar a imagem própria do hotel, permita também o domínio dessa imagem. |
Como remover
Para tirar o chat do site, apague o código de onde você o colou (ou pause ou exclua a tag no Google Tag Manager e publique). A bolha some e não entram conversas novas; o histórico continua salvo na WeSpeak, e o mesmo código volta a funcionar se você colá-lo de novo.