Añadir WhatsApp Messenger a tu motor de reservas

Este artículo explica cómo añadir un botón de WhatsApp Messenger a su Motor de reservas (como una imagen clickeable o un botón flotante), permitiendo a sus clientes comunicarse con usted de manera más rápida y efectiva.

Añadir WhatsApp Messenger a su Motor de reservas

<!-- El siguiente código es para añadir WhatsApp debajo del botón Reservar ahora -->
<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 - TU TEXTO PERSONALIZADO AQUÍ</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>
<!-- La lógica del siguiente código añadirá los íconos debajo del texto bajo el botón Reservar ahora -->
<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>

<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>

WhatsApp Messenger para tu Motor de reservas Plus

Para añadir WhatsApp Messenger a tu Motor de reservas Plus como un botón flotante, sigue los pasos a continuación:

1. Ve a la página de Configuración  en el menú de Cuenta y haz clic en la sección de Motor de reservas
2. Haz clic en la pestaña de Personalizar
3. Copia el código de personalización a continuación y pégalo en la sección de Metaetiquetas personalizadas.
4. Guardar

Importante: para redirigir correctamente a tus huéspedes a tu WhatsApp, edita el número de teléfono después de la línea de comentario que comienza con el texto 'reemplaza el número de teléfono a continuación':

<!-- **INICIO** Añade un botón flotante de WhatsApp con un botón de cierre (X) estilizado 19.07.2024 **INICIO** -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- Reemplaza el número de teléfono a continuación, '1234567890' con tu número de teléfono, incluyendo el código de país. Opcionalmente, reemplaza el texto 'Hola' a continuación, con tu propio texto de introducción. No edites nada más ni borres las comillas. -->
<a href="https://api.whatsapp.com/send?phone=1234567890&text=Hola" class="cb-floating-whatsapp" target="_blank">
<i class="fa-brands fa-whatsapp"></i>
</a>
<button class="cb-floating-whatsapp-close" aria-label="Cerrar botón de 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>
<!-- **FIN** Añade un botón flotante de WhatsApp con un botón de cierre (X) estilizado 19.07.2024 **FIN** -->

5. Copia el código de personalización a continuación y pégalo en la sección de JavaScript
6. Guardar

<!-- **INICIO** Script de botón flotante de WhatsApp en JavaScript para la función de botón de cierre (X) con estilo 19.07.2024 **INICIO** -->
<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>
<!-- **FIN** Script de botón flotante de WhatsApp en JavaScript para la función de botón de cierre (X) con estilo 19.07.2024 **FIN** -->