<script src="https://bookingform.mainapps.com/js/jquery-2.1.4.min.js"></script>
<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>
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>
<link href="https://bookingform.mainapps.com/css/booking-form.css" rel="stylesheet" /> <script src="https://bookingform.mainapps.com/js/booking-form.js"></script>
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>
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>
<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>
<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>
<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>