Book now
Splash
Topbar
Embedded

Documentation

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

ParameterDescriptionAccepted valuesDefault value
chainChain codeSANDOS, MARCONFORTSANDOS
langLanguage codees, enes
originBooking originCode that indicates the booking origin, as created in Sandos BackofficeBOOKING
hotelcodeDingus hotel codeMONACO, PAPAGAYO,...null
themeTheme namesandos, marconfort, eco, beach, lifestylesandos
formmodeForm display modesplash, embedded, topbarsplash
disable-open-destinationsIf set to true, the destination is fixed and cannot be changedboolfalse
force-booking-visibleAllows to show the booking form, event in mobile deviceboolfalse

Environment URLS

Link the below pages in your page.
UrlDescriptionEnvironment
http://bookingform-staging.sandos.com/js/main.jsJavascriptpre
http://bookingform-staging.sandos.com/css/main.cssHoja de estilospre
https://bookingform.sandos.com/js/main.jsHoja de estilosprod (TBD)
https://bookingform.sandos.com/js/main.cssJavascriptprod (TBD)

Form visibility

Booking Form - Mobile

In mobile, by default the component loads but remains hidden in the page.

  • To keep it always visible for mobile, you need to set the force-booking-visible = true property
  • To be in charge of when to show it or hide it, you need to:
    1. Send a bookingFormTrigger event to change the visibility form hidden to visible or viceversa
    2. Listen to the toggle event on the element with id="sandos-show-book-button" on your page.

    Note By combining those events, you could then show a "book now" button that hides to show the form, or that is visible when the form is hidden

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.

Note No toggle event will be sent to the element with id="sandos-show-book-button"

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
})

Detail on how to send and to receive the form events

  • To toggle the form visibility:
    $('.bookingFormTrigger').click();
  • To toggle the form mode between splash / embedded / topbar:
    $('.bookingModeTrigger').trigger('toggleFormMode', newFormMode);
  • To receive the event on the id="sandos-show-book-button" element (on your page):
    1 Add the listener to the button with the ID
    <button id="sandos-show-book-button" onclick="listenToFormEvent()">
    2 Add your logic in the "listenToFormEvent" function