Widgets witbooking

Modificado el Vie, 14 Mar a 11:07 A. M.

Introducción

Witbooking Widgets SDK es un conjunto de herramientas que permite integrar el motor de reservas en el sitio web del establecimiento.

Ofrece una forma muy sencilla de integrar el motor de reservas en el sitio web, permitiéndole personalizar la apariencia y el diseño del motor de reservas para que se adapte al sitio web, pero también da la flexibilidad de personalizar la experiencia del usuario según necesidades.

Requisitos previos

Es fundamental asegurarse de que el motor con el que trabajaremos tenga nuestro nuevo motor v21 y nuestro sistema de fidelización configurado antes de iniciar la configuración de Witbooking Widgets. En caso de que esto no sea posible, la configuración de Witbooking Widgets no podrá llevarse a cabo.

Para utilizar el SDK, es necesario tener conocimientos básicos de programación web y estar familiarizado con los siguientes lenguajes y tecnologías:

HTML
JavaScript

Es importante que antes de empezar a configurar Witbooking Widgets nuestro sistema de Widgets debe responder bajo un subdominio de su página web, para garantizar el correcto comportamiento de cookies entre los sistemas, para ello debe crear el siguiente CDM en la zona DNS de su dominio y notificar el equipo de Witbooking el CNAME generado:

Type Name Value CNAME wit-widgets cname.vercel-dns.com

*En el nombre del CNAME puede indicar lo que se prefiera, de nuestro lado recomendamos wit-widgets.

Este nuevo dominio es el valor que debe colocar en el parámetro hostWidgets que se especifica en la sección Inicialización.

Dominios donde se va utilizar el Widget

Se debe notificar el equipo de Witbooking el listado de dominio de donde se va utilizar el Widgets, para poder darle permisos de utilizarlo, es decir si el Widgets se va utilizar dentro de un landing page, nos deben notificar cual es el dominio que responde ese landing page, por ejemplo https://www.witbooking.com. En caso que no se haga este paso arrojara el siguiente error:

Open image (2).png

Descarga e instalación

Para implementar nuestro SDK se debe utilizar el link nuestro CDN :

https://widgets.dev.witbooking.com/beta/1.0.0-beta.1/sdk.js

La versión beta es una prueba temprana de nuestro software con características nuevas. Puede tener pequeños problemas, por lo que valoramos sus comentarios para mejorarla antes del lanzamiento oficial.

Para instalar el SDK, simplemente pegue este fragmento de código en la etiqueta <head> o <body> de su sitio web. ¡No se preocupe, no ralentizará el performance de su sitio web, se lo prometemos!

<script>       (function (w, d) {         if (w.WitBooking) {           console.error("WitBooking embed already included");           return;         }         w.WitBooking = { _c: [] };         [           "init",           "login",           "getCurrentUser",           "logout",           "showOptionsWidget",           "setOptionsWidgetConfig",           "setTheme",           "setCustomization",         ].forEach(           (me) =>             (w.WitBooking[me] = function () {               w.WitBooking._c.push([me, arguments]);             })         );         var sc = d.createElement("script");         sc.type = "text/javascript";         sc.async = true;         sc.src = "https://widgets.dev.witbooking.com/beta/1.0.0-beta.1/sdk.js";         var before = d.getElementsByTagName("script")[0];         before.parentNode.insertBefore(sc, before);       })(window, document); </script> 

Esto asegura que el script se cargue de forma asíncrona y que el SDK se cargue solo una vez, incluso si el script se incluye varias veces en el sitio web. La parte asíncrona es importante para garantizar que el SDK no bloquee la carga del sitio web, ya que puede tardar un tiempo en cargarse, dependiendo de la conexión a internet del cliente.

Además, asegura que el SDK se pueda acceder inmediatamente a través de la propiedad global WitBooking, incluso si el SDK aún se está cargando. Todos los métodos públicos del SDK se exponen a través de esta propiedad y en caso de que el SDK aún no se haya cargado, las llamadas de método se encolan y se ejecutan una vez que se carga el SDK.

Inicialización

Antes de poder utilizar los Widgets, deberá inicializar el SDK. Para inicializar el SDK, debe llamar al método init. Este método acepta un objeto con las siguientes propiedades:

hostWidgets: Dominio de nuestro widgets que debe tener un subdominio del dominio de la página web.
hostLoyalty: Dominio del servicio de fidelización del motor
hostMain: Dominio del motor.
formType: Identificador del tipo de formulario que se va a mostrar. Los valores posibles son "company", "agency" o "customer". Por defecto, el valor es customer.
tierId: Identificador del nivel que el usuario tendrá cuando se complete el registro. Es necesario para crear cualquier organización, es decir, si el tipo de formulario es agency o company, es obligatorio. Si no se incluye, el formulario mostrará un error.
organizationId: Identificador de la compañía o agencia a la que el usuario desea asociarse después del registro. Es un parámetro opcional y se puede combinar con el parámetro tierId. Si se indican organizationId y tierId, el usuario se registrará con estos parámetros. Si no se indica tierId, el sistema tomará el nivel de progresión predeterminado.
uiLocales: Idioma en el que se deben representar los formularios.
propertyTicker: Identificador del hotel.
brand: Nombre de la marca asignada al hotel.
analyticsCodes (opcional): Código UA de Google Analytics separado por comas.
analyticDomains (opcional): Dominio registrado en Google Analytics.
isChain (opcional): identifica si el motor corresponde a una propiedad individual o a un agregador de propiedades , el valor deben ser true o false y su valor por defecto es false.
tierCompanyId (opcional): Id del tier que se desea asignar por defecto a las empresas que se registres, este propiedad habilita en menú del header la opción de empresa
tierAgencyId (opcional): Id del tier que se desea asignar por defecto a las agencias que se registres, este propiedad habilita en menú del header la opción de agencia
gtmCodes (opcional): Arreglo que contiene los contenedores de Google Tag Manager que se desean configurar, es un campo opcional y puede ser uno o más. Si se desea solo incluir un id, se envía de la siguiente forma: gtmCodes:["GTM-123"].

Este es un ejemplo de llamada al método init:

WitBooking.init({   hostWidgets: "https://widgets-dev.witbooking.com",   hostMain: "engine.devel.witbooking.com",   hostLoyalty: "auth-loyalty.devel.witbooking.com",   brand: "witbrand",   propertyTicker: "petit_santabarbara",   formType: "customer",   uiLocales: "es",   tierCompanyId: "83c29a44-a4c6-43e6-9d0a-abbec0096173",   tierAgencyId: "cb2d2cdd-fc4e-42f2-81ba-0c1641c57cd7",   isChain: false,   gtmCodes: ["GTM-123", "GTM-456"] });

Los datos que se están utilizando, en este ejemplo son datos de nuestros servidores de desarrollo que puede utilizar en su ambiente de desarrollo pero es importante que no se usen en ambiente productivo.

Recomendamos llamar al initmétodo dentro de la misma <script>etiqueta que el script de instalación (incluido en el paso anterior), pero no es necesario. Puede llamar al método init desde cualquier parte de su código, siempre que se llame antes que cualquier otro método del SDK, o el SDK arrojará un error.

Además, también puede proporcionar una onloaddevolución de llamada, que se llamara tan pronto como el SDK esté listo para usarse. Esto no debería ser necesario. Los métodos del SDK se pueden llamar en cualquier momento, sin preocuparse por su estado. Sin embargo, si aún desea suscribirse a este evento, así es como debe hacerlo:

WitBooking.onload = () => {   console.log("WitBooking loaded", WitBooking); };

Configuraciones

El SDK le permite configurar la apariencia del motor de reservas para que coincida con el diseño del sitio web. Actualmente, hay dos formas de personalizar el motor de reservas, pero estamos trabajando en agregar más opciones de personalización. Puedes actualizar el tema del motor de reservas, pero también puedes personalizar las propiedades de los widgets individuales (más información en la sección de Widgets).

Tema

Puede actualizar los elementos del tema del motor llamando al método setTheme. Este método acepta un objeto con las siguientes propiedades:

{   colors: {     primary: string;     secondary: string;   } } 

Puede actualizar los elementos del tema del motor llamando al método setTheme. Este método acepta un objeto con las siguientes propiedades:

Aquí hay un ejemplo de cómo actualizar el tema:

WitBooking.setTheme({   colors: {     primary: "#ff0000",     secondary: "#0000ff"   } }); 

Al igual que con la llamada init, recomendamos llamar a setTheme justo después de la inicialización, pero no es necesario. Puede llamar a este método en cualquier momento, pero tenga en cuenta que si un Widget está siendo mostrado al usuario, los cambios se aplicarán al Widget de inmediato, por lo que el usuario puede notar un cambio repentino en la apariencia del Widget.

Autenticación

El SDK le permite autenticar a los usuarios utilizando la API de Fidelidad. Ofrece estos métodos para manejar la autenticación del usuario por usted:

¿Está conectado?

Para verificar si el usuario está actualmente conectado, puede llamar al método isLoggedIn. Este método devuelve un valor booleano que indica si el usuario está conectado o no.

if (WitBooking.isLoggedIn()) {   console.log("El usuario está conectado"); } else {   console.log("El usuario no está conectado"); } 

Inicio de sesión

El método login abrirá una ventana emergente con el formulario de inicio de sesión. Los usuarios pueden iniciar sesión o registrarse desde este formulario. Este método devuelve una promesa que se resolverá con el objeto de usuario si el usuario inicia sesión, o se rechazará si el usuario cierra la ventana emergente o ocurre algún otro problema.

WitBooking.login()   .then(user => {     console.log("Usuario conectado", user);   })   .catch(error => {     console.log("Ocurrió algún error.", error);   }); 

No necesita manejar la promesa para autenticar con éxito al usuario. El SDK manejará la autenticación por usted y la próxima vez que llame al método isLoggedIn, devolverá verdadero. Puede recuperar la información de usuario autenticado en cualquier momento llamando al método getCurrentUser a continuación.

También contamos con un evento onLogin el cual se ejecuta con la sección cuando el login es exitoso, puede ser útil dependiendo del flujo que se utilice (más información en la sección de Widgets), por ejemplo:

WitBooking.onLogin = (session) => {     loadUser(session.guestData.name);     setCheckAvailability(session.id); }; 

Obtener usuario actual

El método getCurrentUser devuelve una promesa que se resolverá con la información del usuario actual (el mismo objeto de usuario que se recibió en el método de inicio de sesión). Si el usuario no está autenticado, se rechazará con un error.

WitBooking.getCurrentUser()   .then(user => {     console.log("Usuario conectado", user);   })   .catch(error => {     console.log("El usuario no está conectado", error);   }); 

Cerrar sesión

Puede cerrar sesión al usuario llamando al método logout. Este método devuelve una promesa que se resolverá cuando se haya realizado correctamente el cierre de sesión.

WitBooking.logout()   .then(() => {     console.log("Usuario desconectado");   })   .catch(error => {     console.log("Ocurrió algún error.", error);   }); 

Cuando el usuario cierra sesión correctamente, también se ejecutará el evento onLogout para notificar al padre que se ha cerrado la sesión.

WitBooking.onLogout = () => {   console.log("onLogout") } 

Cerrar Widget

El método close, cierra el modal y cancela el flujo si esta ocurriendo en ese momento:

WitBooking.close();

Widgets

El SDK ofrece un conjunto de widgets que puede utilizar para mostrar el motor de reservas en tu sitio web. Cada widget tiene sus propias opciones de personalización que puede usar para personalizar la apariencia y el comportamiento del widget. Sin embargo, también puede usar la configuración predeterminada y el widget funcionará sin problemas.

Widget de opciones

El Widget de opciones muestra un popup que mostrará los detalles del perfil del usuario (nombre, correo electrónico y nivel de categoría). También ofrece dos opciones: permite al usuario cerrar sesión o ir a su página de reservas.

Si el usuario no está autenticado, este Widget automáticamente le pedirá que inicie sesión o se registre y luego mostrará automáticamente los detalles del perfil del usuario.

Puedes mostrar el Widget de opciones llamando al método showOptionsWidget.

WitBooking.showOptionsWidget();

Además, puede elegir personalizar el Widget de opciones llamando al método setOptionsWidgetConfig. Este método acepta un objeto con las siguientes propiedades:

WitBooking.setOptionsWidgetConfig({   translations: {     greeting: "La traducción para el mensaje de saludo. Por defecto es 'Hola'",     tier: "La traducción para la etiqueta de nivel. Por defecto es 'Nivel'",     buttons: {       bookings: "La traducción para el botón de reservas. Por defecto es 'Ir a mis reservas'",       close: "La traducción para el botón de cerrar. Por defecto es 'Seguir navegando'",       signOff: "La traducción para el botón de cierre de sesión. Por defecto es 'Cerrar sesión'"     }   },   actions: {     bookings: {       hostMain: "URL de hostMain. Por defecto es el valor pasado durante la inicialización",       propertyTicker: "propertyTicker. Por defecto es el valor pasado durante la inicialización",     },     signOff: {       hostMain: "URL de hostMain. Por defecto es el valor pasado durante la inicialización",       brand: "Marca. Por defecto es el valor pasado durante la inicialización",       sessionId: "propertyTicker. Por defecto es el valor pasado durante la inicialización"     }   } });

No es necesario proporcionar todos los parámetros de configuración a la vez, puede actualizar la configuración tantas veces como se quiera, y solo se actualizarán los parámetros proporcionados. Aquí hay un ejemplo de personalización del Widget de opciones:

WitBooking.setOptionsWidgetConfig({   translations: {     greeting: 'Hola',     tier: 'Nivel',     buttons: {       bookings: 'Ir a mis reservas',       signOff: 'Cerrar sesiòn'     }   } });

Se ha de tener en cuenta que si el widget se está mostrando actualmente al usuario, los cambios se aplicarán al widget de inmediato, por lo que el usuario puede notar un cambio repentino en la apariencia del widget. Por lo tanto, deberá asegurarse de llamar a este método antes de mostrar el Widget.

Traducciones

Nuestro Widget detecta automáticamente el idioma del navegador y realiza la traducción correspondiente por defecto. Actualmente, soportamos los siguientes idiomas:

Español (es)
Euskera (eu)
Inglés (en)
Alemán (de)
Catalán (ca)
Portugués (pt)
Neerlandés (nl)
Ruso (ru)
Italiano (it)
Francés (fr)
Coreano (ko)
Danés (da)

Si necesita utilizar un idioma que no está en esta lista, puede utilizar la función setOptionsWidgetConfig que se especifica en el punto anterior y pasar la traducción correspondiente. El Widget dará prioridad a la configuración que envíe a través de la función setOptionsWidgetConfig.

Ejemplos de uso

Contamos con una página web demo que simula la página web de un hotel y está implementado nuestro widgets:

Demo

Código de página web ejemplo:
examples.zip

Resolución de problemas

Si tiene alguna duda, problema o sugerencia con respecto a Witbooking Widgets , no dude en contactarnos en soporte@witbooking.com. Nuestro equipo de soporte estará encantado de ayudarle a resolver cualquier problema que pueda tener. Recuerde, estamos aquí para ayudarlo a tener éxito en su negocio de alojamiento y ofrecer una experiencia de reserva sin problemas a sus clientes.