Booking Horizontal Widget

To utilize this widget effectively, you must configure it with the following options based on your requirements:

Usage

Place this CDN script at the end of your HTML page's <head> section to install necessary dependencies.

<script src='https://www.reservhotel.com/airlink/smartwidget2021/horizontal/js/rh-booking-horizontal.js'>

Once you've configured the CDN, simply paste this HTML code wherever you'd like the widget to appear.

<div class="wrapper-rh-h"> 

  <div class="widget-rh-h" id='widget-rh-h'> 

  </div> 

</div>

Finally, import the widget within a script tag and define the desired options.

        
<script type="module"> 

  import Horizontal_BookingRH from 'https://www.reservhotel.com/airlink/smartwidget2021/horizontal/js/index.js';

  new Horizontal_BookingRH({
   tabs: {
    HA:{

    },
    HO:{
      
    }
   }
  })

</script>

Options

You can configure these options within either "Hotel + Air" (HA) or "Hotel Only" (HO) settings. Certain options, such as "button," are mandatory, while others are not.

Option	Type	Description
airport	Boolean	This code configures the Airport input, accessible exclusively within the "Hotel + Air" (HA) tab.
checkinout	Boolean	A datepicker will be implemented wherever you designate either the HA or HO tab.
children	Boolean	A dropdown field will be provided for selecting the number of children.
adults	Boolean	A dropdown field will be provided for selecting the number of adults.
promocode	Boolean	An optional input field will be available for users to enter any promotional code if needed.
agencygroup	Boolean	An optional input field will be provided for users to enter any Agency or Group code if needed
button	Boolean	The "Find Rates" button will be displayed if set to "true".
hotels	Object	The object type will include the hotel URL as the key and the hotel name as the value. If it is passed a single hotel, a hidden input type will store the specified hotel code. If it is set multiple hotels, a dropdown will display the designated hotel options.
openInNewTab NEW	Boolean	An optional feature enables opening a new tab upon clicking "Find Rates" if set to true. Otherwise, you will be redirected on the same page.
lang (Optional) NEW	String	An optional feature enables users to choose between English and Spanish languages. (en=English), (es=Spanish)

Example

Full live example as you can see at the right


  new Horizontal_BookingRH({
    lang: "en",
    tabs: {
      HA: { //Hotel + Airport
        airport: true,
        checkinout: true,
        children: true,
        adults: true,
        promocode: true,
        agencygroup: true,
        button: true,
        openInNewTab: false,
        hotels: { //Input type hidden will be set
          "https://www.reservhotel.com/win/owa/ibe5.main?hotel=555": "MIAMI RESORT TEST",
          "https://www.reservhotel.com/win/owa/ibe5.main?hotel=556": "THE GRAND AT MOON PALACE TEST",
        }
      },
      HO: { //Hotel Only        
        checkinout: true,
        children: true,
        adults: true,
        promocode: false,
        agencygroup: false,
        button: true,
        openInNewTab: true,
        hotels: { //A dropdown will be set
          "https://www.reservhotel.com/win/owa/ibe5.main?hotel=555": "MIAMI RESORT TEST",
          "https://www.reservhotel.com/win/owa/ibe5.main?hotel=556": "THE GRAND AT MOON PALACE TEST",
        }
      },
    }
  });

Feel free to experiment with your preferred settings using the provided code editor for our widget.