It will allow you to make availabilities based on the following criteria: hotel / destination / theme, guests, check-in and check-out dates, and discounts.


It should be noted that the system code of the engine can be B2C, which in turn is divided into HPH (desktop/tablet) and MPH (mobile), B2B and CCH. When the website has a B2B/Call Centre login component, only this system code (B2B or CCH) shall be used regardless of the device through which the user accesses the website. If the website does not have a B2B/Call Center login component, the engine will be B2C, so it will be necessary to pass to the engine as a parameter the system code corresponding to the device, HPH for desktop and tablet, and MPH for mobile.



When the B2B/Call Center login component exists on the website, the engine will automatically retrieve the system configured in that component. This can be seen in the commented HTML example.


When system is MPH (mobile) the engine display is full screen and can be shown/hidden by the function passed by the toggleDisplay parameter. The 'X' of the engine will hide it and in the web part there must be logic to show it again for example by clicking on a button.



Parameters*


Main parameters


Parameter
Description
Example
webSessionIdUnique web session identifier. It will be used to maintain the user's session between components and pages.
01CDA38719E74937A2F275757ABA34EE
viewFixed value "Searcher
Searcher
bookingEngineBooking engine code. Provided by Hotetec.2
currencyCurrencyISO 639-1 format
  • es: Spanish
  • en: English
  • de: German
languageLanguageISO 4217 format
  • EUR: Euro
  • USD: United States dollar
  • GBP: British Pound
systemSystem code (HPH or MPH)
HPH: Desktop or tablet
MPH: Mobile
availabilityUrlBooking process page. Provided by Hotetec.
/bet0.html
containerId of the HTML tag that will be the container for the component
container
trackingObject with tracking information

toggleDisplayJS function to be called only when 'system' is 'MPH' to show/hide the booking engine
toggleDisplay
searcherBehaviourOptional object with browser behaviour on loading

navigationObject with navigation information

searcherDefaultValuesOptional object with browser defaults



Object tracking


Parameter
Description
Example
gtmGoogle Tag Manager Identifier
GTM-TEST


Object searcherBehaviour


Parameter
Description
Example
openCalendarAutomatically opens the booking engine calendar when loading
true



Object navigation


Parameter
Description
Example
ipAddressUser Ip
172.21.34.74
countryCodeCountryES
domainWebsite domain
connect.pro.hotetec.in
referrerFrom where do you reach the website
https://www.otherwebsite.com
landingPageFirst page accessed
https://connect.pro.hotetec.in/
userAgentBrowser User-Agent
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
deviceDevice (computer, tablet, mobile)
desktop
metaSearcherCode3 letter code indicating the system from which the request is coming from
TVG
utm

Array of objects with the required utm.


The format of each object shall be:

{"code": code, "value": value}


[

                {"code": "utm_campaign", "value": ["blogpost"]},

                {"code": "utm_medium", "value": ["social"]},

                {"code": "utm_source", "value": ["facebook"]}

            ]



Object searcherDefaultValues





areaCodeZone/Area code
ESBAL03
hotelCodeHotel Code49426
thematicCodeThematic code
BEACH
dateFromCheck in2022-07-23T00:00:00Z
dateToCheck out
2022-07-26T00:00:00Z
fareCodeRate Code30125
roomCodeRoom CodeDBL#STD
mealPlanCodeMeal Plan CodeBB 
occupancyCodeOccupancy.
Format O@Adults-Children-0.
The 'O' at the beginning and the '0' at the end are fixed. It is only possible to indicate one room
O@3-1-0
promotionalCodeDefault promotional code
BLACK_FRIDAY_23



* 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>
    // JS function to be called only when 'system' is 'MPH' to show/hide the booking engine
    function toggleDisplay(){
        // Show or hide the booking engine
    }

    // Variable that will only exist when there is a B2B/Callcenter login component on the same page.
    var searcherSystemCode = localStorage.getItem('systemCode');
    // Depending on the device you will use: HPH - Desktop/Tablet or MPH - Mobile.
    var system = "HPH";
    // This code will be used as long as there is no B2B/Callcenter login on the same page, in which case it will be taken from the previous variable (which is automatically generated in that component).
    if (searcherSystemCode != null && searcherSystemCode != "") {
system = searcherSystemCode;
}

    var bookingEngine = "2";
    localStorage.setItem('bookingEngine', bookingEngine);

    // Component parameters
    window.parameters = window.parameters || {};
    window.parameters.bookingEngine = {
        webSessionId: "01CDA38719E74937A2F275757ABA34EE",
        view: "Searcher",
bookingEngine: bookingEngine,
        currency: "EUR",
        language: "es",
system: system,
        availabilityUrl: "disponibilidad-proceso-completo.html", // IMPORTANT! In a live environment it should be an absolute or relative path, like "/availability-process-complete.html". Now it is made like this to work correctly in these examples 
        container: "app-container",
tracking: {
            gtm: "GTM-TEST"
},
        toggleDisplay: toggleDisplay, // JS function to be called only when 'system' is 'MPH' to show/hide the booking engine
searcherBehaviour: {
            openCalendar: true
},
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"]}
]
},
searcherDefaultValues: {
            areaCode: "",
            hotelCode: "49426",
            thematicCode: "",
            dateFrom: "2022-07-23T00:00:00Z",
            dateTo: "2022-07-26T00:00:00Z",
            fareCode: "",
            roomCode: "",
            mealPlanCode: "",
            occupancyCode: "O@3-1-0",
            promotionalCode: ""
}
};

    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>

<style>
    /* Contenedor del motor */
#app-container {
display: flex;
justify-content: center;
padding: 24px;
}
</style>



Event - Modify booking engine values


It is possible to modify the values of the engine by means of a JavaScript event, so that clicking on a button or link updates the search engine with the parameters we want.


const searcherValues = {
      areaCode: '',
      hotelCode: '45501',
      thematicCode: '',
      occupancyCode: 'O@2-0-0',
      dateFrom: '2022-12-20T00:00:00Z',
      dateTo: '2022-12-22T00:00:00Z',
      fareCode: '',
      roomCode: '',
      mealPlanCode: '',
      occupancyCode: 'O@3-1-0',
      promotionalCode: "BLACK_FRIDAY_23"
};
   window.dispatchEvent(new CustomEvent("eventSearcherValues", {detail: searcherValues}));


Event - Open engine with autopositioning in the viewport


With the following JavaScript event you can open the engine and also make it auto-position itself in the viewport. It is possible to use this event right after the previous one (Modify engine values) so that after updating the engine values, it opens automatically. For example with prices from.


const searcherBehaviour = {
      openCalendar: true,
      scrollIntoView: true,
      scrollTopOffset: 0 //It can be modified to look exactly at the offset you want. 
};
   window.dispatchEvent(new CustomEvent("eventSearcherBehaviour", {detail: searcherBehaviour}));


Option when the engine is not visible in the page viewport


Manually, you could make it so that when the search engine is not visible in the viewport of the page, display a button that when clicked by JS will click on the search engine input, and it will automatically open and auto position itself in the viewport.



Collect the promotional code from the URL and add it to the engine.


It is possible to add a promotional code to the engine before performing a search. This promotional code can be added for example from the main URL and can be added to the engine:


const urlParams = new URLSearchParams(window.location.search);

var promotionalCode = urlParams.get('promoCode');



  • 'promoCode': is the parameter name we use internally, but on a website outside the Hotetec environment you could use any parameter name you prefer.
  • var promotionalCode: here is stored the promotional code to be passed to the booking engine