Integración nuevo Motor de Reservas

Integración nuevo Motor de Reservas

1.  Introducción:

Integrar el motor de reservas de availroom es muy sencillo, sólo te llevará 5 minutos.
Básicamente tienes que insertar unas pocas líneas de código javascript en la página donde quieras que el motor de reservas se cargue.
Es compatible con cualquier tipo de web, y además te permite insertar el motor de reserva dentro del propio dominio, sin que te redireccione a una URL externa.

2.  Requisitos:

  1. Necesitarás el ID de AvailRoom de tu motor de reservas que te habremos proporcionado ya.
  2. Necesitarás acceso al fichero HTML de la web donde quieres realizar la integración.
  3. La web necesita que funcione bajo una URL con certificado SSL válido.

3.  Cómo implementar el motor:

El motor consta de 2 partes: El código Javascript y el código CSS, Para implementar el motor necesitáis crear un elemento div en el fichero HTML que quiera mostrar el motor y darle a ésta una id única, que luego necesitaremos proveer como parámetro a una nueva instancia de “availroomBookingApp”.

Pasos para implementar el motor:

3.1    Agregar el css alojado en la url

https://booking.availroom.com/v2/static/css/main.css

Ej: 

<link

href="https://booking.availroom.com/v2/static/css/main.css"
rel="stylesheet"

/>

3.2   Agregar un elemento div con un id único. Todo el contenido dentro de este elemento será reemplazado por el motor de Availroom por lo cual es ideal para poner códigos de carga, por ejemplo, un spinner de carga

Ej:

<div id="availRoomBookingApp">
  Cargando...
<!-- Todo el contenido dentro del elemento div será reemplazado por el motor-->
</div>

3.3   Agregar el Código Javascript alojado en la url

https://booking.availroom.com/v2/availRoomBooking.js

Ej:

<script src="https://booking.availroom.com/v2/availRoomBooking.js">
</script>

3.4   Y luego solo faltaría iniciar en Javascript una instancia de availRoomBookingApp que que acepta por parámetro un objeto con las siguientes propiedades:

    1. divId: ID del elemento div anteriormente creado

    2. environmentId: ID del entorno que os han proporcionado desde soporte.

    3. type: Si es ‘multiunit’ o ‘monounit': Multiunit en el caso de que tengas varias propiedades (2 o más hoteles, varios apartamentos...) y Monounit en el caso de que sea una única propiedad (Ej: una casa rural, un hotel...)

    4. gmapToken: será requerido un token del api de google maps si el motor no estará alojada en nuestro dominio www.availroom.com, caso contrario no necesitará añadir este parámetro

Ej:

<script>
  new availRoomBookingApp({
      divId: "availRoomBookingApp",
      environmentId: "id", <!-- Reemplazar por el ID del entorno proporcionado por soporte  -->
      type: "multiunit",

      gmapToken: "token", <!-- Reemplazar por el token de google maps  -->

});
</script>

4. Código HTML ejemplo mínimo a insertar:


<!-- Importamos los estilos css →

  <head> 

    <link
      href="https://booking.availroom.com/v2/static/css/main.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- Creamos el elemento div con su ID único -->
    <div id="availRoomBookingApp"></div>
    <!-- Importamos el código Javascript  -->
    <script src="https://booking.availroom.com/v2/availRoomBooking.js"></script>
    <!-- Iniciamos El motor de búsqueda pasando de parámetro el ID único del elemento div anterior y el ID del entorno -->
    <script>
      new availRoomBookingApp({

      divId: "availRoomBookingApp",

      environmentId: "id", <!-- Reemplazar por el ID del entorno proporcionado por soporte  -->

      type: "multiunit",

      gmapToken: "token", <!-- Reemplazar por el token de google maps  -->

    });
    </script>
  </body>
</html>

5. Código HTML final de ejemplo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="description"
      content="Fichero de ejemplo motor Booking de Availroom"
    />
    <title>Motor Booking Availroom</title>
    <!-- Importamos los estilos css -->
    <link
      href="https://booking.availroom.com/v2/static/css/main.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- Creamos el elemento div con su ID único -->
    <div id="availRoomBookingApp">Hola</div>
    <!-- Importamos el código Javascript  -->
    <script src="https://booking.availroom.com/v2/availRoomBooking.js"></script>
    <!-- Iniciamos El motor de búsqueda pasando de parámetro el ID único del elemento div anterior y el ID del entorno -->
    <script>
      new availRoomBookingApp({

      divId: "availRoomBookingApp",

      environmentId: "id", <!-- Reemplazar por el ID del entorno proporcionado por soporte  -->

      type: "multiunit",

      gmapToken: "token", <!-- Reemplazar por el token de google maps  --> 

    });
    </script>
  </body>
</html>

6. Páginas del motor AvailRoom

El motor Availroom es un widget “single-page” así que para facilitar su integración. Manejamos las rutas de la página por parámetros (query params) con el key “page”.


Páginas:

  • ?page=home

Página de búsqueda principal

  • ?page=property/:id        donde el :id es el id de la propiedad

Página de detalle con el id de la propiedad separado por un “/”, 

  • ?page=payment

Página checkout para pagar, no se puede acceder si no hay elementos en el carrito

7. Parámetros por URL que acepta el motor de reservas:

Página de búsqueda (page=home):

  • adults: Número de adultos 

ej: adults=2

  • childrenAges:  Edades de los niños separado por comas “,” 

ej: childrenAges=2,6

  • iniDate: Día de inicio de búsqueda con formato “DD-MM-YYYY” 

ej: iniDate=25-06-2020

  • endDate: Día fin de búsqueda con formato “DD-MM-YYYY”

ej: endDate=27-07-2020

  • language: Lenguaje con el que se iniciará el motor

ej: language=es

  • zoneId: ID de zona (proporcionado desde soporte) con la que inicia la búsqueda

Página de detalles (page=property/:id): 

  • language: Lenguaje con el que se iniciará el motor

ej: language=es

  • iniDate: Día de inicio de búsqueda con formato “DD-MM-YYYY” 

ej: iniDate=25-06-2020

  • endDate: Día fin de búsqueda con formato “DD-MM-YYYY”

ej: endDate=27-07-2020


URL de ejemplo en la página principal:

https://www.midominio.com/?adults=1&iniDate=30-06-2021&endDate=02-07-2021&zoneId=D1EF8E3308D5416B8BEBFAB7B5A7166C&childrenAges=0,3&language=en


URL de ejemplo en la página de detalles:

https://www.midominio.com/?iniDate=30-06-2021&endDate=02-07-2021&language=es&page=property/1C089E7188644D3B965870F2DFDBAD34


Lenguajes Soportados: 

  • Español: es

  • Inglés: en

 

    • Related Articles

    • Integración motor de reservas en la web

      1. Requisitos Para integrar el motor de reservas en vuestro propio dominio y vuestra web es necesario disponer de los ficheros que os han proporcionado desde soporte. Más adelante podremos ver los links de descarga de las dos opciones existentes. ...

    • Agregar contenido al motor de reservas

      1. Carga de contenido de los establecimientos Para añadir el contenido al motor de reservas tenemos que abrir la ventana de “Configuración” dentro de Availroom: Una vez dentro nos dirigimos a la sección de establecimientos -> Editar establecimiento: ...

    • Widget de búsqueda en el motor de reservas

      A continuación encontraréis cómo insertar el widget de búsqueda en el motor de AvailRoom: Introducción: La integración del widget del motor de reservas es igual de simple que la de su hermano mayor. Solo tienes que inicializar una función y pasarle 3 ...

    • Cómo administrar las opiniones de nuestro motor de reservas

      Para poder administrar las opiniones que aparecen en vuestro motor de reservas, tenéis que seguir los siguientes pasos: Primero accedemos a Configuración: Una vez en Configuración, pulsamos en la pestaña Establecimientos y después en Editar ...

    • Dónde encontrar el nuevo enlace de checkin web

      En AvailRoom intentamos facilitaros la gestión diaria lo máximo posible. Es por ello que, tras escuchar vuestros comentarios, hemos desarrollado la opción de que podáis compartir un enlace con vuestros clientes para que puedan realizar el checkin ...