MediaLab Booking Form

Include jQuery if not present

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

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>

Before the body tag close:

Float example

<script>
    jQuery.mlBookingForm({
    apikey: "aaa", // apikey MediaLab
    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: "27/12/2017", // initial arrival date (formatted as dateFormat)
    departure: "29/12/2017", // initial departure date (formatted as dateFormat)
    pax: true, // enable pax composition
    defaultPax: 3, // default pax number
    childs: true, // enable childs configuration
    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: { // custom label
        checkIn: "Arrivo",
        checkOut: "Partenza",
        pax: "Adulti",
        childs: "Bambini",
        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
        submitWrapper: '' // for example 'col-md-2' for bootstrap responsivity
    }
});
</script>

Inline example

<div id="mlWrapper"></div>
<script>
    jQuery.mlBookingForm({
    apikey: "aaa", // apikey MediaLab
    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: "27/12/2017", // initial arrival date (formatted as dateFormat)
    departure: "29/12/2017", // initial departure date (formatted as dateFormat)
    pax: true, // enable pax composition
    defaultPax: 4, // default pax number
    childs: false, // enable childs configuration
    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: { // custom label
        checkIn: "Arrivo",
        checkOut: "Partenza",
        pax: "Adulti",
        childs: "Bambini",
        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-4', // for example 'col-md-4' for bootstrap responsivity
        toWrapper: 'col-md-4', // for example 'col-md-4' for bootstrap responsivity
        paxWrapper: 'col-md-2', // for example 'col-md-2' for bootstrap responsivity
        submitWrapper: 'col-md-2' // for example 'col-md-2' for bootstrap responsivity
    }
});
</script>