Custom widget code to open mybookings in a new browser window

Follow

The widget code below will open the Booking Engine in a new browser window after clicking on the "Go" button. This widget can be customized (color & font) according to the properties color standards.

The widget is not designed in a way where you can add number of adults or guests to be added in it.

How to Install the widget code

For some website builders, including Wix, you will need to install a slightly different widget code for the widgets to work. This can be done with the help of your web developer.

Once the widget code has been added, make sure that the XXXX in the form action is replaced with your Booking Engine unique code which can be found in your myfrontdesk account as shown below:

  1. Under Booking Engine section, click on 'Mybookings'
  2. Here is your booking engine URL and the XXXX is your booking engine unique code
DEMO - Karina's Hostel - Manage - Mybookings - Google Chrome

On the example below, once the guest selects the check in and check out dates and clicks on 'Go', the mybookings page will open in a new tab/window.

Widget Code
<script>
var data = '<div class="CloudBedsWidget ver-">' +
    '<form action="https://hotels.cloudbeds.com/en/reservas/XXXX" 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 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);
                    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>
Have more questions? Contact Support

Comments

Powered by Zendesk