In order to be able to add data and information into the booking engine via script, such as an offer or a price comparator, we have set up a specific area for this purpose, which is protected so every time the booking engine is reloaded, the information from the script is painted correctly.


We have two ways of doing this:

  • Using JS events
  • Using a fixed ID in the HTML



JS events


The event must be called eventBannerInfo and will have the following parameters:

  • 'content' in which the HTML content will be passed.
  • 'navigation_step' in which the step of the booking process will be indicated.


The possible fields for 'navigation_step' are:

  • HOTEL_AVAILABILITY: availability of all hotels, none are selected (only valid for multihotel engines).
  • ROOM_AVAILABILITY: availability of a particular hotel and where the rooms are displayed
  • BOOKING_FORM: booking block, where the customer enters his details
  • BOOKING_CONFIRMATION: confirmation page where a summary of the entire booking is displayed.


Example of use:


window.dispatchEvent(new CustomEvent("eventBannerInfo", {detail: {content: '<div>Comparación de precios</div>', navigation_step: 'HOTEL_AVAILABILITY'}}));


NOTE: Using this method, Hotetec can control how the content is displayed and ensure that it is visible even if the user navigates through the different sections of the booking process.



Fixed ID


In our booking engine we have the ID "inliner" in a <div> tag of the code that allows us to insert HTML content in it. When receiving the information via the installed script, the received information will be displayed in the area designed for it.


This ID will be found in the 4 steps of the booking engine so that it is painted in each of them according to what is received. In which step the content is displayed depends on what is sent in the HTML, it is not controlled by Hotetec.

  • HOTEL_AVAILABILITY: availability of all hotels, none selected (only valid for multihotel booking engines).
  • ROOM_AVAILABILITY: availability of a specific hotel and where the rooms are displayed.
  • BOOKING_FORM: booking block, where the customer enters his data
  • BOOKING_CONFIRMATION: confirmation page where a summary of the whole booking is shown.


Everything related to this "banner" will depend on what is received in the script and therefore the styles to fit the design of the booking engine and the client must be well defined, as well as the logic needed to use it (as each step of the booking process will erase what was in the banner, as the whole booking engine is repainted).


Example of use:


document.getElementById("inliner").innerHTML = "<span>CONTENIDO INLINER</span>"

NOTE: using this method from Hotetec we will not be able to control the display of content and this control will always be carried out by the channel and all the logic must be structured in the information sent by means of the relevant script.



IMPORTANT


You cannot use both ways to enter content, you must choose one or the other, as they occupy the same space in the booking engine and therefore cannot coexist with each other.


It is of vital importance to control correctly what is added, as it could damage the design or structure of the booking engine if the information sent is not adapted correctly.