Pasos para instalar el widget en tu página web
El widget de Aloha te permite integrar fácilmente el sistema de reservas en tu página web, ofreciendo a los clientes una forma rápida y sencilla de reservar sus estadías. Su instalación es simple y no requiere conocimientos avanzados de programación.
A continuación, te explicamos paso a paso cómo agregarlo a tu sitio web.
Paso 1 - Agrega el archivo de estilos
Para que el widget se vea correctamente, es necesario incluir el archivo de estilos en tu página web.
📌Copia y pega el siguiente código dentro de la etiqueta <head> de tu archivo HTML:
<link rel="stylesheet" href="https://booking-widget.aloha.co/aloha-booking-widget.css"/>
Paso 2 - Agrega el contenedor del widget
Este contenedor es el espacio donde se cargará el widget dentro de tu sitio web.
📌 Copia y pega este código antes de la etiqueta de cierre </body> de tu archivo HTML:
<div id="aloha-widget"></div>
Paso 3: Asignar un ID único al botón para abrir el widget
Para que el widget se abra cuando se haga clic en un botón específico, primero debes asignarle un ID único. En Elementor, puedes hacerlo fácilmente de la siguiente manera:
Abre el editor de Elementor y selecciona el botón que deseas que abra el widget.
En la barra lateral izquierda, ve a la sección “Contenido”.
En el campo “ID del bóton”, asigna un ID único al botón. Por ejemplo, usa btn-widget.
Este ID es esencial para vincular el botón con el script que abrirá el widget de reservas.
Paso 4 - Obtener la clave secreta de la propiedad y agregar el script
La clave secreta de la propiedad es necesaria para autenticar el widget en tu página. Para obtenerla, sigue estos pasos:
Obtén la clave secreta de la propiedad en el sistema Aloha:
Ve a Administrar Sistema en tu panel de administración.
Luego, selecciona Widget.
Allí verás la “Llave de identificación de tu propiedad”. Esta es la clave que necesitas copiar.
Paso 5 - Agregar el script del widget y configurarlo
Una vez que hayas asignado el ID al botón, ahora debes agregar el script que cargará y abrirá el widget cuando se haga clic en el botón. Este código se inserta antes de la etiqueta de cierre </body> de tu archivo HTML.
📌 Copia y pega este código en el área correspondiente:
<!-- Widget Aloha no tocar -->
<script type="text/javascript" src="https://booking-widget.aloha.co/aloha-booking-widget.umd.js"></script>
<script>
var alohaObject = new AlohaBookingWidget({
key: 'TU_CLAVE_SECRETA_AQUI'
});
var button = document.getElementById('btn-widget'); // Este es el ID único asignado al botón
// Agregar un event listener al botón
button.addEventListener('click', function (e) {
e.preventDefault();
// Llamar al método para abrir el widget cuando se hace clic en el botón
alohaObject.open();
});
</script>
Con esto, cuando tus huéspedes hagan clic en el botón con el ID btn-widget, el widget de Aloha se abrirá correctamente.
Asegúrate de reemplazar 'TU_CLAVE_SECRETA_AQUI' con la clave secreta de tu propiedad que obtuviste en el sistema.