Multi-property Calendar - Date Picker Embed

Gabriela Garcia

Updated March 02, 2026 14:46

The <cb-multi-property-date-picker> is a web component for multiple properties within an organization. You pass a required sub-domain attribute. It shows a property selector dropdown, date picker fields, and a search button. The guest picks a property, selects check-in and check-out dates, then clicks search and is redirected to the Booking Engine (or your custom URL) for that property.

Overview

Multi-property mode is for integrations that display multiple properties within a single organization (e.g., a brand or group). It works well on:

Organization or brand homepages
“Choose a property” + date search sections
Landing pages that list several properties and send guests into the booking flow for the one they choose
Any page where the guest must first pick a property, then pick dates

The component loads the list of properties for the organization, shows a searchable dropdown, and after the guest selects a property and dates, redirects them to the Immersive Experience Booking Engine (or a custom URL) for that property.

Step 1: Add the Cloudbeds Script

Add the following script inside the <head> of your website:

Note: All script tags in step one are the same for Immersive Experience 2.0 and all of the widgets. If you have already installed this for a previous embed, you do not need to do it again. It only needs to be installed one time in the (global) <head> of the website.

Load the script in the <head> or before the component in the <body> so it runs before the component tag is parsed.

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

Step 2: Add the Calendar Date Picker Script

For the multi-property mode, you must pass the organization’s subdomain on the element:

<cb-multi-property-date-picker sub-domain="YOUR_SUB_DOMAIN"></cb-multi-property-date-picker>

With only a sub-domain, the component shows the default “Search” button and uses each property’s default language and currency once a property is selected.

Note: For the Multi-prop calendar, it will select English as the language and USD as the currency by default unless overridden via custom params as outlined below.

There is no global custom-url attribute. Custom URLs are set per property with data-property-url-{code}. If a property has no custom URL, the default hosted Booking Engine URL is used.

Atributes

Attribute	Required	Default	Description
`sub-domain`	Yes	—	Subdomain for your organization. Loads and lists its properties.
`button-label`	No	"Search"	Text on the search button (e.g., "Check Availability", "Search Rooms").
`layout`	No	"horizontal"	Layout: `horizontal` (property selector, dates, and button in a row) or `vertical` (stacked).
`open-in-new-tab`	No	"false"	Whether to open the Booking Engine in a new tab. Use `"true"` or `"false"` as a string.
`lang`	No	Property default	Language code for the interface (e.g., `en`, `es`).
`currency`	No	Property default	Currency code for displayed rates (e.g. `usd`, `eur`).
`class-name`	No	—	A CSS class name applied to the component for custom styling.
`property-order`	No	—	Order of properties in the dropdown. Semicolon-separated codes, e.g., `"CODE1;CODE2"`.
`data-property-url-{code}`	No	—	Custom URL for property `{code}`, e.g. `data-property-url-O2YXd0="https://example.com/downtown"`.
`data-property-name-{code}`	No	—	Custom display name for property `{code}`, e.g., `data-property-name-O2YXd0="Downtown Hotel"`

What the Component Generates

On load: A property selector (searchable dropdown), check-in and check-out fields, and a search button (horizontal or vertical by layout). The dropdown lists all properties for the organization. Tapping/clicking a date field opens a calendar popover.
After selecting a property: The date picker and calendar use that property’s settings (availability, restrictions, same-day rules, etc.).
On search (button click): The guest is redirected (same tab or new tab by open-in-new-tab) to the Booking Engine (or the custom URL) with the selected property, check-in, check-out, language, and other query parameters (e.g., promo, analytics).

Finding Your Sub Domain

This is your Organization sub-domain. You can find it by accessing your CRM or your group booking engine. It is your organization name before "cloudbeds.com"as shown in the URL

User Flow

Guest sees the property selector, date bar (check-in, check-out), and search button on your page.
Guest selects a property from the dropdown (they can type to search/filter).
Guest clicks a date field → A calendar popover opens.
Guest selects check-in date → The calendar highlights available check-out dates.
Guest selects check-out date → The search button becomes active.
Guest clicks the search button → They are redirected (same tab or new tab) to the Booking Engine (or your URL) for the selected property with the selected dates, where they choose a room and complete the booking.

Multi-Property Features

Searchable property dropdown: Guests can type to filter properties by name.
Custom order: Use property-order to control the order of properties in the dropdown.
Custom names: Use data-property-name-{code} to display friendly names for each property.
Custom URLs: Use data-property-url-{code} to send guests to different URLs per property.
Layout: horizontal (default) or vertical to match your page layout.
When no properties load: The component still renders; the property dropdown is disabled and shows a hover tooltip “No data was found.”

Usage Examples

Basic (organization sub-domain only)

This is your Organization sub-domain. We are actively working to add this ID on your Organizations property page for easy access. Until then, please contact support and they can provide you the organization ID immediately.

<cb-multi-property-date-picker sub-domain="dcmcu2"></cb-property-date-picker>

With optional attributes

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 button-label="Check Availability"  
 layout="vertical"  
 lang="es"  
 currency="eur"  
 class-name="my-multi-date-picker">
</cb-multi-property-date-picker>

Open Booking Engine in a new tab

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 open-in-new-tab="true"
></cb-multi-property-date-picker>

Custom property order

Custom order for properties in the dropdown. Semicolon-separated property codes. Properties in this list will appear first, in the specified order. Remaining properties will be sorted alphabetically.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 property-order="2SI0CT;O2YXd0;PROP003"
></cb-multi-property-date-picker>

Custom property names

Custom display name per property. Use data-property-name-{code} attributes, where {code} is the property code. Overrides the default property names in the dropdown.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 data-property-name-O2YXd0="Downtown Hotel"  
 data-property-name-2SI0CT="Beach Resort"  
 data-property-name-PROP003="Mountain Lodge"
></cb-multi-property-date-picker>

Custom redirect URLs

Custom redirect URL per property. Use data-property-url-{code} attributes, where {code} is the property code. When a property is selected, if it has a matching attribute, that URL will be used for the redirect. Otherwise, the default hosted booking engine URL is used.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 data-property-url-O2YXd0="https://example.com/downtown"  
 data-property-url-2SI0CT="https://example.com/beach"
></cb-multi-property-date-picker>