Skip to main content

Hotel Availability

1.3.9
Widget
Try Now

Configuration keys in both cases (React and WebComponent) needs to be passed as attributes. You will find how to do that in Examples section. In case of WebComponents you should handle configuration types: array, object and function needs to be handled differently. Array and Object should be a JSON string. You can validate if your string is a valid JSON here. I.e.

<sabre-widget
    hotels='[{"name": "Hotel 1"}, {"name": "Hotel 2"}]'
    config='{"key": "value"}'>
</sabre-widget>

React version in this case will look like:

<SabreWidget
    hotels={[{"name": "Hotel 1"}, {"name": "Hotel 2"}]}
    config={{"key": "value"}}
/>

In case of functions for WebComponents you need to pass a globally available function name. In case of React it's just a function.

<script>
function onHotelSelectMethod(hotel) {
    alert(hotel);
}
</script>

<sabre-widget
    onHotelSelect="onHotelSelectMethod">
</sabre-widget>

React version in this case will look like:

<SabreWidget
    onHotelSelect={(hotel => { alert(hotel); })}
/>

Supported keys

Name Type Default Required Description
api string     Valid API key required to make a widget work
calendarProps object     Calendar configuration keys. You can get a full list of calendar configuration from Calendar Widget section
expanded bool     If should be expanded by default
expandedHotelList bool     Hotel list expanded by default
hideBestPrice bool     It will hide a best price with show availability button and expand calendar section by default
hotel string     CRS Hotel ID if API is not for all chain hotels
hotelList array     If you provide a hotel list it will display a widget in hotel selection mode. Check how it works in examples section
labels object {}  

Object of translations labels you can override. I.e.
{"search": "Search", "startingFrom": "Prices from"}
Full list of available labels are listed below.

maxRooms number     Maximum number of rooms you can add
onSubmit function     Method triggered on submit

Translation labels

{
    "search": "Search",
    "showAvailability": "Show availability",
    "startingFrom": "Starting from",
    "excludesTaxFees": "excludes tax + fees",
    "checkAvailability": "Check Availability",
    "checkIn": "Check In",
    "checkOut": "Check Out",
    "guests": "Guests",
    "adults": "Adults",
    "children": "Children",
    "clear": "clear",
    "apply": "Apply",
    "room": "Room",
    "rooms": "Rooms",
    "addARoom": "+ Add a Room",
    "remove": "remove",
    "legendRestriction": "Minimum Stay",
    "legendNotAvailable": "Not Available",
    "legendSelected": "Selected",
    "close": "Close",
    "selectHotel": "Where are you headed"
}