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:

<div
    class="bookingWidget"
    data-widget="2"
    data-lang="en"
    data-coupon="true"
    data-theme="t2017_eco"
    data-hotelcode="GRECO"
    data-chain="SANDOS"
    data-session="fxvb6wle59kqgl4oopvn4fsmijz18b5p"
    data-origin="BOOKING">
</div>

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
chainChain code (SANDOS|MARCONFORT)SANDOS
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>