Widget de reservas

El widget es el motor de reservas de Aloha Hospitality para un hotel que ya tiene
su propio sitio web. El hotel pega dos líneas de HTML y sus huéspedes reservan
sin salir de su página. Se administra en Sitio web → Widgets, y existe si la
cuenta tiene sitios web contratados.

Lo que se pega no es el motor, es un marco. El fragmento carga un script de
Aloha Hospitality que dibuja un iframe; el flujo de reserva entero — habitaciones,
calendario, cotización, datos del huésped, código de verificación y pago — corre
dentro de ese marco, en un dominio de Aloha Hospitality. Esa decisión explica casi todo lo
demás de esta página:

• No hay nada que instalar ni que actualizar. El script se sirve desde Aloha Hospitality
  Pro; una mejora del widget llega a todos los sitios donde está pegado, sin que
  nadie toque su HTML.
• El sitio del hotel nunca ve los datos del huésped. Nombre, correo y
  teléfono se escriben dentro del marco, y ningún script de la página que lo
  rodea puede leerlos.
• El widget solo carga en los dominios que se autorizaron. En cualquier otro,
  el navegador se niega a mostrarlo.

Un widget vende una sola propiedad

Cada widget queda atado a una propiedad al crearlo, y no se puede mover
después. Un grupo con tres hoteles crea tres widgets — o uno por cada sitio donde
quiera vender, porque nada impide tener varios para la misma propiedad.

Vende con el mismo motor que el sitio web
de Aloha Hospitality: las mismas unidades publicadas, los mismos planes tarifarios del
canal directo, las mismas retenciones y la misma verificación por correo. Una
reserva hecha por el widget es una reserva directa, igual que una del sitio.

Crear un widget

Los dominios autorizados son exactos

Cada dominio es la dirección completa del sitio, con https:// y sin nada
detrás: https://www.hotel.com, no https://www.hotel.com/reservas. No se
aceptan comodines, así que un sitio que responde con y sin www necesita las
dos entradas: https://hotel.com y https://www.hotel.com.

http:// solo se acepta para localhost, para probar el widget en una
computadora antes de publicarlo.

Si el widget aparece en blanco o con un aviso de contenido bloqueado, la causa
casi siempre es esta: la página está en un dominio que no está en la lista.

Las tres formas de pegarlo

Al crear el widget, su pantalla muestra una llave pública (wk_live_…) y
tres fragmentos ya armados con ella: lo más seguro es copiarlos de ahí, en vez
de escribirlos a mano. La llave no es un secreto: identifica al
widget, no da acceso a nada, y está bien que quede visible en el HTML. Lo que
impide que otro la use en su sitio son los dominios autorizados.

El script se carga siempre desde https://book.hospitality.aloha.co/widget.js, y esa
dirección no cambia: un fragmento pegado hoy sigue funcionando sin tocarlo.

Dentro de la página

El widget aparece donde se pegue el div, con el alto de su contenido:

<div data-axis-widget="wk_live_…"></div>
<script src="https://book.hospitality.aloha.co/widget.js" async></script>

Un data-axis-unit="suite-marina" en el mismo div lo hace arrancar en esa
habitación en vez de la lista.

Botón flotante

Un botón fijo en una esquina que abre el widget encima de la página. Va una
sola vez por página, al final, antes de cerrar body:

<script src="https://book.hospitality.aloha.co/widget.js" data-key="wk_live_…" async></script>

Cómo se ve el botón se decide en Aloha Hospitality, no en el código. En la pantalla
del widget, la sección Botón flotante guarda cuatro cosas, y un cambio ahí
llega a la página del hotel en la próxima carga — en un minuto como mucho —, sin
tocar su HTML:

En un teléfono el widget se abre siempre a pantalla completa, sea cual sea
el modo y el tamaño: en una pantalla chica cualquier otra cosa deja el
calendario apretado. Y en una pantalla más chica que el tamaño elegido, la
ventana se achica para entrar.

Los tamaños son tres a propósito, y no un número de píxeles: por debajo de cierto
ancho el calendario y el resumen de la estadía se rompen, y por encima la
ventana no entra en una pantalla común.

Atributos en el fragmento

Cada ajuste también se puede escribir en el propio script, y lo escrito ahí
manda sobre lo guardado en Aloha Hospitality. Sirve para que una página use, por
ejemplo, otra esquina que el resto del sitio — y es la razón por la que un
fragmento pegado antes de que existieran estos ajustes sigue funcionando igual.

Un atributo que no se escribe toma lo guardado, y lo que no está guardado toma
el valor por defecto.

Enlace a una habitación

Cualquier enlace o botón de la página puede abrir el widget directo en una
habitación. Necesita el script del botón flotante en la misma página; si no se
quiere el botón, se elige sin botón en la esquina (o se agrega
data-launcher="none" al script):

<script src="https://book.hospitality.aloha.co/widget.js" data-key="wk_live_…" async></script>

<a href="#" data-axis-unit="suite-marina">Reservar la Suite Marina</a>

El identificador es el final de la dirección de la habitación en el sitio web de
Aloha Hospitality. Si no existe, el widget abre la lista de habitaciones en lugar de un
error.

Abrirlo desde código

Un sitio con su propio JavaScript puede abrir y cerrar el widget sin usar los
atributos, una vez cargado el script:

window.AxisWidget.open()                          // la lista
window.AxisWidget.open({ unit: "suite-marina" })  // una habitación
window.AxisWidget.close()

open acepta además key, para abrir otro widget que no sea el del script.

Eventos para la página

El widget le avisa a la página que lo contiene lo que hace el huésped, sobre todo
para medir conversiones: Google Ads, el píxel de Meta o GA4 a través de
Google Tag Manager. Hay tres formas de escucharlos, y las tres reciben lo mismo.

Un evento del navegador, con el nombre axis-widget: más el del evento:

window.addEventListener("axis-widget:booking_confirmed", function (event) {
  console.log(event.detail.booking_code, event.detail.total, event.detail.currency)
})

AxisWidget.on, con el nombre del evento o "*" para recibirlos todos.
AxisWidget.off deja de escuchar:

window.AxisWidget.on("booking_confirmed", function (data) {
  // data.booking_code, data.total, data.currency…
})

Google Tag Manager. Con el atributo data-datalayer en el script, cada
evento llega además al dataLayer como axis_widget_ más su nombre — por
ejemplo axis_widget_booking_confirmed —, con los datos en el mismo objeto.
Sin el atributo no se toca el dataLayer de la página:

<script src="https://book.hospitality.aloha.co/widget.js"
  data-key="wk_live_…" data-datalayer async></script>

Todos llevan además widget_key y embed (inline o overlay), para
distinguir varios widgets en una misma página. total es un texto con el monto
exacto, como "1380.00", y no un número, para no perder centavos en el camino.
booking_confirmed sale una sola vez por reserva, así que el
booking_code sirve como identificador de la transacción para no contar dos
veces una conversión.

Ningún evento lleva datos del huésped: ni nombre, ni correo, ni teléfono.
El widget es un marco aparte justamente para que la página que lo rodea no los
vea, y los eventos no deshacen eso.

Son de mejor esfuerzo. Si el huésped paga y cierra la página del hotel antes
de que el widget vea la confirmación, booking_confirmed no llega a salir. Para
lo que tiene que ser exacto — facturación, un CRM — está el evento
booking.confirmed por webhook,
que lo envía Aloha Hospitality desde el servidor.

Lo que pasa dentro del widget

El huésped elige habitación, fechas, huéspedes y tarifa, y ve el total
cotizado antes de seguir. Después completa sus datos, recibe un código de 6
dígitos en su correo y lo ingresa: ese código es lo que confirma que el correo
es suyo, y sin él no hay reserva.

Puede cambiar el idioma del widget entre español, inglés y portugués; el correo
con el código sale en el idioma de los correos del widget.

El pago se abre en una pestaña nueva, nunca dentro del marco. Mientras el
huésped paga, el widget queda esperando y muestra la confirmación cuando el pago
entra — aunque el huésped no vuelva a la pestaña del hotel. Los enlaces de los
correos al huésped llevan al widget en Aloha Hospitality, no a la página del hotel.

Apagar y revocar

Ni apagar ni revocar toca las reservas ya hechas, y un huésped que ya pagó
recibe su reserva aunque el widget se haya apagado mientras pagaba.

El botón flotante sigue apareciendo en la página de un widget apagado — el script
no consulta a Aloha Hospitality para dibujarlo —, así que al apagar uno por mucho tiempo
conviene quitar el fragmento del sitio.

Relacionado

• Sitios web y motor de reservas — el motor que usa el widget.
• Planes tarifarios — lo que el widget tiene permitido vender.
• Disponibilidad y overbooking — cómo interactúa una retención con el inventario.