Centro de Ayuda

Motor de reservas/ventas online

Ajustes

Integración del Motor de reservas en una web externa a Spalopia

1. Pasos para integrar el motor online.

Crear las diferentes páginas que van a contener el motor, preferiblemente una por idioma:

Ejemplos:

💡 Recomendación

Crear una página de confirmación (/spa-confirmation) dentro de la propia web para insertar el iframe sin ninguna configuración extra (ni filtros, ni modos de compra, etc.).

La función de esta página será la de mostrar al cliente la confirmación de compra de una reserva o bono, y se utilizará en los enlaces del email de confirmación. Dicha página no tiene la necesidad de estar en el menú, pero si debe ser accesible.

⚠️ Es necesario informar a soporte@spalopia.com de la página que se ha creado con esta característica para que podamos configurarla correctamente.

En cada una de las páginas creadas habrá que seguir los siguientes pasos para tener el motor correctamente integrado.

1. Introducir las siguientes librerías:

JQuery 3.1.1 o superior, y sólo si la página no la incluye ya:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Librería del motor de reservas:

<script type="text/javascript" src="https://api.spalopia.app/utbapis/utbinsert/load.php"></script>

2. Añadir un div con un identificador único donde se ubicará el motor de reservas dentro de la página. Deberá estar siempre dentro del tag <body>:

<body>
<!-- Contenido previo al motor -->
<div id="utb-iframe-spa"></div>
<!-- Contenido posterior al motor -->
</body>

En el paso siguiente se hará referencia al id de este div para insertar aquí el motor (variable id_contenedor_motor).

3. Añadir el script encargado de generar insertar el motor de reservas, y rellenar los siguientes parámetros y variables de javascript:

<script type="text/javascript" > 
var id_contenedor_motor = 'utb-iframe-spa';
var utbSpaBookingObj = new UTBInsertSpaBooking({
base: 'https://160-f1401000.spalopia.app/engine/163/channel/web',
path: 'utb-spa-booking-simple',
lang: 'es',
msg_loading: 'Cargando...',
currency: 'EUR',
buy_variant: 'booking',
promotid: 3362, //id del servicio
single: true //modo sin filtros
});
utbSpaBookingObj.insertIFrameAndPReset(id_contenedor_motor);
</script>

Propiedad	Descripción
base	URL base del motor de reservas. Normalmente con formato: https://160-{id_brand}-spalopia.app/engine/{id_motor_spa}/channel/{id_o_alias_canal_de_venta} id_brand = proporcionado por Spalopia (ej: f1401013, f1401014) id_motor_spa = proporcionado por Spalopia (ej: 163,164, 165) id_o_alias_canal_de_venta = normalmente "web", pero es válido cualquier alias o id de canal creado en el backoffice (ej: web, 20, web_hotel).
path	Ruta base del motor de reserva. Mantener por defecto o usar las siguientes: utb-gift-vouchers/treatments (Carga el motor de reservas con botón de regalar) utb-spa-booking-simple (Carga el motor de reservas con la configuración por defecto) utb/bono/pay-start (Carga el motor de reservas directamente en el pago) Si deseamos cargar a vista simplificada añadir el parámetro single. Ejemplo: utb-spa-booking-simple/?single
lang	Idioma en el que se mostrará el motor. Será válido cualquier idioma disponible en el backoffice. Ejemplos: es, en, fr, de.
msg_loading	Customiza el mensaje que aparece al cargar el motor. Útil para modificar el mensaje mostrado según el idioma.
currency	Moneda con la que se operará. Ejemplos: EUR, GBP, USD
buy_variant	‘booking’, ‘buy’, ‘gift’ . Si promotid existe, muestra el servicio con la opción de compra seleccionada. Si promotid no existe, muestra solo los botones configurados.
promotid	Para filtrar el listado a un solo servicio.
single	Modo simple, oculta filtros, categorías y ordenación.

⚠️ IMPORTANTE

Una vez el motor ha sido insertado, debes notificar a soporte (soporte@spalopia.com) con el dominio y URL donde se insertado el motor (paso 1) para finalizar el proceso de instalación.

Ejemplo:

A continuación, un ejemplo completo de una página con el motor insertado:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de motor de reservas Spalopia</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body{
margin: 0;
padding: 0;
}
.header{
height: 200px;
background-color: #bbb;
}
.container{
width: 1034px;
display: block;
margin: 0 auto;
}
.footer{
height: 200px;
background: #383434;
}

</style>

</head>
<body>
<div class="header">
<div class="container">
</div>
</div>
<div class="content">
<div class="container">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://api.spalopia.app/utbapis/utbinsert/load.php"></script>

<div id="utb-iframe-spa"><!-- Lugar donde se insertará el motor de reservas --></div>
<script type="text/javascript" >
var utbSpaBookingObj = new UTBInsertSpaBooking({
base: 'https://160-f1401000.spalopia.app/engine/163/channel/web',
path: 'utb-spa-booking-simple',
lang: 'es',
msg_loading: 'Cargando...',
currency: 'EUR'
});
utbSpaBookingObj.insertIFrameAndPReset('utb-iframe-spa');
</script>
</div>
</div>
<div class="footer">
<div class="container">
</div>
</div>
</body>
</html>

2. Cargar el motor de reserva directamente en el paso del pago.

Podemos cargar el iframe de las siguientes formas:

A través de la URL del motor de reservas

Añadir a la URL del motor de reserva los siguientes parámetros:

utb_path - Establecemos la ruta del pago, que en este caso es utb/bono/pay-start.
utb_id - Establecemos el id del tratamiento o paquete.
utb_bundle - Establecemos el Bundle de tratamientos (rfh-spa-treatments-default) o paquetes (rfh-bono-package-default).
utb_context - Establecemos el Context de tratamientos (rfh_spa_treatment) o paquetes (rfh_bono_package).
utb_count (Opcional) - Establecemos la cantidad de servicios que se van a comprar. Por defecto 1.

Ejemplo:

http://www.spadeprueba.com/spa-booking/?utb_path=utb/bono/pay-start&utb_id=44&utb_bundle=rfh-spa-treatments-default&utb_context=rfh_spa_treatment

A través de UTBInsertSpaBooking

Seguimos los mismos pasos para la integración del motor pero en la configuración del UTBInsertSpaBooking establecemos el path a utb/bono/pay-start y añadimos las propiedades id, bundle y context que identifican el tratamiento/paquete.

Ejemplo para enviar al pago con dos unidades del tratamiento con id 55:

…
var utbSpaBookingObj = new UTBInsertSpaBooking({
base: spa_url,
path: 'utb/bono/pay-start',
id: 55,
bundle: 'rfh-spa-treatments-default',
context: 'rfh_spa_treatment',
lang: 'es',
msg_loading: 'Cargando...',
currency: 'EUR',
count: 2 //La cantidad de tratamientos a comprar
});

//Tambien podemos setear la configuracion de esta manera:
utbSpaBookingObj.count = 2
…

Propiedad	Descripción
path	En este caso: utb/bono/pay-start (Carga el motor de reservas directamente en el pago)
id	Id del tratamiento o paquete.
bundle	El tipo de elemento que se va a comprar: rfh-spa-treatments-default - Bundle para tratamientos. rfh-bono-package-default - Bundle para paquetes.
context	El contexto de compra: rfh_spa_treatment - Contexto para tratamientos. rfh_bono_package - Contexto para paquetes.

3. Cookies y GDPR

Para cumplir con la nueva normativa europea de datos personales “GDPR” el motor de reservas no incluye scripts de terceros a menos que el cliente haya aceptado su uso.

Para informar de dicha aceptación se debe llamar al método setCookieConsentStatus con un objeto JSON en el cual incluyamos la aceptación de cada uno de los scripts.

El objeto debe constar de el código del script de terceros como clave y un booleano como valor.

Ejemplo:

{
"facebook":false, 
"fullstory":true,
"google-ga4":true
}

Scripts disponibles

Nombre del Script	Código
Facebook Ads	facebook
Fullstory	fullstory
Google Analytics GA4	google-ga4
Google tag manager	google-tagmanager

Ejemplo:

Supongamos que el usuario ha aceptado Google Analytics y Fullstory pero no ha aceptado Facebook.

La llamada al método se haría de la siguiente forma:

1utbSpaBookingObj.setCookieConsentStatus({"facebook":false, "fullstory":true, "google-ga4":true, "google-tagmanager":true });1utbSpaBookingObj.setCookieConsentStatus({"facebook":false,"fullstory":true,"google-ga4":true});

* Nota: Si deseamos forzar que se incluyan los scripts de terceros independientemente de si se han aceptado o no las cookies, debemos insertar el código anterior antes de la llamada al método insertIFrame o insertIFrameAndPReset.

Opción 1:

<script type="text/javascript" > 
var id_contenedor_motor = 'utb-iframe-spa';
var utbSpaBookingObj = new UTBInsertSpaBooking({
base: 'https://160-f1401000.spalopia.app/engine/163/channel/web',
path: 'utb-spa-booking-simple',
lang: 'es',
msg_loading: 'Cargando...',
currency: 'EUR'
});
utbSpaBookingObj.setCookieConsentStatus({"google-ga4":true,"facebook":true, "fullstory":true });
utbSpaBookingObj.insertIFrameAndPReset(id_contenedor_motor);
</script>

Opción 2:

<script type="text/javascript" > 
var id_contenedor_motor = 'utb-iframe-spa';
var utbSpaBookingObj = new UTBInsertSpaBooking({
base: 'https://160-f1401000.spalopia.app/engine/163/channel/web',
path: 'utb-spa-booking-simple',
lang: 'es',
msg_loading: 'Cargando...',
currency: 'EUR',
consent_facebook: 1,
consent_fullstory: 1,
consent_google_ga4: 1,
google_ga4_clientID: "123.456", //id de cliente
google_ga4_sessionID: "123.456", //id de session del cliente
google_ga4_trackingID: "G-000000-2", //The ID GA4 is a string
consent_google_tagmanager: 1,
google_tagmanager_trackingID: "GTM-000000-3", //The tagmanager ID
});

utbSpaBookingObj.insertIFrameAndPReset(id_contenedor_motor);
</script>

google_analytics_clientID -o- google_ga4_sessionID -o- google_ga4_clientID: [clientID] → (Es necesario tener el script de ga instalado wen la web) Es el id para registrar la sesión del usuario actual si se quiere asociar el usuario que está navegando actualmente en la página web con el motor. Es un campo opcional, en caso de añadir ningún valor, el motor de reservas generará uno por defecto. Una forma de obtenerlo sería:

ga(function(tracker) { var clientId = tracker.get('clientId'); });

var clientId = null;
if (typeof ga !== 'undefined'){
clientId = ga.getAll()[0].get('clientId');
}

google_analytics_trackingID (google analytics UA) -o- google_ga4_trackingID (ga4) -o- google_tagmanager_trackingID (tagmanager): [trakingId]: [trakingId] → Es el identificador (UA-000000-2) de Google Analytics o GA4 del comercio. Se recomienda configurarlo directamente dentro del backoffice (contactar con soporte@spalopia.com). No obstante se permite incluirlo en el momento de insertar el motor.

También existe la posibilidad de activar los scripts de analíticas directamente desde la URL.

Ejemplo:

http://www.spadeprueba.com/spa-booking?utb_consent_google_ga4=1&utb_consent_facebook=1&utb_consent_fullstory=1

⚠️IMPORTANTE. El parámetro de Google Analytics directamente en la web debe ir sin guiones medios → utb_consent_google_ga4=1 -o- utb_consent_google-tagmanager=1

Eventos de Google Analytics GA4 o tagmanager:

Cuando se visita una página dentro del motor se genera un evento “pageview”
Cuando hay una compra:
- Diferentes páginas vistas con dimensiones (pageview):
  - Bonos
    - Contexto bono / canal de venta
      - /utb-analytics/en/payments/finish/bono/c-web/HOCO00000000001
      - /en/utb-payments/notify/finish/bono/c-web/HOCO00000000001
    - Canal de venta / contexto bono
      - /utb-analytics/en/payments/finish/c-web/bono/HOCO00000000001
      - /en/utb-payments/notify/finish/c-web/bono/HOCO00000000001
  - Citas
    - Contexto spa / canal de venta
      - /utb-analytics/en/payments/finish/spa/c-web/HOCO00000000001
      - /en/utb-payments/notify/finish/spa/c-web/HOCO00000000001
    - Canal de venta / contexto spa
      - /utb-analytics/en/payments/finish/c-web/spa/HOCO00000000001
      - /en/utb-payments/notify/finish/c-web/spa/HOCO00000000001
Evento de Analytics (event) con:
- Tipo de vento bono o reserva
- Acción solicitud o confirmación
- Identificador venta
- Total
Por defecto, serán los eventos configurados en Google Analytics
Cuando hay una compra:
- Evento de ecommerce (purchase):
  - Transacción de Analytics con diferentes valores y los items (servicios)

Eventos FBpixel:

Cuando se visita una página dentro del motor se genera un evento “pageview”
Cuando hay una compra:
- Se genera un evento de tipo “Purchase"

4. Tarjetas Regalo

Para iniciar el pago de una tarjeta regalo debemos pasar la siguiente configuración teniendo en cuenta que el parámetro id indica el importe de la tarjeta.

Debemos tener en cuenta que el objeto que inicializamos es de tipo UTBInsertBonoPayStart en vez de UTBInsertSpaBooking.

<script type="text/javascript" > 
var id_contenedor_motor = 'utb-iframe-spa';
var utbSpaBookingObj = new UTBInsertBonoPayStart({
base: 'https://160-f1401000.spalopia.app/engine/163/channel/web',
id: '200', //Importe en Euros
bundle: 'rfh-bono-gift-crad-default',
context: 'rfh_gift_cards_spa',
lang: 'es',
msg_loading: '...',
currency: 'EUR'
});
utbSpaBookingObj.insertIFrameAndPReset(id_contenedor_motor);
</script>

También existe la posibilidad de generar un link al proceso de checkout en el motor de reservas con el importe de una tarjeta regalo.

Consiste simplemente en indicar el importe en el parámetro “utb_id“ junto con el resto de parámetros de configuración (rfh_path=utb/bono/pay-start&utb_bundle=rfh-bono-gift-crad-default&utb_context=rfh_gift_cards_spa )

rfh_path=utb/bono/pay-start&utb_bundle=rfh-bono-gift-crad-default&utb_context=rfh_gift_cards_spa
utb_id=100

Ejemplo para un importe de 100€:

http://www.spadeprueba.com/spa-booking/?rfh_path=utb/bono/pay-start&utb_bundle=rfh-bono-gift-crad-default&utb_context=rfh_gift_cards_spa&utb_id=100

5. Servicios

Para cargar el iframe filtrando por un servicio específico usamos el parámetro promotid o utb_promotid (en caso de que queramos pasarlo desde la URL de la web) seguido del id del servicio.

Ejemplo a través de la URL:

http://www.spadeprueba.com/spa-booking/?utb_promotid=55

Ejemplo al incluir el script del motor:

<script type="text/javascript" > 
var id_contenedor_motor = 'utb-iframe-spa';
var utbSpaBookingObj = new UTBInsertSpaBooking({
base: 'https://160-f1401000.spalopia.app/engine/163/channel/web',
path: 'utb-spa-booking-simple',
lang: 'es',
buy_variant: 'booking',
promotid: 55,
single: true,
msg_loading: 'Cargando...',
currency: 'EUR'
});
utbSpaBookingObj.insertIFrameAndPReset(id_contenedor_motor);
</script>

6. Modo Simplificado

Para cargar nuestro servicio en el motor de manera simplificada debemos agregar al path el parámetro single.

Ejemplo para cargar un servicio en vista simplificada:

http://www.spadeprueba.com/spa-booking/?utb_promotid=55&utb_single

7. Modo de compra (contexto)

Para cargar nuestro servicio en el motor en algún modo de compra (reservar, comprar, regalar) debemos añadir el siguiente parámetro: buy_variant

Permite 3 opciones:

reservar = booking
comprar = buy
regalar = gift

Ejemplo para cargar un servicio en modo reservar:

http://www.spadeprueba.com/spa-booking/?utb_promotid=55&utb_buy_variant=booking

8. Filtrado por categorías

Para filtrar por una de las categorías del motor de reservas utilizamos el parámetro utb_category_l1 seguido del id de la categoría por la que deseamos filtrar.

Ejemplo para filtrar la categoría con ID 7:

http://www.spadeprueba.com/spa-booking/?utb_category_l1=7

Para filtrar por una subcategoría utilizamos el parámetro utb_category_l1&utb_category_l2

Ejemplo para filtrar la subcategoría con ID 51:

http://www.spadeprueba.com/spa-booking/?utb_category_l1=37&utb_category_l2=51

9. Limpiar parámetros de la URL

Si deseamos limpiar los parámetros de la URL podemos añadir el parámetro utb_p_reset=1.

Ejemplo:

http://www.spadeprueba.com/spa-booking/?utb_promotid=55&single&utb_p_reset=1

10. Códigos de canal, promocionales o afiliados y grupos de cliente**

Si deseamos activar un canal de venta con código promocional o un código de afiliados.

Ejemplos:

** La diferencia es que el código de afiliado no muestra mensaje de que ha sido activado.

También se puede añadir al insertar el iframe:

<script type="text/javascript" > 
var id_contenedor_motor = 'utb-iframe-spa';
var utbSpaBookingObj = new UTBInsertSpaBooking({
base: 'https://160-f1401000.spalopia.app/engine/163/channel/web',
path: 'utb-spa-booking-simple',
channel_affiliate_code: 'agencia',
channel_promo_code: 'promo_navidad',
channel: 'web_hotel',
client_group: 25,
});
utbSpaBookingObj.insertIFrameAndPReset(id_contenedor_motor);
</script>

11. Usar motor con dominio de cliente

Para poder utilizar el motor con un dominio externo.

Ejemplo:

https://160-f1401000.engine.dominio.com/engine/163/channel/web

Será necesario apuntar un registro DNS tipo CNAME con el nombre del dominio a resellers.spalopia.com.

Dominio	Tipo	Valor
160-[id_brand].engine.[dominio_oficial]	CNAME	resellers.spalopia.com

Una vez realizado este paso, contactar con el equipo de Soporte (soporte@spalopia.com) para finalizar la configuración en nuestros servidores.

Cuando confirmemos esta configuración, podrán actualizar el dominio en el script del motor.

Si durante el proceso tienes cualquier consulta, por favor, no dudes en escribirnos a soporte@spalopia.com

Integración del Motor de reservas en una web externa a Spalopia

1. Pasos para integrar el motor online.

2. Cargar el motor de reserva directamente en el paso del pago.

A través de la URL del motor de reservas

A través de UTBInsertSpaBooking

3. Cookies y GDPR

4. Tarjetas Regalo

5. Servicios

6. Modo Simplificado

7. Modo de compra (contexto)

8. Filtrado por categorías

9. Limpiar parámetros de la URL

10. Códigos de canal, promocionales o afiliados** y grupos de cliente

11. Usar motor con dominio de cliente

10. Códigos de canal, promocionales o afiliados y grupos de cliente**