This article provides an overview of the legacy Website Widgets tab in Cloudbeds Booking Engine and explains how to use its pre-built widget options on your existing website.
Important: Adding legacy widgets requires a minimum knowledge of HTML. Make sure to be careful when adding them.
Overview
The Website Widgets tab is the legacy version of the Booking Engine embed options page in Cloudbeds PMS.
It includes pre-built widget types that can be added to your website to help guests start the booking process through the Cloudbeds Booking Engine.
Properties enabled for Immersive Experience 2.0 may see the newer Embeds tab instead of the legacy Website Widgets tab.
Looking for the new Embeds experience? See Cloudbeds Booking Engine – Embeds Tab.
Website Widgets tab vs Embeds tab
If your property has Immersive Experience 2.0 enabled, the legacy Website Widgets tab may be replaced by the newer Embeds tab.
The legacy Website Widgets tab includes the classic widget setup page, where you can choose a widget type, preview it, and copy the code for your website.
The newer Embeds tab is the updated page for properties using Immersive Experience 2.0. It separates Premium and Basic options and includes direct links to installation guides for newer embed solutions.
If your property already uses a live widget on your website, that implementation is not removed automatically. This change mainly affects how widget and embed options are displayed in Cloudbeds PMS.
What is a widget?
A widget is a website element that can be added to your website and displayed as a search bar or booking button, allowing potential guests to start the booking process through the Cloudbeds Booking Engine directly from your website.
Learn more about the different legacy widget types available in Cloudbeds PMS below.
Legacy widget types in Cloudbeds PMS
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 legacy widget adds a button only, with no date picker, and redirects the guest to your Booking Engine.
Small Button
This legacy widget adds a button only, with no date picker, and redirects the guest to your Booking Engine.
Overlay
Once added, the Overlay widget code displays a Book Now button on your website. When potential guests click it, a large calendar overlays the website so they can select their desired dates without being redirected away from your website.
Immersive
The Immersive widget is a legacy widget option that 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, a modal window appears on their screen, allowing them access to booking options directly on the site.
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.
If your property now shows the Embeds tab instead of the legacy Website Widgets tab, see Cloudbeds Booking Engine – Embeds Tab.
How to add legacy Booking Engine widgets
Step 1 - Access the legacy Website Widgets tab 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 detect the language used in your guest's browser, set this option to Detect by Browser. If the widget cannot detect a supported language, it will load in the default property language.
- Select one of the pre-built legacy widgets to see a visual preview of what each option looks like. Selecting a specific widget type provides its unique code.
- Confirm if you would like to open the booking page in a new window
If your property no longer shows the legacy Website Widgets tab, go to the Embeds tab article for the updated experience.
Step 2 - Copy the code and preview the widget
- Copy the entire code shown 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, paste the widget code into a div/div element. If you selected the Floating widget, paste the code just before the closing body tag of your website.
Cloudbeds team cannot perform this action for you because we do not have access to your website. If you need help pasting widget code into your website, contact your website designer or website builder support.
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.
For the newer experience with Premium and Basic embed options, see Cloudbeds Booking Engine – Embeds Tab.
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.