Booking Vertical Widget

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

Try our code editor for our widget

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/vertical/js/rh-booking-vertical.js'>

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

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

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

  </div> 

</div>

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

        
<script type="module"> 

  import Vertical_BookingRH from 'https://www.reservhotel.com/airlink/smartwidget2021/vertical/js/index.js';

  new Vertical_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" and "adults", 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 NEW String An optional feature enables users to choose between English and Spanish languages. (en=English), (es=Spanish)
options Object An option that contains the settings for the widget. We included "maxAdults" option
maxAdults NEW Integer You can set the maximum of adults that will be set in the dropdown option.

Example

Full live example as you can see at the right


  new Vertical_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
        airport: false,
        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",
        }
      },
    },
    options: {
      maxAdults: 2
    }
  });

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