The widget code below will open the Booking Engine in a new browser window after clicking the «Go» button. This widget can be customized (color & font) according to the property's color standards.
The widget is not designed in a way where you can add a specific number of adults or guests to a reservation.
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. Your web developer can help you do this.
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 Cloudbeds PMS account as shown below:
- Go to your Account
and click on Settings
- Go to the Booking Engine section
- On the Summary tab, you will see your booking engine URL, and the XXXX is your booking engine's unique code
In the example below, once the guest selects the check-in and check-out dates and clicks on 'Go,' the Booking Engine page will open in a new tab/window.
Widget code
This code is given for reference and may not work for all websites. It might need to be customized according to your website's code. Please consult with your web developer for any additional assistance.
This is the 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: '<Prev',
nextMonth: 'Next>',
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: '<Prev',
nextMonth: 'Next>',
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>Check out these articles to learn more about Widgets:
Did you know that Cloudbeds Booking Engine has been reimagined to a new upgraded version called the Cloudbeds Booking Engine Plus? We now offer customization services for this new version. Please take a look at this article to learn more.
Comments
Please sign in to leave a comment.