Adicione o Whatsapp Messenger em seu Motor de Reservas

Este artigo explica como adicionar um botão do WhatsApp Messenger ao seu Motor de Reservas (como uma imagem clicável ou botão flutuante), permitindo que seus hóspedes se comuniquem com você de forma mais rápida e eficaz.

  Conheça o Cloudbeds Guest Experience - O Software de Engajamento de Hóspedes da Cloudbeds permite que hotéis e hóspedes se comuniquem via SMS, WhatsApp e mensagens móveis antes, durante e após a estadia. O Cloudbeds Guest Experience aprimora o atendimento ao cliente por meio do engajamento em tempo real com os hóspedes, ajudando a aumentar as avaliações dos serviços e a simplificar as operações internas.


WhatsApp Messenger para o seu Motor de Reservas Plus

Para adicionar o WhatsApp Messenger ao seu Motor de Reservas Plus como um botão flutuante, siga os passos abaixo:

  1. Acesse a página de Configurações no menu da Conta e clique na seção Motor de Reservas;
  2. Clique na guia Personalização;
  3. Copie o código de personalização abaixo e cole no campo Meta Tags Personalizadas;
  4. Salve;

Importante: para redirecionar seus hóspedes corretamente para o WhatsApp, edite o número de telefone após a linha de comentário que começa com o texto 'substitua o número de telefone abaixo':

<!-- **INÍCIO** Adiciona um botão flutuante do WhatsApp com um botão de fechar estilizado (X) 19.07.2024 **INÍCIO** -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- Substitua o número de telefone abaixo, '1234567890' pelo seu número de telefone, incluindo o código do país. Opcionalmente, substitua o texto 'Olá' abaixo, pelo seu próprio texto de introdução. Não edite nada mais ou apague as aspas. -->
<a href="https://api.whatsapp.com/send?phone=1234567890&text=Olá" class="cb-floating-whatsapp" target="_blank">
<i class="fa-brands fa-whatsapp"></i>
</a>
<button class="cb-floating-whatsapp-close" aria-label="Fechar botão do WhatsApp">
<i class="fa-solid fa-xmark"></i>
</button>
<style>
.cb-floating-whatsapp {
position: fixed;
width: 60px;
height: 60px;
bottom: 70px;
right: 25px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 30px;
z-index: 10000;
}
.cb-floating-whatsapp-close {
position: fixed;
width: 20px;
height: 20px;
bottom: 125px;
right: 20px;
background-color: #25d366;
color: white;
border: none;
font-size: 20px;
z-index: 10001;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.cb-floating-whatsapp-close i {
font-size: 15px;
font-weight: 700;
}
</style>
<!-- **FIM** Adiciona um botão flutuante do WhatsApp com um botão de fechar estilizado (X) 19.07.2024 **FIM** -->
  1. Copie o código de personalização abaixo e cole no campo JavaScript;
  2. Salve.
<!-- **INÍCIO** Script JavaScript do botão WhatsApp flutuante para a função de botão de fechar estilizado (X) 19.07.2024 **INÍCIO** -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var whatsappButton = document.querySelector('.cb-floating-whatsapp');
var closeButton = document.querySelector('.cb-floating-whatsapp-close');
closeButton.addEventListener('click', function() {
whatsappButton.style.display = 'none';
closeButton.style.display = 'none';
});
});
</script>
<!-- **FIM** Script JavaScript do botão WhatsApp flutuante para a função de botão de fechar estilizado (X) 19.07.2024 **FIM** -->
image.png

 Importante: Se você tiver o Motor de Reservas implementado em seu site, como a Experiência Imersiva, ou se fizer ajustes nos tamanhos e na posição do botão do WhatsApp, certifique-se de que o botão não bloqueie outros botões essenciais do Motor de Reservas, em Desktops e dispositivos móveis. Como em qualquer alteração de site, é importante verificar os resultados e contar com a ajuda de um designer ou desenvolvedor de sites experiente.

 Esta personalização do Motor de Reservas inclui um simples botão 'X' que os hóspedes podem usar para fechar o botão do WhatsApp, se desejarem. Entre em contato com o suporte se surgirem quaisquer dúvidas.

Esse artigo foi útil?
Usuários que acharam isso útil: 3 de 4

Comentários

0 comentário

Por favor, entre para comentar.