Insertar el motor de reservas en una web externa

Qué es y qué opciones hay

La web del hotel no aloja el motor de reservas: le pone un buscador o un enlace que lleva al huésped al motor de Astro HMS, donde elige, reserva y paga. Hay tres maneras, de más a menos habitual:

El pago siempre ocurre en el motor (Redsys). La web del hotel no ve ni guarda datos de tarjeta, así que no entra en el alcance de PCI DSS.

Paso a paso: poner el buscador en la web

1. Abrir en el navegador la página de ejemplo del motor del hotel: https://<cliente>.astrohms.com/booking-engine/embed-preview. Enseña el buscador funcionando y, debajo, el código listo para copiar, con la dirección y el número del hotel ya puestos.
2. Copiar el código. Tiene esta forma:

   <div data-hms-be
        data-target="https://<cliente>.astrohms.com/booking-engine"
        data-brand="7"
        data-window="_blank"
        data-locale="es"></div>
   <script src="https://<cliente>.astrohms.com/booking-engine/embed.js" async></script>

3. Pegarlo en la web del hotel donde tenga que salir el buscador: en WordPress, en un bloque «HTML personalizado»; en otros gestores, en el bloque o widget de HTML. Si la web tiene varias páginas con buscador, el <script> basta una vez por página.
4. Probar una búsqueda. Debe abrir el motor con las fechas y personas elegidas.
5. Si se quiere, ajustar las opciones y los colores con los atributos del apartado siguiente.

Lo que se pega es solo un formulario: no se incrusta el motor entero (ni en un iframe), y la web del hotel no necesita nada más instalado. Si el motor cambia, el buscador se actualiza solo, porque el <script> se carga desde Astro HMS.

Opciones del buscador

Todo se ajusta con atributos data- en el <div>, sin programar. Solo data-target es obligatorio.

El buscador trae también un enlace «¿Tienes un cupón?» que despliega el campo del código promocional. La llegada sale por defecto a 7 días vista.

Colores y estilo, para que encaje con la web del hotel:

Ejemplo completo con colores:

<div data-hms-be
     data-target="https://<cliente>.astrohms.com/booking-engine"
     data-brand="7"
     data-locale="en"
     data-max-rooms="3"
     data-allow-pets="true"
     data-primary="#00B4D5"
     data-radius="12px"></div>
<script src="https://<cliente>.astrohms.com/booking-engine/embed.js" async></script>

Para webmasters: el buscador también se puede montar desde JavaScript con HMSBookingEngine.mount(elemento, {target, brand, primary, ...}), con los mismos nombres en camelCase. Por esa vía se le puede pasar una lista de hoteles (brands: [{id, name}]) para que el huésped elija el hotel en un desplegable.

Enlaces directos al motor

Un enlace puede abrir el motor ya buscando. Sirve para un botón «Reservar», un correo, una campaña o las redes. Para que busque hacen falta llegada, salida y adultos; sin ellos, el motor abre con el formulario vacío.

Ejemplo, 2 adultos y un niño de 6 años del 12 al 15 de julio de 2027, con cupón:

https://<cliente>.astrohms.com/booking-engine?brand=7&dateStart=2027-07-12&dateEnd=2027-07-15&adults=2&children=1&childrenAges=6&promo_code=VERANO27

Cuidado con los nombres: son exactamente dateStart y dateEnd. Un enlace con date_from o checkin no da error, pero abre el motor vacío.

Seguir una campaña: el motor no lee los parámetros utm_ del enlace para asignar la reserva. Lo que funciona es el cupón: si el código promocional pertenece a una promoción vinculada a una campaña de marketing, la reserva queda asignada a esa campaña.

Cadenas, idiomas, pagos y preguntas frecuentes

Cadenas con varios hoteles. Hay dos maneras:

• Un buscador por hotel, cada uno con su data-brand.
• Un solo buscador sin data-brand. El motor busca en todos los hoteles de la cadena y enseña una tarjeta por hotel, con su disponibilidad y su precio «desde». El huésped elige el hotel allí. Las tarjetas salen en cuadrícula o en lista (view=list en el enlace).

Idiomas. data-locale traduce el buscador al español o al inglés; no hay más idiomas por ahora.

Pagos. El cobro se hace en el motor con Redsys. La web del hotel solo envía la búsqueda, así que no toca datos de tarjeta.

Preguntas frecuentes

• El buscador no sale. Comprobar que se pegó también la línea <script> y que el gestor de la web no la quita. Si sale el texto «missing data-target», falta data-target.
• Al buscar, el motor pide iniciar sesión. El motor está configurado para «Solo usuarios conectados». Hay que cambiarlo a «Todos los usuarios» en los ajustes del sitio web.
• El motor abre vacío. Faltan fechas o adultos, o la llegada es anterior a hoy.
• Sale otro hotel o todos. Revisar el número de data-brand.
• ¿Se puede meter el motor entero dentro de la web? No es lo previsto: se pone el buscador y el motor se abre en su página, donde se hace el pago.
• ¿Y si la web está hecha con Astro HMS? Mejor usar sus bloques: barra de búsqueda, tarjeta compacta, cuadrícula o carrusel de habitaciones, calendario de precios y tarjetas de los hoteles de la cadena.