To use this widget you must set it up with these options according your needs
Set this cdn script at the end of your <head> section from your HTML page in order to install some dependencies.
<script src='https://www.reservhotel.com/airlink/smartwidget2021/horizontal/rh-booking-horizontal.js>
After setting up the cdn, you should paste this HTML code wherever you want the widget to be set.
<div class="wrapper-rh-h">
<div class="widget-rh-h" id='widget-rh-h'>
</div>
</div>
Lastly, you should import the widget inside a script tag and set the options you want.
<script type="module">
import Horizontal_BookingRH from 'https://www.reservhotel.com/airlink/smartwidget2021/horizontal/index.js';
new Horizontal_BookingRH({
tabs: {
HA:{
},
HO:{
}
}
})
</script>
These options are available to be set inside HA or HO which means "Hotel + Air" and "Hotel Only" respectively, some of them are mandatory such as "button" option and some are not.
| Option | Type | Description |
|---|---|---|
| airport | Boolean | This will set up the Airport input and will only be available in HA (Hotel + Air) Tab |
| checkinout | Boolean | A datepicker will be set wherever you assigned either HA or HO tab |
| children | Boolean | A dropdown field will be set to pick the number of children |
| adults | Boolean | A dropdown field will be set to pick the number of adults |
| promocode | Boolean | This will set up an input field where the user will be able to type a Promo Code |
| agencygroup | Boolean | This will set up an input field where the user will be to type any Agency ID or Group code |
| button | Boolean | This will set up the "Find Rates" button if it is set to "true" |
| hotels | Object | The object type will receive the hotel URL as the key and the hotel name as the value. If it is passed a hotel only ,an input type hidden will be set storing the hidden that was set. Otherwise, if there is more than one hotel, a dropdown will be set in order to show the hotels you set. |
Full live example as you can see at the right
new Horizontal_BookingRH({
tabs: {
HA: { //Hotel + Airport
airport: true,
checkinout: true,
children: true,
adults: true,
promocode: true,
agencygroup: true,
button: true,
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,
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",
}
},
}
});