Cloudbeds Booking Engine Immersive Experience 2.0 - Everything you need to know

Samuel

Updated December 30, 2025 14:22

Overview

The Cloudbeds Booking Engine Immersive Experience 2.0 is a modern, fully web-based booking solution that offers a seamless, guest-friendly booking experience directly on your property’s website. It facilitates secure, PCI-compliant payments and incorporates Google compatibility data tracking for insights from page view to purchase.

As a web-based component, the Immersive Experience 2.0 eliminates the need for whitelisting or complex masking processes. Instead, it simplifies integration through a straightforward embed that integrates seamlessly into your property’s website—maintaining both design consistency and ease of implementation.

An enhanced booking experience

The Immersive Experience 2.0 introduces unique features designed to elevate your guests' booking experience on your own website:

Higher conversion rates: Fewer clicks, faster load times, and a cohesive brand experience drive more bookings.
More customization: Build a unique and memorable guest experience without the constraints of a standard iframe.
Data-driven growth: Access key metrics and insights to optimize your booking process and boost direct bookings.
Increased trust: The secure, seamless booking flow builds guest confidence, encouraging them to complete the reservation process.

Web-based vs. iframe-based components

In contrast to iframe-based systems, this integrated web-based component offers:

Faster website load times
Enhanced brand customization
A unified booking flow that ensures guests remain on-site from their initial search to payment completion

How it looks

The Immersive Experience 2.0 offers two flexible embed options to suit your property’s website design and user flow. You can choose to embed a full-page Immersive Experience or build and embed a pop-up Immersive Experience.

The full-page embed functions exactly as it sounds — it places the complete booking engine directly within a page on your website, providing guests with an uninterrupted, fully immersive booking journey from start to finish.

The pop-up embed option provides a sleek and modern alternative. When a guest clicks the “Book Now” button, a side panel smoothly slides in from the edge of the screen, offering a compact yet fully functional booking experience without navigating away from the current page.

The booking flow includes:

Availability Search
Room selection
Rate display
Upsell opportunities
Guest information entry
Secure payment processing

Pricing and availability

Cloudbeds Booking Engine Plus is included with all Cloudbeds subscriptions at no additional cost for properties that are included in our first phase rollout. Immersive Experience 2.0 uses the same booking flow but provides an enhanced way to embed it directly on your website.

Whether Immersive Experience 2.0 carries an additional fee depends on your subscription and the current migration program:

During the transition away from legacy iframes and Immersive 1.0, many properties may have Immersive Experience 2.0 enabled at no extra charge as part of the upgrade.
Outside of these programs, Immersive Experience 2.0 may be offered as a billable add-on, applied to the property’s regular Cloudbeds invoice.

Cloudbeds will provide clear, advanced communication about any future pricing updates before changes take effect.

Note: Any value shown as {PARAMETER} in this article is a placeholder. Replace it with your actual value and remove the curly braces ({ }).

Important:

The Immersive Experience has been tested with custom-built websites. Template-based or no-code websites created using site builder platforms may handle custom scripts differently, which could impact functionality.
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.
A list of best practices when a user uses a CMP:
- Add the Immersive Experience at the very beginning of the head before the CMP tag, and include the attribute that prevents it from being blocked. It's better not to specify all in the documentation, but they could be different depending on the platform
  - Cookiebot: data-cookieconsent="ignore"
  - OneTrust: data-ignore-consent="true"
  - Quantcast: data-quantcast-ignore="true"
- Classify the below script as Necessary on the CMP admin panel; again, it could be different on each platform:
```
<script src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" type="text/javascript"></script>
```

How to install the Immersive Experience 2.0

To enable the Immersive Experience 2.0 on your property’s website, please follow the steps below.

Step 1 – Activate Allowed Domains

To start the Immersive Experience 2.0 installation and maximize your booking experience, go to Allowed Domains in your Website Widget settings. If the option is not available, contact our Support Team to get it activated.
If you are a Cloudbeds Websites customer, you can reach out to the Cloudbeds Websites team for guidance on implementation and activation requests.

Step 2 – Whitelist your domain

Once our Support team enables the proper configurations, you’ll see the Allowed Domains section in your PMS.

From your Account Menu , select Settings
Click Booking Engine
Go to Website Widgets and in the Allowed domains section, add the domain(s) where you will install the Immersive Experience. You may add up to 5 domains.

Both primary domains and subdomains are supported (e.g.,my-hotel.com and booking.my-hotel.com).

Allowed Domains Whitelist: How to Check the Correct Domain Format

Sometimes, a website's domain can be set up in a way that requires the www to be included. To cover both possibilities, we recommend trying a simple test.

Check your URL bar: Open your website and look at the URL in your browser.
Does it include www? For example, does it show https://www.yourdomain.com or just https://yourdomain.com?

Once you know which format your site uses, you can enter the correct domain into the Cloudbeds whitelist field. For example, if your site displays with the www, then you should whitelist your domain as www.yourdomain.com.

Why domains must be whitelisted

The Immersive Experience is a web component (not an iframe). It runs on your site and makes API requests to Cloudbeds services from your domain. Whitelisting tells Cloudbeds which origins are authorized so those cross-domain requests are accepted.

Step 3 – Add the Immersive Experience script

Add the following script in the <head> element on the HTML document from your website:

<script 
  type="text/javascript"
  data-cookieconsent="ignore"
  src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" 
>
</script>

Note: The data-cookieconsent varies and will only be required if you use a CMP (cookie compliance integration) on your website. If you use a CMP you will need to verify the attribute (i.e. "data-cookieconsent=ignore) is adjusted to meet the attribute settings for your specific CMP.

Step 4 – Embed the Booking Engine

You can render the Immersive Experience in two ways:

Standard Mode (Full page embed): Also known as the “full-page embed,” this is the default mode where the Booking Engine app is fully integrated into the host website. To embed it, include the following snippet in the HTML where it should be rendered:

<cb-immersive-experience mode="standard" property-code="{PROPERTY_CODE}" />

Popup Mode (Book Now button): This mode renders the Booking Engine app as a popup with a fixed position and overlay. To add a Book Now button that opens the Immersive Experience in a popup:

<cb-book-now-button property-code="{PROPERTY_CODE}" />

If you omit the mode attribute, the component defaults to standard.

Find your Property Code

Go to Account Menu > Settings > Booking Engine > Summary tab. Your code is the 6-character alphanumeric value at the end of your Booking Engine link:

https://hotels.cloudbeds.com/reservation/{PROPERTY_CODE}

In the example below, the highlighted segment is the Property Code you should use in your embed (replace the braces and value in your snippet).

Setup Considerations & Behavior

The sections below highlight behavior and implementation details that are helpful to know before going live.

Compatibility with site builders

The Immersive Experience has been tested with custom-built websites. Template/no-code site builders may handle custom scripts differently, which could impact functionality.

✔️ Head injection: Confirm you can add the Immersive Experience <script> in the page <head>.

✔️ Whitelisting: Make sure your live (and any staging/preview) domains are added under Allowed Domains so API requests are accepted (up to 5 domains).

✔️ Custom CSS/JS: Styles or scripts added in the Booking Engine customization section do not apply automatically to the Immersive Experience; add them to your site's HTML instead.

✔️ Payment Page: The payment step may vary depending on the payment method selected.

⮕ If the guest chooses Apple Pay, Google Pay, or another third-party payment option, they will be redirected to the respective third-party page to complete the payment.

⮕ Once the transaction is successful, they will be redirected back to the Immersive Experience confirmation page.

✔️ Deep links/params: Search parameters are read only on initial load. If you change the URL after the app has loaded, reload the page to apply them.

Portals

The Booking Engine renders several elements in a fixed position on the screen, for example:

Modals
Tooltips
Calendar
Rate checker
Shopping cart banner (on mobile)
Language and currency selectors

These elements are rendered inside a Portal, which means that instead of following the structure of the DOM tree, they are wrapped by an element with the .cb-portal static class and appended at the end of the body. The portals have different z-index values according to the corresponding layer in our stacking context.

Most websites have stacking contexts themselves, and depending on how they are defined on the imaginary z-axis, they may or may not conflict with the Immersive Experience stacking contexts.

For example, if they are not properly defined, the Immersive Experience’s Rate Checker could be displayed on top of the mobile navigation menu that belongs to the property’s website, or a floating element on the property’s website can be showing on top of the “Book Now” button in the Shopping Cart banner on mobile, blocking it and therefore preventing the user from continuing with the reservation process.

At the moment, we have 4 types of portals: modal, popover, sticky, and tooltip. The type of portal used in each case depends on the type of element that the portal is for. Therefore, all modals will use a modal portal, the Calendar popover and Language and Currency selectors use a popover portal, whereas the Shopping Cart Banner on mobile and the Rate Checker use a sticky portal, to give some examples.

Depending on the type of portal, these are the values that the Immersive Experience uses for the z-index CSS property:

Modal:1400
Popover:1500
Sticky:1100
Tooltip:1800

Troubleshooting overlapping issues

When facing issues with elements rendered by the Immersive Experience that are overlapping other elements from the parent website, we recommend to look for the Portal (element with .cb-portal static class) that contains it and adjust the z-index value accordingly, or to adjust the z-index value of the element from the parent website.

The z-index values for the different types of portals rendered by the Immersive Experience will be customizable by just redefining the CSS variables that are used for this purpose, as shown in the example below:

<style>
/* Scope to the Booking Engine root when overriding */
.cb-bookingengine-root {
  --booking-engine-zIndices-sticky: 1100;
  --booking-engine-zIndices-modal: 1400;
  --booking-engine-zIndices-popover: 1500;
  --booking-engine-zIndices-tooltip: 1800;
}
</style>

The Rate Checker is included with all Cloudbeds Booking Engine packages except Legacy plans. Properties on active packages can enable it at no additional cost.

Search Parameters

The Immersive Experience supports the same search parameters as the hosted version. Parameters are read only at initial load and do not update dynamically.

Name	Type	Description	Example
adults	Number	The amount of adults for the reservation, used when searching available accommodations.	adults=2
allotment_block_code	String	The allotment block code to use when fetching accommodations for selected dates.	allotment_block_code=b123456
checkin	YYYY-MM-DD	The selected date for check-in.	checkin=2025-12-01
checkout	YYYY-MM-DD	The selected date for check-out. If checkin is provided but checkout is not, it defaults to the next day.	checkout=2025-12-01
currency	3-letter ISO-4217 currency code	Selected currency. If none is provided, the Booking Engine uses the property’s default.	currency=brl
kids	Number	The amount of kids for the reservation, used when searching available accommodations.	kids=1
promo	String	Promo code to use when fetching accommodations for selected dates.	promo=superpromo
rate_plan	Semicolon-separated string	To filter accommodation results based on the rate plans, corresponds to the “Private Rate Plan Name” on the PMS.	rate_plan=3DAYSTAY;LOWSEASON
rid	Semicolon-separated numeric string	List of Room IDs to filter accommodation results.	rid=27434;23421
room_type	Semicolon-separated 3-letter string	Corresponds to the “Accommodation Abbreviation” in the PMS and it's used to filter the accommodation results. If no check-in and checkout are provided, the Booking Engine selects tomorrow and the following day automatically.	room_type=PRI;SHA
utm_source	String	Used to know the source of the marketing campaign (eg: Google, TripAdvisor, Trivago)	utm_source=Google

Tracking & Analytics

The Immersive Experience supports the same search parameters that the hosted version does. The parameters are read from the window location only at the initial load of the application, which means that dynamic changes in the search parameters won’t make any impact in the Immersive Experience once it’s loaded.

Also, the Immersive Experience doesn’t update the window URL as the hosted version does after certain user actions (for example, selecting checkin and checkout dates).

Google Analytics 4 / GTM: The Google Tag ID or GTM Container ID must be initialized on the hotel’s website.
Google Ads: Conversion tracking requires manual setup on the property’s website.
Meta Pixel: The Meta Pixel script must be added in the HTML <head> for initialization.

For additional configuration details, refer to each tracking platform’s documentation.

Add Google Tag Manager (GTM) or Google Analytics 4 (GA4) scripts manually to the <head> of your HTML to enable tracking.

Google Hotel Ads search parameters

These parameters are appended by Google Hotel Ads and the Booking Engine sends them to the server in the request when making a reservation:

Parameter

gha_advance_booking_window

gha_campaign_id

gha_google_site

gha_is_ad_click

gha_is_click_type_hotel

gha_is_click_type_room

gha_is_hotel_campaign

gha_is_promoted

gha_length

gha_payment_id

gha_price_displayed_total

gha_promo_code

gha_user_country

gha_user_currency

gha_user_device

gha_user_language

gha_user_list_id

Customization: Attributes, URL Parameters, and Styling

Tailor the Immersive Experience using component attributes, plus your own CSS/JS on your website.

Custom codes may require maintenance over time

As the Booking Engine evolves, self-applied customizations can stop working or need updates.
Whenever possible, test changes on a staging or draft copy of your site before going live.

Component attributes for cb-immersive-experience & cb-book-now-button

These attributes are shared by both Standard and Popup modes (see Embed the Booking Engine).

The following attributes are all optional (except for the property-code) and both the cb-immersive-experience and cb-book-now-button web components support them.

Name	Type	Required	Default value	Description
*currency ()**	3-letter ISO-4217 currency code	No	Property’s default currency	The currency to be used for the initial load of the Immersive Experience.
disable-css-title-reset	yes \| no	No	no	yes should be used if the property wants to define their own CSS rulesets for headings in the UI (h1… h6).
hide-custom-header	yes \| no	No	no	To hide the custom header defined on the PMS.
hide-custom-footer	yes \| no	No	no	To hide the custom footer defined on the PMS.
hide-property-info	yes \| no	No	no	To hide the Property Info section in all pages.
*ignore-search-params ()**	yes \| no	No	no	The Immersive Experience by default reads the query parameters in the URL of the host website and uses them in the initial load of the application. It supports the same parameters that the hosted Booking Engine does.
*lang ()**	auto-detect \| 2-letter ISO 639-1 language code	No	Property’s default language.	The language to be used in the initial load of the Immersive Experience, if none is provided, the Immersive Experience will check the lang attribute of the HTML, if it’s not defined either, the property’s default language will be used. If auto-detect value is provided, the Immersive Experience will be loaded in the user’s browser language.
mode	standard \| popup	No	standard	The mode in which the Immersive Experience should be rendered. A popup should be used when the Immersive Experience is rendered inside a container with a fixed height or maximum height.
*property-code ()**	6-digit alphanumeric code the identifies your property.	Yes	—	The 6-digit alphanumeric code that represents the property. It is the same code of the Booking Engine url: https://hotels.cloudbeds.com/reservation/{PROPERTY_CODE}.

Attributes marked for the initial load are only read once when the app starts. Changing them later on your property won’t affect an already-loaded Immersive Experience.

Book Now button custom attributes

These options apply to the cb-book-now-button component (see the Embed the Booking Engine section) and let you style the button and control the popup’s label and dimensions.

Attribute	Description
class-name	CSS class for styling the button.
close-label	Custom label for the close button.
height	Height of the popup.
width	Width of the popup.

Example of the Book Now button with label, size, and CSS class:

<cb-book-now-button
  property-code="{PROPERTY_CODE}"
  class-name="cb-book-now-button"
  label="Book Now"
  height="90vh"
  width="90vw"
/>

Add custom CSS & JavaScript for Immersive Experience

Custom CSS or JavaScript added in the Booking Engine’s customization fields does not automatically apply to the Immersive Experience. These must be manually added to the HTML document.

Add the data-cb-immersive-experience-root attribute to style and script tags to avoid conflicts.

Example of custom CSS:

<style data-cb-immersive-experience-root>
  :is(#cb-bookingengine, .cb-bookingengine-root) {
    h1 {
      font-family: serif;
      font-size: 24px;
    }
  }
</style>