Ir directamente al contenido
  • No hay sugerencias porque el campo de búsqueda está vacío.

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

Siana ofrece dos métodos para integrar tu Motor de reservas en la web de tu spa, centro u hotel:

  • Enlace externo (recomendada).
    ✉️ Para recibir más información sobre esta opción, por favor, contacta con soporte@spalopia.com
  • Integración a través de código
    📌    Aconsejamos esta modalidad solo si cuenta con personal técnico especializado y familiarizado con integraciones web.

📝 En este manual encontrarás la siguiente información:

¿Cómo integrar el Motor de reservas a través de código?

1. Creación de rutas

Debes crear páginas específicas para alojar el motor, preferiblemente una por cada idioma.

💬 Por ejemplo:

- http://www.your-domain.com/spa-booking
- http://www.your-domain.com/en/spa-booking
- http://www.your-domain.com/fr/spa-booking

También debes crear una página de confirmación, donde el usuario verá el detalle final de su compra.

💬 Por ejemplo:

http://www.your-domain.com/spa-booking/spa-confirmation

✉️ Una vez creadas estas rutas, es imprescindible que envíe los enlaces a soporte@spalopia.com para que podamos realizar las configuraciones internas necesarias en nuestra plataforma.

💡Recomendación
Te recomendamos crear una página de confirmación dentro de tu propia web (por ejemplo: /spa-confirmation).
En esta página debes insertar el iframe del Motor de reservas sin ningún filtro ni configuración adicional (sin parámetros, sin modo de compra, etc.).
El objetivo de esta página es mostrar al cliente la confirmación final de la compra de una reserva o bono, o bien servir como paso final cuando se solicita una confirmación de pago desde Agenda (👉 ¿Cómo solicitar confirmación de pago desde la Agenda?). 
No es necesario que esta página esté visible en el menú de la web, pero sí debe ser accesible para que el cliente acceda al detalle de su reserva a través de la plantilla de email que recibe desde Siana.

⚠️ Muy importante. Es fundamental que envíes la URL de la página donde publiques el Motor de reservas a soporte@spalopia.com para que podamos realizar las configuraciones internas necesarias.

📢 Si no existe una página de confirmación sin filtros como la recomendada y, más adelante, cambias la URL donde se encuentra publicado el Motor de reservas sin notificarnos, el cliente no podrá acceder al detalle final de su compra ni completar las reservas iniciadas desde la Agenda.
Esto puede generar errores en el flujo de compra y afectar a la correcta visualización de las confirmaciones.

2. Creación del contenedor

Inserte un contenedor HTML en el cuerpo de la página donde se insertará el Motor de reservas:

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

3. Integración de librerías y scripts

  1. Añadir JQuery (si aún no está incluido):

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  2. Añadir librería del Motor de reservas:

    <script type="text/javascript" src="https://api.spalopia.app/utbapis/utbinsert/load.php"></script>
  3. Configurar e insertar el Motor de reservas:

    <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 simplificado
      });
      utbSpaBookingObj.insertIFrameAndPReset(id_contenedor_motor);
    </script>
Ejemplo completo de integración del Motor de reservas

<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo de motor de reservas Siana</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>
¿Cómo cargar el Motor de reservas directamente en el paso del pago?

Existen dos métodos para iniciar el Motor de reservas directamente en el check-out (paso del pago):

1. Vía URL

Configura los siguientes parámetros en la URL de la página según sus necesidades:

  • utb_path → Indica la ruta de pago, en este caso utb/bono/pay-start.
  • utb_id → Identifica el tratamiento o paquete correspondiente.
  • utb_bundle → Define el bundle de tratamientos (rfh-spa-treatments-default) o de paquetes (rfh-bono-package-default).
  • utb_context → Especifica el contexto del tratamiento (rfh_spa_treatment) o del paquete (rfh_bono_package).
  • utb_count (opcional) → establece la cantidad de servicios a adquirir. Por defecto es 1.

💬 Por 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

2. A través de UTBInsertSpaBooking

Si opta por la inserción mediante script, deberá añadir propiedades adicionales al objeto de configuración.

  • Añade las propiedades ID, bundle y context para identificar el tratamiento o paquete.
  • Especifica la cantidad de tratamientos a adquirir con la propiedad count.

💬 Por ejemplo: para iniciar el pago con dos unidades del tratamiento cuyo ID es 55, debes indicar lo siguiente.

…
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
…
Listado de propiedades para iniciar el Motor de reservas directamente en el paso de pago mediante UTBInsertSpaBooking
Propiedad Descripción
path 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.
¿Cómo configurar las cookies y GDPR?

Para cumplir con el Reglamento General de Protección de Datos (GDPR), el Motor de reservas no cargará scripts de terceros salvo que el usuario haya dado su consentimiento expreso.

Para comunicar dicha aceptación, es necesario invocar el método setCookieConsentStatus, pasándole un objeto JSON que indique el estado de aceptación individual de cada script. Este objeto debe utilizar el identificador de cada script como clave y su valor será un booleano indicando si ha sido aceptado (true para aceptado, false para rechazado).

💬 Por ejemplo: 

{
"facebook":false,
"fullstory":true,
"google-ga4":true
}
Listado de propiedades del objeto para setCookieConsentStatus
Nombre del Script Código
Facebook Ads facebook
Fullstory fullstory
Google Analytics GA4 google-ga4
Google tag manager google-tagmanager

💬 Por ejemplo: si el usuario ha aceptado Google Analytics y Fullstory pero no ha consentido el uso de Facebook, la llamada al método se realizaría así:

utbSpaBookingObj.setCookieConsentStatus({"facebook":false, "fullstory":true, "google-ga4":true, "google-tagmanager":true });1utbSpaBookingObj.setCookieConsentStatus({"facebook":false,"fullstory":true,"google-ga4":true});
¿Se puede forzar la inclusión de scripts de terceros si no se han aceptado las cookies?

Sí. Para asegurar la carga de los scripts, debes insertar el código anterior antes de la llamada al método insertIFrame o insertIFrameAndPReset.

💬 Por ejemplo: 

<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>
¿Cómo configurar Google Analytics y Tag Manager?

Para garantizar un seguimiento preciso de los eventos del Motor de Reservas en Google Analytics (GA4) o Google Tag Manager (GTM), se requieren las siguientes configuraciones:

1. Identificación de usuario

google_analytics_clientID o google_ga4_sessionID o google_ga4_clientID

Este parámetro permite asociar la sesión del usuario actual de tu web con la del Motor de reservas, permitiendo que los eventos registrados queden asociados al usuario que navega en tu página.

  • Requisito: Asegúrate de que el script de GA4 esté correctamente implementado en tu sitio web.
  • Campo opcional: Si no se indica un valor, el Motor de reservas generará automáticamente un identificador por defecto.
  • Uso recomendado: Para asociar los eventos con el usuario real, facilita alguno de los siguientes valores:
         google_analytics_clientID, google_ga4_sessionID, google_ga4_clientID

💬 Por ejemplo: Con GA4 y gtag, puedes obtener el clientID de esta manera.

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

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

2. Identificadores de seguimiento

  • google_analytics_trackingID → Universal Analytics
  • google_ga4_trackingID → GA4
  • google_tagmanager_trackingID → GTM

Este parámetro indica el identificador de tu cuenta de Google Analytics o Tag Manager:

  • Universal Analytics (UA) → UA-000000-2
  • Google Analytics 4 (GA4) → G-XXXXXXXXXX
  • Google Tag Manager (GTM) → GTM-XXXXXXX

✉️ Si vas a añadir alguno de estos parámetros en tu script, por favor, contacta con soporte@spalopia.com e indícanos el identificador, para poder realizar una configuración interna necesaria.

También puedes:

  • Incluir el identificador al insertar el Motor en tu web.
  • Activar los scripts de analíticas directamente desde la URL.

3. Activación de scripts de analíticas mediante URL

Es posible habilitar los scripts de analíticas añadiendo parámetros de consentimiento a la URL.

  • utb_consent_google_ga4=1 → habilita Google Analytics 4 (GA4).
  • utb_consent_facebook=1 → habilita Facebook Pixel.
  • utb_consent_fullstory=1 → habilita FullStory.

💬 Por ejemplo: 

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

⚠️El parámetro de Google Analytics directamente en la URL debe ir sin guiones medios: utb_consent_google_ga4=1 o utb_consent_google_tagmanager=1.

Eventos de Google Analytics (GA4) o Google Tag Manager
  • Pageview
    Cada vez que un usuario visita una página dentro del Motor de reservas, se genera un evento pageview.
  • Eventos de compra
    Al completarse una compra, se registran múltiples pageview con dimensiones específicas:
    • 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

  • Eventos personalizados de Analytics
    Se envían eventos con los siguientes datos:

    • Tipo de evento: bono o reserva
    • Acción: solicitud o confirmación
    • Identificador de venta
    • Total de la transacción

  • Evento de ecommerce (purchase)
    Se envía un evento de ecommerce que incluye:

    • Datos de la transacción
    • Total de la compra
    • Ítems adquiridos (servicios)
¿Cómo configurar tarjetas regalo?

El Motor de reservas permite iniciar el proceso de compra de una tarjeta regalo de dos maneras:

1. Integración mediante JavaScript

Debes usar el objeto UTBInsertBonoPayStart en lugar 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>

📌 El parámetro ID indica el importe de la tarjeta regalo en euros.

2. Integración mediante enlace directo

Puede generar un enlace directo al check-out del Motor de reservas, especificando el importe de la tarjeta regalo a través del parámetro utb_id, junto con los demás parámetros obligatorios:

rfh_path=utb/bono/pay-start
utb_bundle=rfh-bono-gift-crad-default
utb_context=rfh_gift_cards_spa
utb_id=[importe]

💬 Por ejemplo:  Para generar una tarjeta regalo por un valor 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

¿Cómo activar el Modo simplificado?

Permite cargar el Motor de reservas mostrando únicamente un servicio específico en una vista simplificada utiliza el parámetro: utb_single

💬 Por ejemplo: 

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

¿Cómo cargar un Modo de compra (buy_variant) concreto?

Permite cargar el Motor de reservas en un modo de compra específico:

Opción Valor Descripción
Reservar booking Permite realizar una reserva normal.
Comprar buy Permite realizar una compra directa.
Regalar gift Permite comprar una tarjeta regalo.

💬 Por ejemplo: si deseamos filtrar por el modo reserva

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

¿Cómo filtrar por categorías?

Permite mostrar únicamente los servicios que pertenecen a una categoría o subcategoría determinada.

📌El filtro por categoría o subcategoría debe aplicarse en la URL de la página donde está integrado el Motor de reservas, no en la URL del iframe.

1. Filtrar mediante la URL

  • Para filtrar por categoría principal
    Usa el parámetro utb_category_l1=[id_categoria]

  • Para filtrar por subcategoría:
    Utiliza utb_category_l1=[id_categoria]&utb_category_l2=[id_subcategoria]

💬 Por ejemplo:

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

2. Filtrar mediante Script de Inserción

También es posible filtrar por categoría directamente desde el objeto de configuración del Motor de reservas.

⚠️Al igual que con otros parámetros, cuando se configura desde el script de Javascript se debe omitir el prefijo utb_.

💬 Por ejemplo: para mostrar únicamente los servicios de la subcategoría con ID 51, que pertenece a la categoría principal con ID 37

var utbSpaBookingObj = new UTBInsertSpaBooking({
base: 'https://160-f1401000.spalopia.app/engine/163/channel/web',
path: 'utb-spa-booking-simple',
// ... otros parámetros
category_l1: 37,      // ID de la categoría padre
category_l2: 51       // ID de la subcategoría a mostrar
});

📌Verifica que los IDs de categoría que utilices para filtrar estén dados de alta y correctamente configurados en el back office de Siana. Si alguno no es válido o no existe, el Motor de reservas ignorará el filtro y mostrará todos los servicios disponibles.
✉️ Contacta con soporte@spalopia.com en caso de tener alguna duda con este proceso.

¿Cómo limpiar los parámetros de la URL?

Para eliminar parámetros previos de la URL y reiniciar el Motor de reservas, utiliza utb_p_reset=1.

💬 Por ejemplo:

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

¿Cómo activar canales de venta, códigos promocionales, afiliados y grupos de cliente?

El Motor de reservas permite activar condiciones especiales de venta, promociones o segmentaciones.

Parámetro Descripción Ejemplo
utb_channel_promo_code Código promocional visible. ?utb_channel_promo_code=oferta_navidad
utb_channel_affiliate_code Mismo funcionamiento que el código promocional, pero no muestra ningún mensaje en el Motor de reservas. ?utb_channel_affiliate_code=agencia
utb_channel Código de canal de venta. ?utb_channel=web_hotel
utb_client_group Grupo de clientes específico. ?utb_client_group=25

💬 Por ejemplo:

  • http://www.spadeprueba.com/spa-booking/?utb_channel_affiliate_code=agencia

  • http://www.spadeprueba.com/spa-booking/?utb_channel_promo_code=oferta_navidad

  • http://www.spadeprueba.com/spa-booking/?utb_channel=web_hotel

  • http://www.spadeprueba.com/spa-booking/?utb_client_group=25

También puedes configurar estos parámetros 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>
¿Cómo utilizar el Motor de reservas en un dominio del cliente?

Te recomendamos integrar el Motor de reservas directamente en el dominio de la web de tu centro o hotel. Para hacerlo, sigue los pasos detallados a continuación.

1. Crear un registro CNAME en tu DNS

Debes configurar un registro DNS tipo de CNAME que apunte al dominio de Spalopia.

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

📌Reemplaza [id_brand] por el identificador de marca y [dominio_del_cliente] por el dominio en el que se desea usar el Motor de reservas.
✉️ Contacta con soporte@spalopia.com si no conoces el ID_brand de tu centro. 

💬 Por ejemplo:

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

2. Contactar con el equipo de soporte

✉️ Una vez creado el CNAME, es necesario que contacte con soporte@spalopia.com para completar la configuración en nuestros servidores.

El equipo verificará el CNAME y habilitará el subdominio en la plataforma Siana.

3. Actualizar el dominio en tu script de integración

Una vez recibas confirmación por parte de Siana, podrás actualizar el parámetro base en tu script JavaScript para que apunte al nuevo dominio personalizado.

💡 En resumen
Parámetros base de inyección del motor
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 Siana
(💬 por ejemplo: f1401013, f1401014)
• id_motor_spa → proporcionado por Siana
(💬 por ejemplo: 163,164, 165)
• id_o_alias_canal_de_venta → normalmente "web", pero es válido cualquier alias o ID de canal creado en el back office
(💬 por ejemplo: web, 20, web_hotel).
path Ruta base del motor de reserva.
Opciones más habituales:
• utb-gift-vouchers/treatments → Carga el Motor de reservas únicamente con el botón de regalar.
• utb-spa-booking-simple → Carga el Motor de reservas con la configuración por defecto (botones adaptados según la configuración del servicio).
• utb/bono/pay-start → Carga el Motor de reservas directamente en el proceso de pago.

Para cargar la vista simplificada, añadir el parámetro single.
💬 Por ejemplo: utb-spa-booking-simple/?single
lang Idioma en el que se mostrará el Motor de reservas, siempre que este esté habilitado en el back office.
💬 Por ejemplo: es, en, fr, de, ru, it, etc.
msg_loading Customiza el mensaje que aparece al cargar el Motor de reservas.
Útil para adaptarlo según el idioma.
currency Moneda en la que se operará, siempre que esta esté habilitada en el back office.
💬 Por ejemplo: 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.
Otros parámetros

Esta tabla resume los parámetros disponibles para configurar el Motor de reservas, mostrando su equivalente cuando se usan en la URL (querystring) y cuando se configuran directamente en el objeto JavaScript.

Funcionalidad Parámetro en URL Propiedad en
Objeto JS		 Notas
Filtro por Servicio utb_promotid promotid Muestra un único servicio por su ID.
Modo Simplificado utb_single single Valor true.
Oculta filtros y categorías.
Requiere promotid. 
Filtro por Categoría utb_category_l1 category_l1 Muestra los servicios de una categoría por su ID.
Filtro por Subcategoría utb_category_l2 category_l2 Muestra los servicios de una subcategoría.
Requiere category_l1.
Modo de Compra utb_buy_variant buy_variant Fija el modo de compra: booking, buy o gift.
Código de Afiliado utb_channel_affiliate_code channel_affiliate_code Asocia la venta con un código de afiliado.
Código Promocional utb_channel_promo_code channel_promo_code Aplica un código promocional visible.
Canal de Venta utb_channel channel Fija un canal de venta específico.
Grupo de Clientes utb_client_group client_group Dirige la venta a un grupo de clientes por su ID.
Ir al Pago (ID) utb_id id Identificador del servicio para ir directamente al pago.
Ir al Pago (Bundle) utb_bundle bundle Bundle del servicio para ir al pago.
Ir al Pago (Contexto) utb_context context Contexto del servicio para ir al pago.
Ir al Pago (Cantidad) utb_count count Cantidad de servicios a comprar en el pago directo.
Reiniciar Motor utb_p_reset=1 No aplica Limpia parámetros previos de la URL y reinicia el Motor.
 

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