Esta guía explica paso a paso cómo integrar el widget de reservas de Aloha en tu sitio web, configurando una instancia independiente para cada unidad disponible.

1. Identifica el botón en tu HTML

Cada unidad debe tener un botón (o enlace) con un id único

Ejemplo:

<button id="presidential-suit">Book Suite Deluxe</button>

2. Crea una instancia del widget para esa unidad

• Usa la key de tu propiedad.
• Agrega el unit_slug que corresponde a la unidad en Aloha.
• Define la currency (moneda).

var presidentialSuitObj = new AlohaBookingWidget({
  key: "YOUR_PUBLIC_KEY", // Esta key es visible en Aloha
  unit_slug: "suite-deluxe-4mivb",
  currency: "USD" // Define la moneda por defecto del cliente
});

3. Conecta el botón con el widget

• Escucha el evento click en el botón.
• Llama a .open() sobre la instancia del widget.

var presidentialSuit = document.getElementById("presidential-suit");

presidentialSuit.addEventListener("click", function (e) {
  e.preventDefault();
  presidentialSuitObj.open();
});

4. Repite el proceso para cada unidad

• Crea un nuevo objeto con su propio unit_slug.
• Asócialo con su botón correspondiente.

Ejemplo para otra unidad:

var kingRoomObj = new AlohaBookingWidget({
  key: "YOUR_PUBLIC_KEY",
  unit_slug: "habitacion-suite-king-nckz0",
  currency: "USD"
});
var kingRoom = document.getElementById("king-room");

kingRoom.addEventListener("click", function (e) {
  e.preventDefault();
  kingRoomObj.open();
});

Notas importantes:

• Reemplaza YOUR_PUBLIC_KEY por la key pública visible en tu cuenta de Aloha.
• Cada unit_slug debe coincidir exactamente con el slug de la unidad en Aloha.
• Asegúrate de que el script del widget de Aloha esté cargado en la página antes de instanciar los objetos.

Actualizado el: 30/04/2026