It will allow you to navigate through the booking process, i.e. from making availabilities to confirming a booking.


Normally the same parameters will need to be passed as the Search Engine component.


IMPORTANT: In the normal flow of a customer, i.e. when coming from the Search Engine, all the necessary parameters for a correct functioning will come in the URL. But if the availability page is reached from a quote or meta search engine link, in addition to passing the URL parameters, a user session (webSessionId) must also be generated and passed to the Search Engine. Finally, objects such as navigation or tracking should also be taken into account. Since none of these parameters will come in the URL parameters in these cases.



Parameters*


Main parameters


Parameter
Description
Example
webSessionId
Unique web session identifier. It will be used to maintain the user's session between components and pages
01CDA38719E74937A2F275757ABA34EE
view
Fixed value "Engine. 
Engine
bookingEngine
Booking engine code. Provided by Hotetec.
2
system
System code (HPH or MPH)
HPH: Desktop or tablet
MPH: Mobile
homeUrl
Home page of the website

availabilityUrl
Booking process page
/bet0.html
container
Id of the HTML tag that will be the container for the component
app-container
tracking
Object with tracking information
(Same as that of the Search Engine component)
navigation
Object with navigation information
(Same as that of the Search Engine component)
searcherBehaviour
Optional object with the behaviour of the browser when loading in the availability



Object searcherBehaviour 

Parameter
Description
Example
addUtmsToUrl

Adds to the browser URL all the elements that are sent in the 'utm' of the 'navigation' object.


For example:

/bet0.html?utm_campaign=blogpost

true



* It will be necessary to replace the parameters that are not fixed by the values required at any given time depending on the type of search to be carried out. 



Example of annotated HTML with required information



<script>
   // Component parameters
   const queryString = window.location.search;
   if (queryString !== '' && queryString.indexOf('=') == -1) {
      queryString = decodeURIComponent(queryString);
}
   const urlParams = new URLSearchParams(queryString);

   const bookingEngineParameters = {};
   for (const param of urlParams) {
      const name = param[0];
      let value = decodeURIComponent(param[1]);
      if (name == 'availability' || name == 'tracking' || name == 'navigation') {
         value = JSON.parse(value);
         // We put the promocode in the 'availability' object, in case the dispo URL is generated with a promocode.
            if (name == 'availability' && urlParams.get("promoCode")) {
               if (value.promotionalCode === undefined || value.promotionalCode == "") {
                  value.promotionalCode = urlParams.get("promoCode");
}
}
}
bookingEngineParameters[name] = value;
}

   for (const [key, value] of urlParams2) {
      if (key.startsWith("utm")) { // Add other parameters from external services such as Wihp (wh_token), Triptease(tt_*), Quicktext (qt_tracking_id), etc.
navigation.utm.push({ code: key, value: [value] });
}
}

   if (urlParams.get("budgetReference")) {
      bookingEngineParameters["currency"] = "EUR";
      bookingEngineParameters["language"] = "es";
}

   var searcherSystemCode = localStorage.getItem('systemCode');
   var system = "HPH"; // HPH - Desktop/Tablet or MPH - Mobile
   if (searcherSystemCode != null && searcherSystemCode != "") {
system = searcherSystemCode;
}

   // In case you want to change the engine code by URL parameter or by localStorage from other component
   var bookingEngine = urlParams.get("bookingEngine") || localStorage.getItem('bookingEngine');
   if (bookingEngine == undefined) bookingEngine = "2"; // Código de motor por defecto

   window.parameters = window.parameters || {};
   window.parameters.bookingEngine = {
      webSessionId: "01CDA38719E74937A2F275757ABA34EE",
      view: "Engine",
bookingEngine: bookingEngine,
system: system,
      homeUrl: "https://zafiro.new.hotetec.com",
      availabilityUrl: "disponibilidad-proceso-completo.html", // IMPORTANT! In a productive environment it should be an absolute or relative path, like "/availability-process-complete.html". Now it is like this to work correctly in these examples 
      container: "app-container",
tracking: {
         gtm: "GTM-TEST"
},
navigation: {
         ipAddress: "172.21.34.74",
         countryCode: "ES",
         domain: "zafiro.new.hotetec.com",
         referrer: "https://www.otraweb.com",
         landingPage: "https://zafiro.new.hotetec.com",
         userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.124 Safari/537.36 Edg/102.0.1245.44",
         device: "desktop",
         metaSearcherCode: "TVG",
utm: [
            {"code": "utm_campaign", "value": ["blogpost"]},
            {"code": "utm_medium", "value": ["social"]},
            {"code": "utm_source", "value": ["facebook"]}
]
},
searcherBehaviour: {
         addUtmsToUrl: true
},
};
   Object.assign(window.parameters.bookingEngine, bookingEngineParameters);

   var genericManifestAndVendorsLoaded = genericManifestAndVendorsLoaded || false;
   if (!genericManifestAndVendorsLoaded) {
      jQuery.getScript("https://hotel.new.hotetec.com/components/js/vendors.js");
      jQuery.getScript("https://hotel.new.hotetec.com/components/js/manifest.js");
      genericManifestAndVendorsLoaded = true;
}
</script>

<div id="app-container">

   <script src="https://hotel.new.hotetec.com/components/booking-engine/js/main.js"></script>

</div>