MediaLab Booking Form

Include jQuery

<script src="https://bookingform.mainapps.com/js/jquery-2.1.4.min.js"></script>

Include Bootstrap Calendar And Moment.js if not present

<link href="https://bookingform.mainapps.com/bootstrap/calendar/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="https://bookingform.mainapps.com/bootstrap/calendar/js/moment.js"></script>
<script src="https://bookingform.mainapps.com/bootstrap/calendar/js/bootstrap-datetimepicker.js"></script>

Change i18n as you prefer

If you need to change locales please import i18n file from our repository and change xx with imported file language code (eg. it, en, de...), then call the moment locale function as show
You can find the list of supported languages at https://github.com/moment/moment/tree/develop/locale

<script src="https://bookingform.mainapps.com/bootstrap/calendar/js/locale/xx.js"></script>
<script>
   moment.locale('xx');
</script>

Include mlBookingForm

<link href="https://bookingform.mainapps.com/css/booking-form.css" rel="stylesheet" />
<script src="https://bookingform.mainapps.com/js/booking-form.js"></script>

Include bootstrap-multiselect if needed

If the type or area selector are active you should include multiselect plugin files

<link href="https://bookingform.mainapps.com/bootstrap/css/bootstrap-multiselect.min.css" rel="stylesheet" />
<script src="https://bookingform.mainapps.com/bootstrap/js/bootstrap-multiselect.min.js"></script>

Is jQuery already present?

If your site already includes a version of jQuery other than 2.1.4 please insert this line after jQuery 2.1.4 script

<script>var $jma = jQuery.noConflict(true);</script>

Then replace these lines

<script src="https://bookingform.mainapps.com/bootstrap/calendar/js/bootstrap-datetimepicker.js"></script>
<script src="https://bookingform.mainapps.com/js/booking-form.js"></script>

With the following

<script src="https://bookingform.mainapps.com/bootstrap/calendar/js/safe/bootstrap-datetimepicker.js"></script>
<script src="https://bookingform.mainapps.com/js/safe/booking-form.js"></script>

Not sure about jQuery version?
Before proceeding further, insert the following code on your site and check the version (if you get an error means jQuery is not present)

<script>
    $(document).ready(function () {
        console.log($().jquery);
    });
</script>

If you are following the above section, replace 'jQuery' with '$jma' in the examples below

<script>
   $jma.mlBookingForm({
    apikey: "aaa", // apikey MediaLab (change with you own)
    ...
</script>

Before the body tag close:

Float example

<script>
    jQuery.mlBookingForm({
    apikey: "aaa", // apikey MediaLab (change with you own)
    language: "en",  // languange for the booking site
    position: "left", // fixed position for widget ("left" or "right"), not used if wrapper is not body. If not setted the element is positioned inline into the wrapper.
    wrapper: 'body', // jQuery selector of element where append the widget, default 'body'. The element must be one, otherwise it will be taken only the first.  
    width: 250, // width of the form
    dateFormat: "DD/MM/YYYY", // DD=day of month, MM=month, YYYY=year
    arrival: "", // initial arrival date (formatted as dateFormat)
    departure: "", // initial departure date (formatted as dateFormat)
    pax: true, // enable pax composition
    defaultPax: 3, // default pax number
    childs: true, // enable childs configuration
    tipology: false, // enable tipology selector
    area: false, // enable area selector
    minPax: null, // min value Adults combo, if null sets combo to 1 
    maxPax: 8, // max value Adults combo
    maxChilds: 4,  // max value Childs combo
    maxAge: 17, // max value Age combo
    minDays: 1, // minimum stay in nights
    defaultDays: 7, // default stay in nights
    defaultGroup: 49, // default accomodation (RealGroupID)
    daysOfWeekDisabled: [], //Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6 (ex. [0, 6])
                            //*** TO USE THIS PROPERTY SET 'null' arrival and departure ***
    style: {
        buttonBg: "#c00", // toggle button background color
        buttonColor: "#fff", // toggle button text color
        submitBg: "#33AD33", // submit button background color
        submitColor: "#fff" // submit button text color
    },    
    label: {
        checkIn: "Arrivo",
        checkOut: "Partenza",
        pax: "Adulti",
        childs: "Bambini",
        tipology: "Tipologia",
        types_noSelection: "Tutte le tipologie",
        types_multipleSelection: "tipologie selezionate",
        area: "Destinazione",
        geographicareas_noSelection: "Tutte le destinazioni",
        geographicareas_multipleSelection: "destinazioni selezionate",
        noSelection: "Nessuna selezione",
        selectAll: "Seleziona tutto",
        age: "Età",
        send: "Prenota",
        buttonText: "BOOK NOW"
    },
    customClass: { // set custom class for the elements
        mainWrapper: '', // for example 'row' for bootstrap responsivity
        fromWrapper: '', // for example 'col-md-4' for bootstrap responsivity
        toWrapper: '', // for example 'col-md-4' for bootstrap responsivity
        paxWrapper: '', // for example 'col-md-2' for bootstrap responsivity
        tipologyWrapper: '', // for example 'col-md-2' for bootstrap responsivity
        areaWrapper: '', // for example 'col-md-2' for bootstrap responsivity
        submitWrapper: '' // for example 'col-md-2' for bootstrap responsivity
    }
});
</script>

Inline example

<div id="mlWrapper"></div>
<script>
    jQuery.mlBookingForm({
    apikey: "aaa", // apikey MediaLab (change with you own)
    language: "en",  // languange for the booking site (it, en or de)
    wrapper: '#mlWrapper', // jQuery selector of element where append the widget, default 'body'. The element must be one, otherwise it will be taken only the first.    
    dateFormat: "DD/MM/YYYY", // DD=day of month, MM=month, YYYY=year
    arrival: "", // initial arrival date (formatted as dateFormat)
    departure: "", // initial departure date (formatted as dateFormat)
    pax: true, // enable pax composition
    defaultPax: 4, // default pax number
    childs: false, // enable childs configuration
    tipology: true, // enable tipology selector
    area: true, // enable area selector
    minPax: 2, // min value Adults combo, if null sets combo to 1 
    maxPax: 8, // max value Adults combo
    minDays: 3, // minimum stay in nights
    defaultDays: 7, // default stay in nights
    defaultGroup: null, // default accomodation (RealGroupID)
    daysOfWeekDisabled: [], //Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6 (ex. [0, 6])
                            //*** TO USE THIS PROPERTY SET 'null' arrival and departure ***
    style: {
        buttonBg: "#c00", // toggle button background color
        buttonColor: "#fff", // toggle button text color
        submitBg: "#33AD33", // submit button background color
        submitColor: "#fff" // submit button text color
    },    
    label: {
        checkIn: "Arrivo",
        checkOut: "Partenza",
        pax: "Adulti",
        childs: "Bambini",
        tipology: "Tipologia",
        types_noSelection: "Tutte le tipologie",
        types_multipleSelection: "tipologie selezionate",
        area: "Destinazione",
        geographicareas_noSelection: "Tutte le destinazioni",
        geographicareas_multipleSelection: "destinazioni selezionate",
        noSelection: "Nessuna selezione",
        selectAll: "Seleziona tutto",
        age: "Età",
        send: "Prenota",
        buttonText: "BOOK NOW"
    },
    customClass: { // set custom class for the elements
        mainWrapper: 'row', // for example 'row' for bootstrap responsivity
        fromWrapper: 'col-md-2', // for example 'col-md-4' for bootstrap responsivity
        toWrapper: 'col-md-2', // for example 'col-md-4' for bootstrap responsivity
        paxWrapper: 'col-md-2', // for example 'col-md-2' for bootstrap responsivity
        tipologyWrapper: 'col-md-2', // for example 'col-md-2' for bootstrap responsivity
        areaWrapper: 'col-md-2', // for example 'col-md-2' for bootstrap responsivity
        submitWrapper: 'col-md-2' // for example 'col-md-2' for bootstrap responsivity
    }
});
</script>

Inline safe example

<div id="mlWrapperSafe"></div>
<script>
    $jma.mlBookingForm({
    apikey: "aaa", // apikey MediaLab (change with you own)
    language: "en",  // languange for the booking site (it, en or de)
    wrapper: '#mlWrapperSafe', // jQuery selector of element where append the widget, default 'body'. The element must be one, otherwise it will be taken only the first.    
    dateFormat: "DD/MM/YYYY", // DD=day of month, MM=month, YYYY=year
    arrival: "", // initial arrival date (formatted as dateFormat)
    departure: "", // initial departure date (formatted as dateFormat)
    pax: true, // enable pax composition
    defaultPax: 3, // default pax number
    childs: false, // enable childs configuration
    tipology: false, // enable tipology selector
    area: false, // enable area selector
    minPax: 3, // min value Adults combo, if null sets combo to 1 
    maxPax: 8, // max value Adults combo
    minDays: 3, // minimum stay in nights
    defaultDays: 7, // default stay in nights
    defaultGroup: null, // default accomodation (RealGroupID)
    daysOfWeekDisabled: [], //Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6 (ex. [0, 6]) //*** TO USE THIS PROPERTY SET 'null' arrival and departure ***
    style: {
        buttonBg: "#c00", // toggle button background color
        buttonColor: "#fff", // toggle button text color
        submitBg: "#33AD33", // submit button background color
        submitColor: "#fff" // submit button text color
    },    
    label: {
        checkIn: "Arrivo",
        checkOut: "Partenza",
        pax: "Adulti",
        childs: "Bambini",
        tipology: "Tipologia",
        types_noSelection: "Tutte le tipologie",
        types_multipleSelection: "tipologie selezionate",
        area: "Destinazione",
        geographicareas_noSelection: "Tutte le destinazioni",
        geographicareas_multipleSelection: "destinazioni selezionate",
        noSelection: "Nessuna selezione",
        selectAll: "Seleziona tutto",
        age: "Età",
        send: "Prenota",
        buttonText: "BOOK NOW"
    },
    customClass: { // set custom class for the elements
        mainWrapper: 'row', // for example 'row' for bootstrap responsivity
        fromWrapper: 'col-md-2', // for example 'col-md-4' for bootstrap responsivity
        toWrapper: 'col-md-2', // for example 'col-md-4' for bootstrap responsivity
        paxWrapper: 'col-md-2', // for example 'col-md-2' for bootstrap responsivity
        tipologyWrapper: 'col-md-2', // for example 'col-md-2' for bootstrap responsivity
        areaWrapper: 'col-md-2', // for example 'col-md-2' for bootstrap responsivity
        submitWrapper: 'col-md-2' // for example 'col-md-2' for bootstrap responsivity
    }
});
</script>