This article offers a general overview of the 5 pre-built Cloudbeds Booking Engine website widgets and also explains how to install the best one on your existing website, according to your business needs.
Important: Adding widgets requires a minimum knowledge of HTML. Make sure to be careful when adding them.
Overview
A widget is a website element that can be added to your website and is displayed like search bar or search button, allowing potential guests to book an accommodation through the Cloudbeds Booking Engine, directly on your website.
Learn more about the different types of widgets within Cloudbeds PMS below.
Widget types in Cloudbeds PMS (preview)
Once added, the Overlay widget code will display a Book Now button on your website. When potential guests click on it, a large calendar will overlay the website, allowing them to select their desired dates:
Add Booking Engine website widgets
- In the Account menu, go to the Settings page and click on the Cloudbeds Booking Engine
- Click on Website Widgets
- 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
- Confirm if you would like to open the booking page in a new window
- Copy the entire code that shows in the section Copy the code below and paste it into your 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, 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 into your website, please, contact your website designer or website builder support.
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 booking engine widget.
- An advanced option for those familiar with development is to create their 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>
Comments
Can you add an option for number of guests so it then displays properties or rooms suitable for the number of guests
Hello, Louise Louise_lastname!
Thank you so much for your comment 💙
Please access our Cloudbeds Community - Booking Engine section, where you can select the preferred sub-topic to post your idea. The submitted ideas will be sent to the corresponding team for review.
Thanks again for your contribution!
Regards,
Please sign in to leave a comment.