Widgets Usage

For use these widgets you must add a empty "div" in your HTML template with a specific class name. Inside will be rendered the widget content. There can be more than one widget, each with its configuration.

<div class="bookingWidget"></div>

Afterwards is necessary to load the javascrits and css.

Environment Description Url
Pre/Staging Javascript //bookingwidgets-staging.sandos.com/js/main.js
Pre/Staging Css //bookingwidgets-staging.sandos.com/css/main.css
Prod/Live Javascript //bookingwidgets.sandos.com/js/main.js
Prod/Live Css //bookingwidgets.sandos.com/css/main.css

Important: If you use widgets and bookingform together, is very important firstly load the bookingform's javascript and then those of the bookingwidget.

We recommend you to add a unique file's content hash to prevent browser's caching. For example:

<script type="text/javascript" src="//bookingwidgets.sandos.com/js/main.js?f7d9906c619276441b63"></script>

It is also possible to set some parameters for the widget using the dataset, for example:


Allowed parameters

Parameter Description Default value
widgetWidget type. It's a number: 1, 2, 3...1
themeVisual theme. Currently there are: t2017_eco, t2017_beach, t2017_lifestyle and marconfortt2017_eco
langLanguage code (es, en)es
couponBoolean to set if it shows the promotional code field, or not.false
hotelcodeHotel codenull
sessionThe unique user's session ID.null
originSell's origin code.BOOKING
checkinCheckIn date with format YYYY-MM-DD.null
checkoutCheckOut date with format YYYY-MM-DD.null
show-hotel-flight-btnShow the hotel + flight button.true

Available Widgets

Number/Id Description
1 Availability form with dates and promotional code.
2 Availability form with searches types (hotel, hotel + flight). There are booking dates and promotional code.
3 The same as widget 2 but with a horizontal format.

Asynchronous Loading

Is possible render a widget asynchronously inside a container. Call the follow method for that.:

window.loadWidget(classNameContainer, widgetType, visualTheme, language, hotelCode, chainCode, sessionId, origin, couponActive, checkIn, checkOut)

An example:

<button onClick="window.loadWidget('container', '1', 't2017_eco', 'es', 'GRECO', 'SANDOS', 'fxvb6wle59kqgl4oopvn4fsmijz18b5p', 'BOOKING', 'true', '2018-01-01', '2018-01-10')">Load</button>
<h1>Widget 2 (Theme t2017_eco)</h1>