Widget is website element which can be added to your website and is displayed like search bar or search button. This article will discuss 5 pre-built widgets that mybookings has and which you can install on your existing website. These do require a minimum knowledge of HTML, so make sure to be careful when adding them.
Getting Started
- To navigate to your widgets, click on "Website Widget"
- Choose the preferred widget language (English, Portuguese or Spanish)
- If you would like the widget to try to detect what language your guest has been using within their browser, set this option to 'Detect by Browser'. Should the widget not be able to detect a supported language, it will load in the default property language
- Select from one of the 5 pre-made widgets to see a visual representation of what each option looks like. Selecting specific widget type will provide you its unique code
- Copy the entire code that shows in the section 'Grab code and paste into you website'
- Go to your website (Website Builder Tool/Page)
- Depending on which widget you select, you should paste the widget code into a div/div element
- If you've selected the floating widget, you can paste the code just before the closing body tag of your website
Cloudbeds team can't perform this action for you as we have no access to your website. If you need to paste widget code to your website, please, contact your website designer or website builder support.
Currently we provide codes for 5 mybookings widgets:
Stacked
Horizontal
Floating
Large Button
Small Button
Please note that Cloudbeds team does not provide support in building custom widgets. We recommend you to reach out to your website developer/designer to assist with building custom mybookings widget.
An advanced option for those familiar with development is to create your own widget. The difference between the examples below is the date format.
These forms would replace the pre-built widgets, but might complement other methods depending on how you design it. We recommend that you always have a link somewhere on your website that says "Reserve" or "Reservations".
For international date formats:
form method="post" action="https://hotels.cloudbeds.com/reservas/dEF4YR"
input type="hidden" name="date_format" value="d/m/Y"
input type="text" name="widget_date" value="24/08/2015" /
input type="text" name="widget_date_to" value="25/08/2015" /
/formFor USA Date formats:
form method="post" action="https://hotels.cloudbeds.com/reservas/dEF4YR"
input type="hidden" name="date_format" value="m/d/Y"
input type="text" name="widget_date" value="08/24/2015" /
input type="text" name="widget_date_to" value="08/25/2015" /
/formFor ISO Date formats:
form method="post" action="https://hotels.cloudbeds.com/reservas/dEF4YR"
input type="hidden" name="date_format" value="Y-m-d"
input type="text" name="widget_date" value="08/24/2015" /
input type="text" name="widget_date_to" value="08/25/2015" /
/formThe code below should be saved in the property website wherever the styling of the website is saved. If the widget is pasted in an iframe, the following styling should be saved right after the widget script:
<style>
.widgetHotelsForm .horizontal-widget a {
background: #007d8a!important;
border-color: #007d8a!important;
top: 5px;
}
.CloudBedsDatePicker.pika-single .is-selected .pika-button {
background: #007D8A !important;
}
.CloudBedsDatePicker.pika-single .is-today .pika-button:hover {
background: #007D8A !important;
font-weight: bold;
}
.CloudBedsDatePicker .pika-button:hover {
background: #888;
}
</style>
