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 Whistle for Cloudbeds - 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 Whistle for Cloudbeds 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.
Adicione o WhatsApp Messenger ao seu Motor de Reservas
Selecione apenas uma das opções abaixo para adicionar o botão do WhatsApp ao seu Motor de Reservas. Note que não é possível usar ambas as opções/códigos juntos.
As opções a seguir são compatíveis apenas com o Motor de Reservas da Cloudbeds (não compatíveis com o Motor de Reservas Plus da Cludbeds ).
- Siga para a página de Configurações
no menu da Conta
e clique em Motor de Reservas;
- Clique na guia de Personalização;
- Copie o código de personalização abaixo e cole-o no campo de Meta Tags Personalizadas;
- Salve suas alterações.
Ao copiar e colar o código de personalização, lembre-se de substituir o texto em vermelho abaixo:
- Seu número de WhatsApp no link da API - Pode ser um número comercial ou pessoal, dependendo de suas necessidades. Lembre-se de adicionar seu número de telefone com o código do país (sem o sinal de "+") ou usar um site como este para gerar um link; acesse e copie, substituindo o existente por completo, sem apagar as aspas.
- Seu texto aqui - Adicione um texto personalizado para convidar seus potenciais hóspedes a manter contato com você através deste botão do WhatsApp Messenger.
Código de Personalização
<!-- O código a seguir é para adicionar o WhatsApp abaixo do botão Reservar Agora -->
<div class="socialMedia">
<a href="https://api.whatsapp.com/send?phone=12345678910" class="socialWhatsapp" target="_blank">
<i class="fa fa-whatsapp"></i>
</a>
<p style="font-size: 13px; margin-top: 10px;">Whatsapp - SEU TEXTO PERSONALIZADO AQUI</p>
</div>
<style>
.socialWhatsapp {
background-color:#25d366;
color:#FFF;
border-radius:50px;
box-shadow: 2px 2px 3px #999;
font-size: 40px !important;
width:50px;
height:50px;
line-height: 0px !important;
margin-top:25px;
}
.fa-whatsapp { margin-top:18px; font-size: 38px !important; }
.socialMedia {
display: none;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1fr;
text-align: center;
place-items: center;
}
</style>
<!-- A lógica do código a seguir irá adicionar os ícones abaixo do texto sob o botão Reservar Agora -->
<script type="text/javascript">
window.addEventListener("load", function(event) {
let social2 = document.querySelector(".socialMedia");
let content2 = document.querySelector(".secure-sm");
content2.insertAdjacentElement('afterend', social2);
social2.style.display = "grid";
});
</script>
Pré-visualização da imagem clicável
Após completar os passos acima, vá para o seu Motor de Reservas para revisar o resultado final e verificar o botão do WhatsApp Messenger. A imagem clicável aparecerá abaixo do botão Reservar Agora:
Adicione o seguinte código no campo de Personalização de Meta Tags em seu PMS da Cloudbeds e substitua o número de telefone de exemplo 1234567890 pelo número de telefone de sua preferência (o texto "Hello" também pode ser substituído por seu texto personalizado ou removido)
<a href="https://api.whatsapp.com/send?phone=+1234567890&text=Hello%21%20"
class="floating" target="_blank">
<i class="fa fa-whatsapp float-button"></i>
</a>
<style>
.floating {
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
box-shadow: 2px 2px 3px #999;
z-index:100;
}
.fa.float-button{
font-size: 40px !important;
margin-top:23px;
}
</style></<a>Pré-visualização do botão flutuante
O botão flutuante aparecerá no canto inferior direito do seu Motor de Reservas:
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:
- Acesse a página de Configurações
e clique na seção Motor de Reservas;
- Clique na guia Personalização;
- Copie o código de personalização abaixo e cole no campo Meta Tags Personalizadas;
- 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** -->- Copie o código de personalização abaixo e cole no campo JavaScript;
- 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** -->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.
Comentários
Por favor, entre para comentar.