Multi-property Calendar - Date Picker Embed

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

<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

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

1. Guest sees the property selector, date bar (check-in, check-out), and search button on your page.
2. Guest selects a property from the dropdown (they can type to search/filter).
3. Guest clicks a date field → A calendar popover opens.
4. Guest selects check-in date → The calendar highlights available check-out dates.
5. Guest selects check-out date → The search button becomes active.
6. 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>