This article offers a general overview of the Immersive Experience for your booking engine, and how it can boost the website navigation experience for your potential guests.
Overview
The new Immersive Experience for the Cloudbeds Booking Engine revolutionizes the reservation process for guests visiting your property's website by offering an immersive platform.
The Immersive Experience allows users to:
- Have access to multiple booking engine functionalities by simply clicking on the Book Now button on your property website.
- Effortlessly browse through various accommodations, viewing detailed descriptions, amenities, pricing, and accommodation images.
- Easily add their preferred accommodation to their cart before proceeding to checkout.
- Add their reservation details and complete the booking process, directly from the property's website.
Important information
- Please note that the Booking Engine Immersive Experience has been specially designed for the Cloudbeds Booking Engine Plus version. It is not compatible with the classic version of the Cloudbeds Booking Engine.
- Some CMS (Content Management System) tools that sandbox custom scripts to iframe may not support the Cloudbeds Booking Engine Immersive Experience.
How it looks on your property website
The Booking Engine Immersive Experience enhances your property website by incorporating all the basic navigation features of your Cloudbeds Booking Engine.
This results in a seamless and hassle-free reservation process for your guests:
How to add the Immersive Experience to your Booking Engine
- The following instructions serve as supplemental information for those with an in-depth knowledge of HTML and web design as a whole.
- If you already have a website, contact your web designer or web developer to install our booking engine now.
- The Cloudbeds Support Team does not provide web development services or troubleshooting support. Learn more about HTML and CSS in general here:
- In the Booking Engine section, go to Website Widgets
- Select the Immersive widget
- Select and copy the code between the <script> and </script> tags in the Copy code section. Paste the code at the end of the body in your HTML
Important information
The script element should ideally be added at the end of the body, or at least after the last Book Now button.
- In the same Website Widgets tab, select the Immersive widget
- Copy the Button code from the Copy code section (same section as in the previous step 1)
Note: You can add as many “Book now” buttons as you like; they only require the data-be-url attribute with the correct URL to be recognized as a trigger to open the Booking Engine Immersive Experience.
Our Support Team provides basic assistance with the website code implementation. Kindly note that any additional website coding support is subject to additional pricing.
The default style of the button is with black background, white label, rounded corners and no outline, but since this button is a native HTML element, it can be styled as any other element in your web page, and it can be styled using CSS.
See examples below:
<button
class="my-css-class"
data-be-url="https://hotels.cloudbeds.com/reservation/code"
>
Book now
</button>
Or using inline styles as following:
<button
data-be-url="https://hotels.cloudbeds.com/reservation/code"
style="background-color: green;"
>
Book now
</button>Note: If global styles for button elements are defined in the website, these styles may conflict or override the default ones that we have defined.
Comments
May need to add to replace 'code' with your property ID
Hello, David Anttony!!
Thank you very much for your valuable feedback. That was a great catch! 😎
We have already updated the section according to your suggestions.
Kind regards!
Is it still possible to have a dedicated booking page on our site? or does it only work as a 'pop-up'?
Hello, Nicodemos Protopapas!
Thank you for asking this question!
Please contact our dedicated Support Team for this particular request, so they can take a closer look and provide assistance.
Regards!
Article is closed for comments.