Skip to main content

Best Price

1.3.4
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
hotel string     CRS Hotel ID if API is not for all chain hotels
accessCode string     Access code for specified accessCodeType prop
accessCodeType one of string    

Access code type that is require if you provide an access code. Accepted values are: Group, Promotion, Corporate

adults number 1   Number of adults to fetch availability and pricing
button string     If exist it will add extra button with string passed
currencySymbol bool false   Display currency symbol not currency code
fromDay string     Start day to check a best price from. I.e. 2019-11-10
hidecurrency bool false   Hide currency and display only amount
includetax bool false   Include tax for every price
kids number 0   Number of kids to fetch availability and pricing
labelExtra string Selected   Extra label displayed after night label
labelNight string /night   Label for per night text after price
labelSlogan string Book with us today!   Label for slogan
labelSlogan2 string Prices starting:   Label for second line slogan
lengthOfStay number 1   Number of nights to fetch availability and pricing
onClick func     Method triggered on price click. Returns best price day
onError func     Method triggered on error response
onlyCheckRequested bool false   With this flag component will only check for requested parameters. I.e. if you provide room / rate / promo / group code code it will only look for this product. Else - if you request a minimum price and provide a room code and room code price will be higher than other room - other room price will be displayed. With this flag calendar will display requested room price even if price is higher.
pricetype one of string Minimum  

One of Minimum, Maximum, Average

rate string     Rate Code you want to check the prices for
room string     Room Code you want to check the prices for
rooms number 1   Number of rooms to fetch availability and pricing

Examples