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.

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