Create a div element with the specied id "bookingForm"
<div id="bookingForm"></div>
The div can establish parameters that make the form display differently
<div id="bookingForm" data-chain="MARCONFORT" data-lang="es" data-origin="CORP" data-hotelcode="GRECO"></div>
Accepted parameters
Parameter | Description | Accepted values | Default value |
---|---|---|---|
chain | Chain code | SANDOS, MARCONFORT | SANDOS |
lang | Language code | es, en | es |
origin | Booking origin | Code that indicates the booking origin, as created in Sandos Backoffice | BOOKING |
hotelcode | Dingus hotel code | MONACO, PAPAGAYO,... | null |
theme | Theme name | sandos, marconfort, eco, beach, lifestyle | sandos |
formmode | Form display mode | splash, embedded, topbar | splash |
disable-open-destinations | If set to true, the destination is fixed and cannot be changed | bool | false |
force-booking-visible | Allows to show the booking form, event in mobile device | bool | false |
Environment URLS
Link the below pages in your page.Url | Description | Environment |
---|---|---|
http://bookingform-staging.sandos.com/js/main.js | Javascript | pre |
http://bookingform-staging.sandos.com/css/main.css | Hoja de estilos | pre |
https://bookingform.sandos.com/js/main.js | Hoja de estilos | prod (TBD) |
https://bookingform.sandos.com/js/main.css | Javascript | prod (TBD) |
Booking Form - Mobile
In mobile, by default the component loads but remains hidden in the page.
Booking Form - Desktop
In desktop, by default the component is displayed immediately after is is loaded in the page However, it is still possible to change this behaviour by sending the toggle event to the component to change the visibility.
Booking widgets - Desktop
When the page loads, it looks for elements which have the class bookingWidget. All elements which are in the page will have the widget available, and it will be always visible. Only one can be displayed at every moment, so the customer page needs to load only one at a time.
If you want to add widgets to the page dynamically (after it is first loaded), you will need to call our "async" action: loadWidgetAsync({
containerClass: 'parent-where-the-widget-will-load',
checkIn, checkOut,
chain, hotelCode, promoCode,
theme, language, origin
})