Añadir WhatsApp Messenger a tu motor de reservas

Este artículo explica cómo agregar un botón de WhatsApp Messenger a tu motor de reservas (como una imagen sobre la que se puede hacer clic o como un botón flotante) para que tus huéspedes puedan comunicarse contigo de manera más rápida y efectiva.

Descubre Whistle for Cloudbeds, un software de Cloudbeds para gestionar la comunicación con tus huéspedes por SMS, WhatsApp y mensajería móvil antes, durante y después de su estadía. Whistle for Cloudbeds mejora el servicio al cliente mediante interacciones en tiempo real con los huéspedes para aumentar la calificación de tus reseñas y agilizar tus operaciones.

Cómo añadir WhatsApp Messenger a tu motor de reservas

  • Selecciona solo una de las siguientes opciones para agregar un botón de WhatsApp a tu Motor de reservas. Recuerda que no se pueden usar ambas opciones o códigos a la vez.
  • Las siguientes opciones solo son compatibles con el motor de reservas (y no con el motor de reservas Plus) de Cloudbeds.
Opción 1. Como una imagen (para hacer clic)
  1. Selecciona Configuración en el menú de tu Cuenta y haz clic en Motor de reservas.
  2. Selecciona la pestaña Personalizar.
  3. Copia el código de personalización que se encuentra abajo y pégalo en la sección Metaetiquetas personalizadas.
  4. Guarda los cambios.

Cuando copies y pegues el código de personalización, no olvides reemplazar el texto en rojo a continuación:

  • Tu número de WhatsApp en el enlace de la API: puede ser un número de empresa o un número personal, dependiendo de lo que necesites. Recuerda agregar tu número de teléfono con el código de país (sin el signo +) o usar un sitio web como este para generar un enlace. Selecciona el enlace y pégalo para reemplazar todo el número de teléfono. Recuerda no borrar las comillas.
  • YOUR CUSTOM TEXT HERE (Tu texto aquí): agrega un texto personalizado para invitar a tus posibles huéspedes a mantenerse en contacto contigo haciendo clic en este botón de WhatsApp Messenger.

Código de personalización

<!-- Following code is for the adding WhatsApp under Book Now button -->
<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 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>
<!-- Following code logic will append the icons below the text under Book Now button -->
<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>

Vista previa de la imagen (para hacer clic)

Luego de llevar a cabo los anteriores pasos, abre tu Motor de reservas para ver el resultado final y verificar tu botón de WhatsApp Messenger. La imagen para hacer clic se verá debajo del botón Reservar ahora.

Opción 2. Como un botón flotante

Agrega el siguiente código a la sección Personalizar Meta Etiquetas en tu cuenta del PMS de Cloudbeds y reemplaza el número de teléfono de ejemplo 1234567890 con tu número de teléfono preferido (recuerda que puedes reemplazar o eliminar el texto Hello).

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

Vista previa del botón flotante

El botón flotante se verá en la esquina inferior derecha de tu Motor de reservas.

Cómo agregar WhatsApp Messenger a tu motor de reservas Plus

Para agregar WhatsApp Messenger a tu motor de reservas Plus como botón flotante, sigue estos pasos:

  1. Selecciona Configuración en el menú de tu Cuenta y haz clic en Motor de reservas.
  2. Haz clic en la pestaña Personalizar.
  3. Copia el siguiente código de personalización y pégalo en la sección Metaetiquetas personalizadas.
  4. Guarda los cambios.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> 
<a href="
https://api.whatsapp.com/send?phone=12345678910&text=Hello" class="floating" target="_blank">
<i class="fa-brands fa-whatsapp"></i>
</a>
<style>
.floating {
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;
}
</style>
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 2 de 3

Comentarios

0 comentarios

Inicie sesión para dejar un comentario.