Settings
      Back to home
      1. Support center
      2. Online Booking/Sales Engine
      3. Settings

      Integration of the online engine in a website external to Spalopia

      1. Steps to integrate the online engine


      Create the different pages that will contain the online engine, preferably one per language: 

      Examples:

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

      💡 Recommendation

      Create a confirmation page (/spa-confirmation) within the website itself to embed the iframe without any additional configuration (no filters, purchase modes, etc.).

      The purpose of this page will be to show the customer the purchase confirmation of a reservation or voucher, and it will be used in the links of the confirmation email. This page does not need to be in the menu but should be accessible.

      ⚠️ It is necessary to inform support@spalopia.com about the page created with this feature so that we can configure it correctly.

      In each of the pages created, the following steps must be followed to have the sales engine correctly embedded. 

      1.  Enter the following libraries: 
      • JQuery 3.1.1 or higher, and only if the page does not already include it: 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      • Online engine library:
      <script type="text/javascript"src="https://api.spalopia.app/utbapis/utbinsert/load.php"></script> 

      2.  Add a div with a unique identifier where the booking engine will be placed inside the page.  It should always be inside the <body> tag:

      <body> 
      <!-- Pre-engine content --> 
      <div id="utb - iframe - spa"></div> 
      <!-- Post-engine content --> 
      </body>

      In the next step the id of this div will be referenced to insert the engine here (variable id_contenedor_motor)

      3.  Add the script in charge of generating and inserting the online engine, and fill in the following javascript parameters and variables.
      <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, //service id 
      single: true //modo sin filtros
      }); 
      utbSpaBookingObj.insertIFrameAndPReset(id_contenedor_motor); 
      </script>

      Property 

      Description

      base 

      Base URL of the online engine. 

      Usually follows this format: 

      https://160-{id_brand}-spalopia.app/engine/{id_spa_engine}/channel/{id_or_alias_sales_channel}

      • id_brand = provided by Spalopia (e.g.: f1401013, f1401014) 
      • id_spa_engine = provided by Spalopia (e.g. 163,164, 165) 
      • id_or_alias_sales_channel= usually "web", but any alias or channel id created in the back office is valid (e.g. web, 20, web_hotel)

      path 

      Engine base path. Keep the default or use the following:

      • utb-gift-vouchers/treatments (This loads the online engine with gift button) 
      • utb-spa-booking-simple (Loads the online engine with the default configuration) 
      • utb/bono/pay-start (Loads the online engine directly at checkout) 

      If we want to load a simplified view add the parameter single .
      Example: utb-spa-booking-simple/?single

      lang 

      Language in which the engine will be displayed.
      Any language available in the back office will be valid.
      Examples: es, en, fr, de. 

      msg_loading 

      This customizes the message displayed when loading the engine.
      Useful to modify the message displayed according to the language.

      currency 

      Currency to be used.
      Example: EUR, GBP, USD

      buy_variant 

      ‘booking’, ‘buy’, ‘gift’ . If promotid exists, it displays the service with the selected purchase option. If promotid does not exist, it shows only the configured buttons.

      promotid 

      To filter the listing to a single service.

      single 

      Simple mode, hiding filters, categories and sorting.

      ⚠️ IMPORTANT

      Once the engine has been inserted, notify support (soporte@spalopia.com) with the domain and URL where the engine has been embedded (step 1) to finish the installation process. 

      Example:

      Below is a complete example of a page with the engine embedded. 

      <!DOCTYPE html> 
      <html> 
      <head> 
      <title>Example of Spalopia booking engine</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"><!-- Place where the online engine will be inserted --></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: ‘Loading...', 
      currency: 'EUR' 
      }); 
      utbSpaBookingObj.insertIFrameAndPReset('utb-iframe-spa'); 
      </script> 
      </div> 
      </div> 
      <div class="footer"> 
      <div class="container"> 
      </div> 
      </div> 
      </body> 
      </html>

      2. Load the online engine directly at the payment step

      We can load the iframe in the following ways: 

      - Through the URL of the online engine 

      Add the following parameters to the online engine URL: 

      • utb_path - We establish the payment route, which in this case is  utb/bono/pay-star . 
      • utb_id - We establish the id of the treatment or pack. 
      • utb_bundle - We set up the treatment bundle (rfh-spa-treatments-default)  or packs (rfh-bono-package-default). 
      • utb_context - We establish the context of treatments (rfh_spa_treatment) or pack (rfh_bono_package). 
      • utb_count (Optional) - We set the number of services to be purchased. Default 1. 

      Example: 

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

      - Through UTBInsertSpaBooking 

      We follow the same steps for the integration of the engine, but in the configuration of the UTBInsertSpaBooking, we set the path to utb/bono/pay-start and add the properties id, bundle and context that identify the treatment/pack. 


      Example to send for payment with two treatment units with 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 //Amounts of treatments to buy  
      }); 

      //We can also set the configuration this way:
      utbSpaBookingObj.count = 2 
      …

      Property

      Description

      path 

      In this case: 

      • utb/bono/pay-start (Loads the online engine directly at checkout)

      id 
      • Id of the treatment or pack.

      bundle 

      The type of item to be purchased.

      • rfh-spa-treatments-default - Bundle for treatments. 
      • rfh-bono-package-default - Bundle for packs.

      context 

      The purchase context. 

      • rfh_spa_treatment - Context for treatments. 
      • rfh_bono_package - Context for packs.


      3. Cookies and GDPR

      To comply with the new European regulation on personal data "GDPR" the online engine does not include third-party scripts unless the customer has accepted their use.

      To report such acceptance, you must call the method setCookieConsentStatus with a JSON object in which we include the acceptance of each of the scripts. 

      The object must consist of the third-party script code as a key and a boolean as a value. 

      Example:

      { 
      "google-analytics":true, 
      "facebook":false, 
      "fullstory":true 
      "google-ga4":true
      }
      * Note: To associate the Google Analytics session of a user browsing the website with the session of the same user navigating on the online engine, use the parameter: google_analytics_clientID : id_session_ga_web when inserting the booking engine from the web.


      Available scripts

      Script Name 

      Code

      Google Analytics 

      google-analytics

      Facebook Ads 

      facebook

      Fullstory 

      fullstory

      Google Analytics GA4

      google-ga4


      Example:

      Let's suppose that the user has accepted Google Analytics and Fullstory but has not accepted Facebook. 

      The call to the method would be made as follows: 

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

      * Note: If we want to force third-party scripts to be included regardless of whether or not cookies have been accepted, we must insert the above code before the call to the method insertIFrame or insertIFrameAndPReset .

      Option 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: 'Loading...', 
      currency: 'EUR' 
      }); 
      utbSpaBookingObj.setCookieConsentStatus({"google-analytics":true,"facebook":true, "fullstory":true }); 
      utbSpaBookingObj.insertIFrameAndPReset(id_contenedor_motor); 
      </script>

      Option 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: 'Loading...',
      currency: 'EUR', 
      consent_google_analytics: 1, 
      google_analytics_clientID: "123.456", //customer session id 
      google_analytics_trackingID: "UA-000000-2", //The tracking ID is a string like UA-000000-2 
      consent_facebook: 1, 
      consent_fullstory: 1
      consent_google_ga4: 1
      google_ga4_clientID: "123.456", //customer id 
      google_ga4_sessionID: "123.456", //customer session id 
      google_ga4_trackingID: "UA-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>

      consent_google_analytics -or- consent_google_ga4 -o- consent_google_tagmanager : 1 → Enables Google Analytics in the engine. It should be activated depending on the cookie settings of the website. Whether the customer accepts analytics cookies or not.

      google_analytics_clientID -or- google_ga4_sessionID -or- google_ga4_clientID: [clientID] → It is the id to register the current user session if you want to associate the user currently navigating the web page with the engine. It is an optional field, in case of adding no value, the booking engine will generate one by default. One way to obtain it would be: 

      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): [trackingId]: [trakingId] → It is the identifier (UA-000000-2) for Google Analytics or GA4 of the business.
      It is recommended to configure it directly within the back office (contact soporte@spalopia.com). However, it is allowed to include it at the time of inserting the engine.

      There is also the possibility to activate the analytics scripts directly from the URL.

      Example:

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

      ⚠️ IMPORTANT. The Google Analytics parameter directly on the web must be without hyphens → utb_consent_google-analytics=1 -o- utb_consent_google-tagmanager=1

      Google Analytics Events:

      • When a page is visited within the engine, a "pageview" event is generated
      • When there is a purchase
        • Different page views with dimensions (pageview): 
          • Vouchers
            • Voucher context / sales channel
              • /utb-analytics/en/payments/finish/bono/c-web/HOCO00000000001                          
              • /en/utb-payments/notify/finish/bono/c-web/HOCO00000000001 
            • Sales channel / voucher context
              • /utb-analytics/en/payments/finish/c-web/bono/HOCO00000000001  
              • /en/utb-payments/notify/finish/c-web/bono/HOCO00000000001 
          • Appointments
            • Spa context / sales channel
              • /utb-analytics/en/payments/finish/spa/c-web/HOCO00000000001                 
              • /en/utb-payments/notify/finish/spa/c-web/HOCO00000000001 
            • Sales channel / spa context
              • /utb-analytics/en/payments/finish/c-web/spa/HOCO00000000001 
              • /en/utb-payments/notify/finish/c-web/spa/HOCO00000000001
      • Analytics event (event) with: 
        • Type of sale voucher or reservation
        • Action Request or confirmation 
        • Sales identifier
        • Total 
      • E-commerce event (addTransaction, ecommerce:addItem): 
        • Analytics transaction with different values

      FBpixel Events:

      • When a page is visited within the engine, a "pageview" event is generated
      • When there is a purchase:
      • An event of type  “Purchase" is generated

      Google Analytics GA4 Events o tagmanager:

      • By default, these will be the events configured in Google Analytics.
      • When there is a purchase:
        • Ecommerce event (purchase):
          • Analytics transaction with different values and items (services).

      4. Vouchers/Gift Cards

      To initiate the payment of a gift card, we must pass the following configuration, taking into account that the parameter id indicates the amount of the card. 

      We must take into account that the object we initialize is of type UTBInsertBonoPayStart instead of  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', //Amount in Euros 
      bundle: 'rfh-bono-gift-crad-default', 
      context: 'rfh_gift_cards_spa', 
      lang: 'es', 
      msg_loading: '...', 
      currency: 'EUR' 
      }); 
      utbSpaBookingObj.insertIFrameAndPReset(id_contenedor_motor); 
      </script>

      There is also the possibility of generating a link to the checkout process in the online engine with the amount of a gift card. 

      It simply consists of indicating the amount in the "utb_id" parameter along with the rest of the configuration parameters: (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

      Example for an amount of 100€: 

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

      5. Services

      To load the iframe filtering by a specific service we use the parameter promotid or utb_promotid  (in case we want to pass it from the URL of the web) followed by the id of the service. 

      Example through the URL: 

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

      Example when including the engine script: 

      <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: 'Loading...', 
      currency: 'EUR' 
      }); 
      utbSpaBookingObj.insertIFrameAndPReset(id_contenedor_motor); 
      </script>

      6. Simplified Mode 

      To load our service in the engine in a simplified way we must add to the path the parameter single.

      Example for loading a service in simplified view: 

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

      7. Purchase mode (context)

      To load our service into the engine in any buying mode (book, buy, gift) we need to add the following parameter: buy_variant

      It allows 3 options:

      • booking
      • buy
      • gift

      Example for loading a service in reserve mode:

      8. Filtering by category

      To filter by one of the categories of the online engine we use the parameter utb_category_l1 followed by the id of the category we want to filter by. 

      Example to filter the category with ID 7: 

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

      To filter by a subcategory, we use the parameter utb_category_l1&utb_category_l2

      Example to filter the subcategory with ID 51:

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

      9. Clear URL parameters 

      If we want to clean up the parameters of the URL we can add the parameter utb_p_reset=1 

      Example:

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

      10. Channel, promotional or affiliate codes and client groups 

      If we want to activate a sales channel with a promotional code or an affiliate code.

      Example: 

      ** The difference is that the affiliate code does not display a message indicating that it has been activated.

      It can also be added when inserting the 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. Use the engine with the client’s domain 

      To be able to use the engine with an external domain, for example:

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

      It will be necessary to point a CNAME type DNS record with the domain name to resellers.spalopia.com 

      Domain

      Type

      Value

      160-[id-brand].engine.[official_domain] 

      CNAME

      resellers.spalopia.com

      Once this step is completed, please contact our support team (soporte@spalopia.com) to finalize the configuration on our servers.

      When we confirm this configuration, you will be able to update the domain in the engine script.

      If you have any questions during the process, do not hesitate to reach us at soporte@spalopia.com