This article offers a general overview of the 7 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)
Stacked
Check-in and check-out dates appear in a stacked box with little extra information.
Horizontal
Check-in and check-out dates appear in a horizontal box with little extra information.
Floating
Check-in and check-out dates are displayed in a dark banner, along with a brief message encouraging your customers to book.
Large Button
This embeds a button only with no date picker that redirects the guest to your Booking Engine.
Small Button
This embeds a button only with no date picker that redirects the guest to your Booking Engine.
Overlay
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 without being redirected away from your website.
Immersive
The Immersive widget enhances your property website by incorporating essential navigation features of your Cloudbeds Booking Engine.
When guests click the "Book Now" button on your property website (as shown in step 1 of the image below), a modal window will appear on their screen, allowing them access to various booking options (steps 2, 3, and 4).
Guests can view details, pricing, and photos of available accommodations. They can add their preferred choice to the cart and complete the booking directly on the site.
Add Booking Engine website widgets
Step 1 - Access Website Widgets and confirm settings
- From your Account menu
, go to Settings
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 7 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
Step 2 - Copy code and preview widget
- 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.
Advanced Option: Create your own custom Cloudbeds Booking Engine widget
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.
- Important: The following code is not compatible with the Cloudbeds Booking Engine Plus version.
- 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="PASTE_YOUR_BOOKING_ENGINE_URL_HERE"
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="PASTE_YOUR_BOOKING_ENGINE_URL_HERE"
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="PASTE_YOUR_BOOKING_ENGINE_URL_HERE"
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>Important: Immersive Experience 2.0 is not supported in iframes
Do not use Immersive Experience 2.0 web component tags inside iframes. This setup can cause scrolling issues and would require whitelisting every item in the iframe chain — a configuration that is not recommended.
⚙️ Transition Now to the Cloudbeds Booking Engine Plus Immersive Experience 2.0
The old booking engine iframe will soon be discontinued. To ensure your property continues to receive bookings seamlessly, transition to the Immersive Experience 2.0 before the end of the year. The upgraded Cloudbeds Booking Engine Plus offers faster performance, a modern design, and improved conversion rates.
Learn more and make the switch today: Cloudbeds Booking Engine – Immersive Experience 2.0: Everything You Need to Know.
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 Morgan!
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,
Is it possible to centre the horizontal widget? I have tired applying CSS to it, but it seems to be ignored by the script. It looks terrible with the default left alignment.
Hi, Edward Parker!
Your request has been successfully escalated to our dedicated Booking Engine team for review.
Kind regards!
Please confirm is the "Advanced Option: Create your own custom Cloudbeds Booking Engine widget" available for "Booking Engine Plus"?
I want to have my own date pickers on my website. The widget version date pickers are not customizable at all.
When I switch to "Booking Engine Plus" the date pickers I have that used to work on the old version are not able to pass data to the booking form at Cloudbeds.
Hello, Kevin Javitz,
Thank you for sharing your question and comment on this thread.
Yes, this option is available for the Booking Engine Plus. For further assistance and follow-up, please contact our Support Team.
Regards,
Article is closed for comments.