Widget de búsqueda en el motor de reservas

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:

  1. 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 parámetros en el HTML que donde desees integrar el motor.


  1. Requisitos:

  • Necesitarás el ID de Availroom de tu motor de reservas que te habremos proporcionado ya.

  • Necesitarás acceso al fichero HTML de la web donde quieres realizar la integración.

  • La web necesita que funcione bajo una URL con certificado SSL válido.

  • La URL del dominio donde se ubica el motor de Availroom

  1. Cómo implementarlo el widget:

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 “availroomBookingWidget”.

Pasos para implementar el motor:

  1. Agregar el css alojado en la url https://booking.availroom.com/widget/static/css/main.css

Ej.: 

  1. 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="availRoomBookingWidget">
  Cargando...
<!-- Todo el contenido dentro del elemento div será reemplazado por el motor-->
</div>

  1. Agregar el Código Javascript alojado en la url https://booking.availroom.com/widget/availRoomBookingWidget.js

Ej.:


  1. Y luego solo faltaría iniciar en Javascript una instancia de availRoomBookingWidget 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. domainUrl: URL del dominio donde estará alojado el motor de Availroom ej: https://www.midominio.com

    4. language: Lenguaje predeterminado (Lenguajes disponibles están indicadas posteriormente). Si no se indica, el lenguaje predeterminado será el español

    5. type: Si es ‘multiunit’ o ‘monounit’

            Ej.:

<script>
   new availRoomBookingWidget({
      divId: "availRoomBookingWidget",
      environmentId: "id",
      domainUrl: "http://midominio.com",
      language: "es",
      type: "multiunit"
    });
</script>


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


<!-- Importamos los estilos css →

  <head> 

    <link href="https://booking.availroom.com/widget/static/css/main.css"
rel="stylesheet" />
  </head>
  <body>
    <!-- Creamos el elemento div con su ID único -->
    <div id="availRoomBookingWidget"></div>
     <!-- Importamos el código Javascript  -->
    <script src="https://booking.availroom.com/widget/availRoomBookingWidget.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 availRoomBookingWidget({
        divId: "availRoomBookingWidget",
        environmentId: "id",
        domainUrl: "http://midominio.com",
        language: "es",
        type: "multiunit"
      });
    </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>Widget Booking Availroom</title>
    <!-- Importamos los estilos css -->
    <link href="https://booking.availroom.com/widget/static/css/main.css"
rel="stylesheet" />
  </head>
  <body>
    <!-- Creamos el elemento div con su ID único -->
    <div id="availRoomBookingWidget">Hola</div>
     <!-- Importamos el código Javascript  -->
    <script src="https://booking.availroom.com/widget/availRoomBookingWidget.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 availRoomBookingWidget({

         divId: "availRoomBookingWidget",

         environmentId: "id",

         domainUrl: "http://midominio.com",

         language: "es",

         type: "multiunit"

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

6. Parámetros opcionales

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

ej: language=es


URL de ejemplo en la página principal:

https://www.midominio.com/?language=en


Lenguajes Soportados: 

  • Español: es

  • Inglés: en


Otros


  • Cambio de Lenguaje programáticamente:

Para cambiar el lenguaje hay que cambiar el parámetro de la url “language=es” a otro lenguaje soportado ya sea con javascript o cualquier otra manera en que puedas modificar el parámetro de la url, por ejemplo https://www.midominio.com/?language=en


Ejemplo con Javascript puro:



  const pathLanguage = window.location.pathname.split("/");

  if (pathLanguage[pathLanguage.length - 1] === "es") {
    window.history.replaceState(null, "", "?language=es");
  }

  if (pathLanguage[pathLanguage.length - 1] === "en") {
    window.history.replaceState(null, "", "?language=en");
  }


Este ejemplo está hecho para clientes que manejan el idioma en base a un endpoint en el pathname de su URL, por ejemplo: https://misitioweb.com/home/es.
El ejemplo recoge el endpoint del path name y en cambia el idioma en base a él.



    • 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. ...

    • 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 ...

    • 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: ...

    • 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 ...

    • Cómo cargar información en el Web Checkin

      Cómo cargar información de tu alojamiento enel web checkin de Availroom 1. Teléfonos de atención al cliente Para establecer la información de los teléfonos de atención, tenemos que ir a la ventana de “Configuración” dentro de Availroom Una vez dentro ...