Set up and customize Cloudbeds Booking Engine Immersive Experience 2.0

Introduction

Cloudbeds Booking Engine Immersive Experience 2.0 embeds the booking journey directly into your property website without using iframe-based masking. Your website must be authorized through Whitelisted domains, and the supported loader script must be installed in the website HTML before the web component can render.

Use this guide for the implementation itself and for technical considerations that can affect the booking flow, including Consent Management Platforms (CMPs), site builders, tracking, search parameters, and custom styling. For a general overview of the Booking Engine, see Cloudbeds Booking Engine: Everything you need to know.

Table of contents

• About Immersive Experience 2.0
• Install Immersive Experience 2.0
• Cookie consent and CMP setup
• Setup considerations and troubleshooting
• Search parameters and tracking
• Customize Immersive Experience 2.0

About Immersive Experience 2.0

Cloudbeds Booking Engine Immersive Experience 2.0 is a web-based component that lets guests search availability, select rooms and rates, enter guest details, and complete payment directly from your property website. It can be implemented as a full-page experience or opened from a Book Now button.

Key benefits

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 full-page embed keeps the guest on the property website while they search available accommodations, review rates, and build their reservation.

During checkout, guests enter their contact details, optional additional information, additional guests, and communication preferences without leaving the embedded booking flow.

Before completing the booking, guests can review the property's check-in, check-out, cancellation, and other terms and conditions.

• 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.

In the pop-up implementation, the guest opens the Immersive Experience from the property's Book Now button while the original website remains visible behind the booking panel.

The booking flow includes:

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

Pricing and availability

Access to Immersive Experience 2.0 depends on your Cloudbeds subscription. If Premium Embeds are included in your package, you can access Immersive Experience 2.0 from the Premium section of the Embeds tab.

If Premium Embeds are not included in your package, the Premium section may display a Contact sales option. Click Contact sales to request more information about upgrading to a package that includes Premium Embeds.

Custom payment methods and gateway support

• Gateway support recommendations: We do not recommend using unsupported payment gateways in the Immersive Experience. Once gateways are no longer on a Cloudbeds domain, we have no control over security or PCI compliance.
• Current limitations: Custom payment methods should only be used on hosted environments at this time.
• Future support: Cloudbeds Payments team is working on providing official support for these gateways through custom connections within the PMS UI (User Interface). This feature is scheduled for release in 2026. Customers can expect more specific details on timing as we get closer to the delivery date.
• Support path: For implementation-specific guidance or questions regarding custom payment methods, please contact our Cloudbeds Payments team directly. They manage the entire payments SDK and are best positioned to assist you.

Install Immersive Experience 2.0

Complete the setup below to authorize your website domain, load the supported Immersive Experience script, and add the Booking Engine component to your website. The steps apply to both the full-page and Book Now button implementations.

Step 1: Confirm Premium Embeds access

Step 2: Add your domain to Whitelisted domains

Add the domain where you will install the Immersive Experience 2.0 in the Whitelisted domains section of the selected Premium Embed. You may add up to 5 domains.

1. From your Account Menu , select Settings
2. Click Booking Engine
3. Click the Embeds tab.
4. In the Premium section, select the Immersive Experience option you want to install.
5. In the Whitelisted domains card, click Add domain.
6. Enter the domain where the Immersive Experience will be installed, and save your changes.

Step 3: Add the Immersive Experience script

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

<script
  data-entry="immersive"
  src="https://static1.cloudbeds.com/booking-engine/latest/loader.js"
  nonce="+imGC13HmyB6zTZ1eTnZMw=="
  integrity="sha384-hd98w88pqnDT+lRLwyII/mRmbacols+VWYZF3HKdxnIlTYO+cF38GA1/I/+V8U4a"
  crossorigin="anonymous"
  type="text/plain"
  data-categories="essential"
></script>

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}" />

Cookie consent and CMP setup

If your website uses a Consent Management Platform (CMP), configure the Immersive Experience so required Cloudbeds resources are treated as essential and are not blocked before the booking flow can load. Follow the provider-specific setup below before publishing the website changes.

Use the provider-specific setting that applies to your CMP:

• Cookiebot: data-cookieconsent="ignore"
• OneTrust: data-ignore-consent="true"
• Quantcast: data-quantcast-ignore="true"
• Termly: Add the custom blocking map below before the Termly script, preferably near the beginning of the HTML.

<script data-termly-config>
 window.TERMLY_CUSTOM_BLOCKING_MAP = {
  "cloudbeds.com": "essential",
  "clientstream.launchdarkly.com": "essential",
  "clientsdk.launchdarkly.com": "essential",
  "tile.openstreetmap.org": "essential",
  "tokenex.com": "essential",
  "stripe.com": "essential",
  "stripe.network": "essential",
  "braintreegateway.com": "essential",
  "dlocal.com": "essential",
  "authorize.net": "essential",
  "pagosonline.net": "essential",
  "paypal.com": "essential",
  "adyen.com": "essential"
 };
</script>

Classify the Immersive Experience loader as necessary or essential in your CMP configuration. Use the current loader entry point below. Direct use of cb-immersive-experience.js is deprecated.

<script
  data-entry="immersive"
  src="https://static1.cloudbeds.com/booking-engine/latest/loader.js"
  nonce="+imGC13HmyB6zTZ1eTnZMw=="
  integrity="sha384-hd98w88pqnDT+lRLwyII/mRmbacols+VWYZF3HKdxnIlTYO+cF38GA1/I/+V8U4a"
  crossorigin="anonymous"
  type="text/plain"
  data-categories="essential"
></script>

Setup considerations and troubleshooting

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

<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>

Search parameters and tracking

Immersive Experience can read supported search parameters when the application first loads and can work with website-based analytics and advertising tools. Use the reference sections below when you need to pass search values, configure tracking, or understand Google Hotel Ads parameters.

Customize Immersive Experience 2.0

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

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

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

Next Operational Step

After installing and testing Immersive Experience 2.0 on your authorized domain, review the Cloudbeds Booking Engine Embeds tab guide when you need to compare or configure other embed options.