Custom mybookings widget code (new window)

Follow

For some website builders including Wix you will need to install a slightly different widget code for the widgets to work which will open the booking engine in a new window. The Widget code is listed below replace the red code with your properties mybookings code. 

Mybookings Widget Code

<script>
var data = '<div class="CloudBedsWidget ver-">' +
    '<form action="https://hotels.cloudbeds.com/en/reservas/zsWUhE" method="post" class="widgetHotelsForm" autocomplete="off" target="_blank"> \
    <div class="vertical-widget "> \
    <div class="acessa_widget_block"><p title="Check In">Check In:</p> \
    <input type="hidden" name="date_format" value="m/d/Y" /> \
    <input type="text" class="widgetHotelsInputText date"  name="widget_date" value="11/30/2016"> \
    <input type="date" name="start_date_mobile" class="date_mobile widget_hide" id="start_date_mobile"></div> \
    <div class="acessa_widget_block"><p title="Check Out">Check Out:</p> \
    <input type="text" class="widgetHotelsInputText date"  name="widget_date_to" value="12/01/2016"> \
     <input type="date" name="end_date_mobile" class="date_mobile widget_hide" id="end_date_mobile"></div> \
    <div style="clear:both;"></div> \
    <input type="submit"  value="Go" target="_blank"> \
  </div> \
</form></div>';
    if (typeof CloudBeds_widget == "undefined") {
        var Load_css = function() {
            var loaded = {};
            function Load(url) {
                if (loaded[url])
                    return;
                loaded[url] = true;
                var fileref = document.createElement("link");
                fileref.setAttribute("rel", "stylesheet");
                fileref.setAttribute("type", "text/css");
                fileref.setAttribute("href", url);
                if (typeof fileref != "undefined") {
                    document.getElementsByTagName("head")[0].appendChild(fileref)
                }
            }
             return {
                 Load: Load
             }
        }();
        var Load_custom_css = function() {
            var loaded_custom = {};
            function Load_custom(name, $css) {
                if (loaded_custom[name])
                    return;
                loaded_custom[name] = true;
                var style = $css;
                var fileref = document.createElement("style");
                fileref.setAttribute("type", "text/css");
                fileref.innerHTML = style;
                document.getElementsByTagName("head")[0].appendChild(fileref);
            }
            return {
                Load_custom: Load_custom
            }
        }();
        var CloudBeds_widget = function () {
            var loaded = {};
            var baseClass = '.CloudBedsWidget.ver- ';
            var BClass = '.CloudBedsWidget.ver-';
            this.init = function(data, method) {
                method = method || 'write';
                Load_custom_css.Load_custom('style', "@charset \"UTF-8\";\n\/*!\n* Cloudbeds Widget\n* Copyright \u00a9 2015 Cloudbeds | https:\/\/www.cloudbeds.com\/\n*\/\n.widgetHotelsForm *{\nmargin: 0;\n}\n.widgetHotelsForm .acessa_widget_block .widgetHotelsInputText, .widgetHotelsForm .acessa_widget_block select {\nborder: 1px solid #3B3B3B;\nborder-radius: 4px 4px 4px 4px;\nbox-shadow: none;\ncolor: #5B5B5B;\nfloat: left;\nfont-family: 'Trebuchet MS', Verdana, sans-serif;\nfont-size: 12px;\nline-height: 20px;\npadding: 4px 22px 4px 6px;\n}\n.widgetHotelsForm .acessa_widget_block select {\nwidth: 49px;\nheight: 30px;\n}\n.widgetHotelsForm .acessa_widget_block .widgetHotelsInputText.date{\nwidth: 70px;\nheight: 20px !important;\nbox-sizing: content-box;\n-moz-box-sizing: content-box;\n-webkit-box-sizing: content-box;\nmargin:0;\n}\n.widgetHotelsForm .acessa_widget_block {\nfloat: left !important;\nmargin-right: 10px !important;\nposition: relative;\n}\n.widgetHotelsForm input[type=submit],\n.widgetHotelsForm button[type=submit]{\nbox-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);\ncolor: #333333;\ncursor: pointer;\ndisplay: inline-block;\nfont-size: 14px;\nline-height: 20px;\nmargin-bottom: 0;\nmargin-top: 20px;\npadding: 4px 12px;\ntext-align: center;\ntext-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);\nvertical-align: middle;\nmax-width: 180px;\nborder: 1px solid #fff;\n}\n.CloudBedsWidget .widgetHotelsForm input[type=submit],\n.CloudBedsWidget .widgetHotelsForm  button[type=submit] {\nborder-radius: 0 !important;\nbackground: #464646;\ntext-transform: uppercase;\nfont-family: Arial, Helvetica, sans-serif;\nfont-weight: 600;\ncolor: #fff;\npadding: 4px;\nmin-width: 100px;\nmargin-top: -5px;\ntext-shadow: none;\nwhite-space: normal;\ncursor: pointer;\n}\n.CloudBedsWidget .widgetHotelsForm input[type=submit]:hover,\n.CloudBedsWidget .widgetHotelsForm button[type=submit]:hover {\nbackground: #FFF;\ncolor: #464646;\n}\n.CloudBedsWidget .horizontal-widget input[type=submit]:hover,\n.CloudBedsWidget .horizontal-widget button[type=submit]:hover {\nbackground: #808080;\ncolor: #fff;\n}\n.CloudBedsWidget .horizontal-widget, .CloudBedsWidget .vertical-widget { font-family: Arial, Helvetica, sans-serif; }\n.widgetHotelsForm p{\nwidth:auto !important;\nmargin-left:auto !important;\nmargin-top:auto !important;\n}\n.widgetHotelsForm .acessa_widget_block p {\nfont-family: Arial, Helvetica, sans-serif;\nfont-size: 13px;\nline-height: 20px;\npadding: 0;\nmargin-bottom: 0;\n\/*font-stretch: semi-condensed;*\/\n}\n.widgetHotelsForm .horizontal-widget input[type=submit],\n.widgetHotelsForm .horizontal-widget button[type=submit]{\nmargin-top:18px;\ncolor: #ffffff;\n}\n.widgetHotelsForm .vertical-widget .acessa_widget_block {\nfloat: none !important;\nmargin-right: 0 !important;\nmargin-top: 10px;\n}\n.widgetHotelsForm .vertical-widget input[type=submit],\n.widgetHotelsForm .vertical-widget button[type=submit] {\nmargin-top: 9px;\n}\n.widgetHotelsForm .vertical-widget input[type=submit]:hover,\n.widgetHotelsForm .vertical-widget button[type=submit]:hover {\nbackground: #808080;\ncolor: #fff;\n}\n.widgetHotelsForm .vertical-widget .acessa_widget_block .widgetHotelsInputText{\nfloat: none;\n}\n.button{\nborder: none;\nheight: 28px;\nwidth: 96px;\ndisplay: inline-block;\ntext-align: center;\ntext-decoration: none;\ncolor: #ffffff;\nfont-size: 16px;\nfont-weight: bold;\nline-height: 26px;}\n.button.lang-pt-br{\n}\n.button.lang-en{\n}\n.button.lang-es{\n}\n.button:hover{\nbackground-position: center -28px ;\n}\n.button:active{\nbackground-position: center -56px ;\n}\n.largeButton{\nborder: none;\nheight: 38px;\nwidth: 206px;\ndisplay: inline-block;\ntext-align: center;\ntext-decoration: none;\ncolor: #ffffff;\nfont-size: 24px;\nfont-weight: bold;\nline-height: 36px;\n}\n.largeButton:hover{\nbackground-position: center -38px ;\n}\n.largeButton:active {\nbackground-position: center -76px;\n}\n\n\/* ###################################### FLOAT WIDGET ###################################### *\/\n.float_bg2{\nbackground: #464646;\nwidth: 100%;\nz-index: 50001;\nleft:0;\ntop:0;\ndisplay:block;\ncolor: #fff;\nfont-family: Arial, Helvetica, sans-serif;\nfont-size: 13px;\nfont-weight: 600;\nborder: none;\nborder-bottom: 2px solid #fff;\nbox-shadow: 0 3px 5px #808080;\n}\n.float{\npadding-top: 3px;\nmargin-left: auto;\nmargin-right: auto;\nwidth: 1060px;\n}\n\n.float_bg2 input[type=submit],\n.float_bg2 button[type=\"submit\"]{\nmargin: 0;\nborder: 1px solid #fff;\n}\n.float_bg2 .acessa_widget_block p{\nfloat: left;\nline-height: 24px;\npadding: 16px 4px 3px 0;\ncolor:#FFFFFF;\nfont-size: 14px;\ndisplay: inline-block;\n}\n.float_bg2 .acessa_float_left{\nfloat:left;\n}\n.float_bg2 .acessa_float_dates{\nwidth:500px;\n}\n.float_bg2 .acessa_float_dates .form_group,\n.float_bg2 .acessa_float_dates .input_group{\ndisplay: inline-block;\n}\n.CloudBedsWidget .float .form_group {\nmargin-right: 10px;\nmargin-bottom: 0;\nwidth: auto;\n}\n.CloudBedsWidget .float .form_group label {\ndisplay: inline-block;\nmargin-right: 10px;\npadding: 0;\nfont-family: Arial, Helvetica, sans-serif;\nfont-size: 13px;\nfont-weight: 400;\ntext-overflow: ellipsis;\nwhite-space: nowrap;\noverflow: hidden;\nline-height: 14px;\nvertical-align: text-bottom;\nmax-width: 80px !important;\n}\n.CloudBedsWidget .float_bg2 .acessa_float_description{\nmargin: 14px 4px 14px 4px;\nfont-size: 14px;\nwidth:432px;\nline-height:15px;\n}\n.CloudBedsWidget .float_bg2 input[type=\"text\"].date{\nwidth: 120px;\nheight: 32px;\nborder: none;\nmargin: 6px 0;\npadding: 0 0 0 10px;\ncolor: #464646;\nfont-size: 13px;\nfont-weight: 300;\nbox-sizing: border-box !important;\nborder-radius:2px;\ndisplay:inline-block;\n}\n.widgetHotelsForm .widget_text{\ntext-align: center;\nmargin: 30px 51px 0;\nfont-size: 19px;\ncolor: black;\n}\n.float_bg2 .acessa_float_dates {\nwidth: 620px;\ntext-align: right;\n}\n.widgetHotelsForm.v2 .acessa_widget_block {\nmargin-right: 13px !important;\ndisplay: inline-block;\n}\n.CloudBedsWidget .float .dates_group {\ndisplay: inline-block;\n}\n@media (min-width: 1060px) {\n.float{\nwidth: 1060px;\n}\n.float_bg2{\nposition: fixed;\nheight:50px;\n}\n.floatWrapper{\npadding-bottom: 51px\n}\n}\n@media (max-width: 1059px) {\n.float{\nwidth: auto;\n}\n.CloudBedsWidget .float_bg2{\nposition: fixed; \/* Make the div \"float\" over the site *\/\nheight: 87px;\n}\n.CloudBedsWidget .float .form_group label {\ndisplay: inline-block;\ntext-align: left;\n}\n.CloudBedsWidget .float_bg2 .acessa_float_dates  {\nwidth: 100%;\ntext-align: center;\nclear: both;\n}\n.CloudBedsWidget .float_bg2 .acessa_float_description {\nwidth: 100%;\ntext-align: center;\nmargin: 10px 0;\n}\n.floatWrapper{\npadding-bottom: 82px;\n}\n}\n@media (max-width: 549px) {\n.float{\nwidth: auto;\n}\n.CloudBedsWidget .float_bg2{\nposition: absolute !important;\nwidth: 100%;\nheight: 107px;\n}\n.CloudBedsWidget .float .dates_group {\nclear: both;\n}\n.CloudBedsWidget .float .dates_group .end_date {\nmargin-right: 0 !important;\n}\n.CloudBedsWidget .float .form_group label {\ndisplay: block;\ntext-align: left;\n}\n.CloudBedsWidget .widgetHotelsForm.float input[type=\"submit\"], .CloudBedsWidget .widgetHotelsForm.float button[type=\"submit\"] {\ndisplay: block;\nmargin: 0 auto 10px;\nwidth: 100%;\nmax-width: 252px !important;\n}\n.CloudBedsWidget .float_bg2 .acessa_float_description {\ndisplay: none;\n}\n.floatWrapper{\npadding-bottom: 106px;\n}\n}\n\/* #################################### OTHER ####################################*\/\n.modul_website_published.btn-group {\ndisplay: inline-block;\nfont-size: 0;\nposition: relative;\nvertical-align: middle;\nwhite-space: nowrap;\nz-index: 1;\n}\n.modul_website_published .btn-group {\ndisplay: inline-block;\nfont-size: 0;\nposition: relative;\nvertical-align: middle;\nwhite-space: nowrap;\nz-index: 1;\n}\n.modul_website_published .btn-group > .btn:first-child, .modul_website_published .btn-group > .btn.first-child {\nborder-bottom-left-radius: 4px;\nborder-top-left-radius: 4px;\ncolor: #757575;\nfont-size: 12px;\nmargin-left: 0;\n}\n.modul_website_published .btn-group div.smm {\npadding: 0;\nwidth: 46px;\n}\n.modul_website_published .social_fc > div.btn {\nborder-color: #222F65;\ncolor: #FFFFFF;\nfont-family: Arial,Helvetica,sans-serif;\nfont-size: 16px;\nfont-weight: bold;\nheight: 44px;\n}\n.modul_website_published .social_fc > div.bigger {\npadding: 0 20px;\n}\n.modul_website_published .social_tw > div.btn {\nborder-color: #4B81C5;\ncolor: #FFFFFF;\nfont-family: Arial,Helvetica,sans-serif;\nfont-size: 16px;\nfont-weight: bold;\nheight: 44px;\n}\n.modul_website_published .social_tw > div.bigger {\npadding: 0 30px;\n}\n.modul_website_published .btn-group > .btn, .modul_website_published .btn-group > .dropdown-menu {\nfont-size: 12px;\n}\n.modul_website_published .btn-group > .btn {\nborder-radius: 0 0 0 0;\nposition: relative;\n}\n.modul_website_published .btn {\n-moz-border-bottom-colors: none;\n-moz-border-left-colors: none;\n-moz-border-right-colors: none;\n-moz-border-top-colors: none;\nbackground-color: #F3F3F3;\nbackground-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6);\nbackground-repeat: repeat-x;\nborder-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #A2A2A2;\nborder-image: none;\nborder-radius: 4px 4px 4px 4px;\nborder-style: solid;\nborder-width: 1px;\nbox-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);\ncolor: #333333;\ncursor: pointer;\ndisplay: inline-block;\nfont-size: 14px;\nline-height: 20px;\nmargin: 0;\ntext-align: center;\ntext-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);\nvertical-align: middle;\n}\n.modul_website_published .btn-group > .btn:last-child, .modul_website_published .btn-group > .dropdown-toggle {\nborder-bottom-right-radius: 4px;\nborder-top-right-radius: 4px;\n}\n.modul_website_published .btn-group > .btn + .btn {\nmargin-left: -1px;\n}\ndiv.bigger span {\npadding-top:10px;\ndisplay:block;\n}\ndiv.smm img {\npadding-top: 10px;\n}\n.modul_website_published .buttons{\npadding-top:30px;\ntext-align: center;\n}\n.CloudBedsDatePicker table.ui-datepicker-calendar th, .CloudBedsDatePicker table.ui-datepicker-calendar td{\nwidth: auto;\n}\n\/* ************ Style for new datapicker ************** *\/\n.pika-lendar {\nwidth: 210px;\n}\n.CloudBedsDatePicker {\nz-index: 50002 !important;\n}\n.CloudBedsDatePicker.pika-single .is-today .pika-button {\ncolor: #7aad3a;\nfont-weight: bold;\n}\n.CloudBedsDatePicker.pika-single .is-today .pika-button:hover {\ncolor: #fff;\nfont-weight: bold;\n}\n.CloudBedsDatePicker.pika-single .is-selected .pika-button {\ncolor: #000;\nfont-weight: bold;\nbackground: #B1B1B1 none repeat scroll 0 0;\nbox-shadow: 0 1px 3px #ccc inset;\nborder-radius: 3px;\n}\n.CloudBedsDatePicker .pika-button:hover {\ncolor: #fff;\nbackground: #7aad3a;\nbox-shadow: none;\nborder-radius: 3px;\n}\n.CloudBedsDatePicker.pika-single {\nfont-family: \"Trebuchet MS\",Verdana,Arial,sans-serif !important;\n}\n.CloudBedsDatePicker.pika-single .pika-table button {\nbox-shadow: none !important;\nborder: none;\n}\n.CloudBedsDatePicker.pika-single .pika-table td {\nwidth: auto;\nborder: none !important;\npadding: 0 !important;\n}\n.CloudBedsDatePicker.pika-single .pika-table th {\nwidth: auto;\ncolor: #000 !important;\nborder: none !important;\npadding: 0 !important;\n}\n.CloudBedsDatePicker.pika-single table {\nleft: 0 !important;\nmargin-bottom: 0 !important;\n}\n.CloudBedsDatePicker .pika-button {\nborder-radius: 0;\nbox-shadow: none !important;\n}\n#start_date_mobile, #end_date_mobile{\nposition: absolute;\nopacity: 0;\nwidth: 100%;\nheight: 100%;\nz-index: 1000;\ntop: 0;\nleft: 0;\n}\n.CloudBedsWidget .vertical-widget {\nwidth: 100px;\n}\n.acessa_float_dates .input_group{\nposition: relative;\n}\n.date_mobile{\nfont-size:16px !important;\n}\n.widget_hide{\ndisplay: none !important;\n}");
                Load_css.Load('https://hotels.cloudbeds.com/plugins/pikaday/css/pikaday.css');
                Load_css.Load('https://hotels.cloudbeds.com/assets/themes/widget/css/style.css');
                if (method == 'write') {
                    document.write(data);
                    console.log(document.querySelectorAll(BClass).length);
                    if (document.querySelectorAll(BClass).length > 1){
                        baseClass = BClass + Math.floor((Math.random() * 10000) + 1);
                        document.querySelectorAll(BClass)[1].className = baseClass.replace(/\./g, " ");
                        baseClass += ' ';
                    }
                    momentLoad();
                    bind_actions_by_interval();
                } else {
                    window.onload = function() {
                        // For float widget only
                        var e = document.createElement('div');
                        e.innerHTML = data;
                        eval(method + '(e,  document.body.childNodes[0])');
                        momentLoad();
                        bind_actions_by_interval()
                    }
                }
            }
            function bind_actions_by_interval(){
                    var libswaiter = setInterval(function () {
                        if (typeof moment !== 'undefined' && typeof Pikaday !== 'undefined') {
                            uiStylization();
                            clearInterval(libswaiter);
                        }
                    }, 1000);
            }
            function momentLoad() {
                if (typeof moment == 'undefined'){
                    LoadScript('//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js', checkPikaday);
                } else {
                    checkPikaday();
                }
            }
            function checkPikaday() {
                var pikadayUrl = 'https://hotels.cloudbeds.com/plugins/pikaday/pikaday.min.js';
                if (typeof Pikaday == 'undefined') {
                    LoadScript(pikadayUrl);// uiStylization);
                } else {
                    //uiStylization();
                }
            }
            function LoadScript(url, callback) {
                if (loaded[url])
                    return;
                loaded[url] = true;
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.charset="UTF-8";
                script.onerror = function() {
                    window.console && window.console.warn("Cloudbeds Widget - Error: " + this.src);
                };
                if (script.readyState) {  //IE
                    script.onreadystatechange = function () {
                        if (script.readyState == "loaded" ||
                            script.readyState == "complete") {
                            script.onreadystatechange = null;
                            callback && callback();
                        }
                    };
                } else {  //Others
                    script.onload = function () {
                        if (! this.executed) {
                            this.executed = true;
                            callback && callback();
                        }
                    };
                }
                script.src = url;
                document.getElementsByTagName("head")[0].appendChild(script);
            }
            function uiStylization() {
                _bind_dates();
                _bind_submit();
            }
            function date_toIso(date){
                return formatDate(date, 'yy-mm-dd');
            }
            function date_fromIso(date){
                date = date.split('-');
                return new Date(date[0], date[1]-1, date[2]);
            }
            function formatDate(date, format)
            {
                var _date = new Date(date.getTime());
                var d = _date.getDate(),
                    m = _date.getMonth() + 1,
                    Y = _date.getFullYear();
                if (d < 10)
                    d = "0" + d;
                if (m < 10)
                    m = "0" + m;
                return format ? format.replace('yy', Y).replace('mm', m).replace('dd', d) : format;
            }
            function _bind_dates() {
                if (typeof Pikaday === 'function') {
                    var startDate = new Date('2016', '10', 30, 0, 0, 0, 0),
                        nextDay = new Date('2016', '10', 31, 0, 0, 0, 0),
                        maxDate = "+12M";
                    var dateFormat = "mm/dd/yyyy";
                    dateFormat = dateFormat.toUpperCase();
                    var startDateField = document.querySelectorAll(baseClass + '[name=widget_date]')[0],
                        endDateField = document.querySelectorAll(baseClass + '[name=widget_date_to]')[0],
                        endMobileDateField = document.querySelectorAll(baseClass+ '[name=end_date_mobile]')[0],
                        startMobileDateField = document.querySelectorAll(baseClass+ '[name=start_date_mobile]')[0];
                    var checkinPicker = new Pikaday({
                        field: startDateField,
                        format: dateFormat,
                        firstDay: 0,
                        isRTL: '',
                        i18n: {
                            previousMonth: '&#x3c;Prev',
                            nextMonth: 'Next&#x3e;',
                            months:  "January,February,March,April,May,June,July,August,September,October,November,December ".split(","),
                            monthsShort:  "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(","),
                            weekdays: "Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday".split(","),
                            weekdaysShort: "Sun,Mon,Tue,Wed,Thu,Fri,Sat".split(",")
                        },
                        setDefaultDate: true,
                        defaultDate: startDate,
                        minDate: startDate,
                        maxDate: maxDate,
                        onSelect: function () {
                            var date = this.getDate();
                            date.setTime(date.getTime() + (24 * 3600 * 1000));
                            checkoutPicker.setMinDate(date);
                            if (checkoutPicker.getDate() <= date) {
                                checkoutPicker.setDate(date);
                                if (document.querySelectorAll(baseClass + '[name=end_date_mobile]').length) {
                                    endMobileDateField.value = date_toIso(checkoutPicker.getDate());
                                }
                                setTimeout(function () {
                                    checkoutPicker.show();
                                }, 100);
                            }
                        },
                        onOpen: function () {
                            this.el.setAttribute('class', 'pika-single is-bound CloudBedsDatePicker');
                        }
                    });
                    var checkoutPicker = new Pikaday({
                        field: endDateField,
                        format: dateFormat,
                        firstDay: 0,
                        isRTL: '',
                        i18n: {
                            previousMonth: '&#x3c;Prev',
                            nextMonth: 'Next&#x3e;',
                            months:  "January,February,March,April,May,June,July,August,September,October,November,December ".split(","),
                            monthsShort:  "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(","),
                            weekdays: "Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday".split(","),
                            weekdaysShort: "Sun,Mon,Tue,Wed,Thu,Fri,Sat".split(",")
                        },
                        setDefaultDate: true,
                        defaultDate: nextDay,
                        minDate: nextDay,
                        maxDate: maxDate,
                        onOpen: function () {
                            this.el.setAttribute('class', 'pika-single is-bound CloudBedsDatePicker');
                        }
                    });
                    if (document.querySelectorAll(baseClass+ '[name=end_date_mobile]').length && document.querySelectorAll(baseClass+ '[name=start_date_mobile]').length) {
                        startMobileDateField.value = date_toIso(checkinPicker.getDate());
                        endMobileDateField.value = date_toIso(checkoutPicker.getDate());
                    }
                    startDateField.addEventListener("change", function(){
                        if (!this.value) {
                            checkinPicker.setDate(checkinPicker.getDate(), true);
                        }
                        if (document.querySelectorAll(baseClass+ '[name=end_date_mobile]').length) {
                            var date = checkinPicker.getDate();
                            date.setTime(date.getTime() + (24 * 3600 * 1000));
                            checkoutPicker.setMinDate(date);
                            if (checkoutPicker.getDate() <= date) {
                                checkoutPicker.setDate(date);
                                endMobileDateField.value = date_toIso(checkoutPicker.getDate());
                                setTimeout(function () {
                                    if (!document.querySelectorAll(baseClass+ '.is_mbv').length) {
                                        checkoutPicker.show();
                                    }
                                }, 100);
                            }
                        }
                    });
                    endDateField.addEventListener("change", function(){
                        if (!this.value) {
                            checkoutPicker.setDate(checkoutPicker.getDate(), true);
                        }
                        if (document.querySelectorAll(baseClass+ '[name=tart_date_mobile]').length) {
                            startMobileDateField.value = date_toIso(checkinPicker.getDate());
                        }
                    });
                    window.addEventListener('resize', function(){
                        if (checkinPicker.isVisible()) {
                            checkinPicker.adjustPosition();
                        }
                        if (checkoutPicker.isVisible()) {
                            checkoutPicker.adjustPosition();
                        }
                    }, true);
                    if (document.querySelectorAll(baseClass+ '[name=end_date_mobile]').length && document.querySelectorAll(baseClass+ '[name=start_date_mobile]').length) {
                        startMobileDateField.addEventListener("change", function () {
                            checkinPicker.setDate(date_fromIso(this.value), true);
                            this.value = date_toIso(checkinPicker.getDate());
                        });
                        endMobileDateField.addEventListener("change", function () {
                            checkoutPicker.setDate(date_fromIso(this.value), true);
                            this.value = date_toIso(checkoutPicker.getDate());
                        });
                    }
                }
            }
            function _bind_submit() {
                var form = document.querySelectorAll(baseClass+ '.widgetHotelsForm')[0];
                if (form) {
                    var _submit = document.querySelectorAll(baseClass+'[type="submit"]')[0];
                    window.console && window.console.debug('Cloudbeds Widget - Bind, ', ga_onde ? 'GA success' : 'GA failed');
                    function submitWidgetForm(event) {
                        event = event || window.event;
                        event.preventDefault ? event.preventDefault() : (event.returnValue = false);
                        window.console && window.console.log('Cloudbeds Widget - Started progress...');
                        if (ga_onde && ! __ofGa.q) {
                            __ofGa('ondeFicarTracker.set', 'dimension1', dimensionValue);
                            __ofGa('ondeFicarTracker.send', 'event', 'Reserva Widget', 'Buscar Click', 'vert', {
                                'hitCallback': function () {
                                    var e = document.createElement('div');
                                    e.innerHTML = '<input type="hidden" name="ga_sess_id" value="' + ga_sess + '" />';
                                    form.appendChild(e);
                                    window.console && window.console.log('Cloudbeds Widget - Buscar Click');
                                    form.submit();
                                }
                            });
                        } else {
                            window.console && window.console.log('Cloudbeds Widget - GA blocked - Submit');
                            form.submit();
                        }
                    }
                    if (_submit.removeEventListener) {
                        _submit.removeEventListener("click", submitWidgetForm, false);
                    } else if (_submit.attachEvent) {
                        _submit.detachEvent("onclick", submitWidgetForm);
                    } else {
                        _submit.onclick = null;
                    }
                    if (_submit.addEventListener) {  // For all major browsers, except IE 8 and earlier
                        _submit.addEventListener("click", submitWidgetForm, false);
                    } else if (_submit.attachEvent) {  // For IE 8 and earlier versions
                        _submit.attachEvent("onclick", submitWidgetForm);
                    } else {
                        _submit.onclick = submitWidgetForm;
                    }
                }
            }
            var ga_onde = 'UA-38521101-4';
            var dimensionValue = '419';
            if (ga_onde) {
                if (typeof __ofGa == 'undefined') {
                    if (window.GoogleAnalyticsObject) {
                        window.console && window.console.debug('Cloudbeds Widget - Detected prev GA script:', window.GoogleAnalyticsObject);
                        __ofGa = window[window.GoogleAnalyticsObject];
                    } else {
                        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                })(window,document,'script','//www.google-analytics.com/analytics.js','__ofGa');                    }
                    __ofGa('create', ga_onde, {'name': 'ondeFicarTracker', 'cookieDomain': 'none'});
                }
                var ga_sess = '';
                __ofGa(function () {
                    var ondeFicarTracker = __ofGa.getByName('ondeFicarTracker');
                    ga_sess = ondeFicarTracker.get('clientId');
                });
                __ofGa('ondeFicarTracker.set', 'dimension1', dimensionValue);
                __ofGa('ondeFicarTracker.send', 'event', 'Reserva Widget', 'Widget Load', 'vert', {
                    'nonInteraction': 1,
                    'hitCallback': function () {
                        window.console && window.console.debug('Cloudbeds Widget - Widget Load');
                    }
                });
            }
        };
    }
(new CloudBeds_widget()).init(data, 'write');
</script>

 

 

Mybookings Widget Code
 
 
If the Widget shows past dates you must edit the codes on website configurations like below:
 

Need to change Javascript code on the site
var startDate = new Date('2016', '10', 30, 0, 0, 0, 0),
nextDay = new Date('2016', '10', 31, 0, 0, 0, 0),
maxDate = "+12M";

replace with

var now = new Date,
startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0),
nextDay = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0, 0),
maxDate = new Date(now.getFullYear() + 2, now.getMonth(), now.getDate(), 0, 0, 0, 0);

 
 
 
 
 
Have more questions? Contact Support

Comments

Powered by Zendesk