Default Example
The Best Price Widget displays the lead price for the next month for publicly available products.
By default, the lead price will be shown as a button with a label indicating whether it includes taxes and fees or not. Styling will be inherited from the styles surrounding it. When clicked the button opens a new browser tab with the SynXis Booking Engine site for the chain/hotel configured.
If the chain/hotel uses a white label domain for SBE, then they may specify the domain in the sbeCustomUrl field, and it will open the SBE using the white label domain instead.
Lead Price:
<p>Lead Price: <sabre-shs-widgets-best-price api="MDAwMTV+dFBKa01ReUIrVzVqdWNxL21XNkRZSTJnWktGdUpIMFZBaWI4amx0SkxhMXJ0Z2xUcEVGRUg3TUVVSkRVeHcyTjgyaDRONCtzU1VGaVF2NmNKOXgrVFE9PQ==" chain="12011" hotel="10155" currency="USD"> </sabre-shs-widgets-best-price></p>
Button Example with Custom OnClick Method
If an on-click method is specified, then the widget button is clicked, the on-click callback method specified will be called instead of redirecting to the SynXis Booking Engine.
Define a globally scoped JavaScript function and refer to it by name in the on-click parameter of the widget definition.
Lead Price:
<!-- globally defined javascript function -->
<script>
function handleClick() {
alert("You clicked me!");
}
</script>
<p>Lead Price:
<sabre-shs-widgets-best-price
api="MDAwMTV+dFBKa01ReUIrVzVqdWNxL21XNkRZSTJnWktGdUpIMFZBaWI4amx0SkxhMXJ0Z2xUcEVGRUg3TUVVSkRVeHcyTjgyaDRONCtzU1VGaVF2NmNKOXgrVFE9PQ=="
chain="12011"
hotel="10155"
currency="USD"
on-click="handleClick">
</sabre-shs-widgets-best-price></p>
Button Example for Specific Room Types with Custom Styling
Configuration options can be added to customize results to a specific stay, room type, or product. See the Configuration tab for all options.
Label text can be customized using the labels parameter.
The widget will default to match the Bootstrap stylesheet used by the site, but styles can be overridden explicitly using CSS.
Lead Price for Deluxe Rooms:
<!-- style overrides -->
<style>
.shs-widgets--best-price {
background-color: #a10d0d;
font-family: Copperplate, Copperplate Gothic Light, fantasy;
}
</style>
<p>Lead Price:
<sabre-shs-widgets-best-price
api="MDAwMTV+dFBKa01ReUIrVzVqdWNxL21XNkRZSTJnWktGdUpIMFZBaWI4amx0SkxhMXJ0Z2xUcEVGRUg3TUVVSkRVeHcyTjgyaDRONCtzU1VGaVF2NmNKOXgrVFE9PQ=="
chain="12011"
hotel="10155"
currency="USD"
start-date="2021-11-15"
end-date="2021-11-18"
adult="1"
child="2"
room-list='["DLXK","DLXQQ"]'
include-taxes="false"
only-check-requested="true"
labels='{"shs-widgets--best-price.excludingTaxes": "Before Taxes and Fees"}'
</sabre-shs-widgets-best-price></p>