The <cb-multi-property-date-picker> is a web component for properties that belong to the same Cloudbeds Organization. It shows a property selector dropdown, date picker fields, and a search button. Guests select a property, choose check-in and check-out dates, and click search to continue to the Booking Engine or to a custom URL for that property.
This component requires the sub-domain attribute. The value must be your Cloudbeds Organization subdomain, not your property website domain or an individual property Booking Engine URL.
Overview
Multi-property mode is for websites that need to display a date selector for several properties within one Cloudbeds Organization, such as a brand, group, or property collection. 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.
Before you begin
Before installing the Multi-property Date Picker, confirm the following:
- Your properties belong to the same Cloudbeds Organization.
- You have the Organization subdomain for your Group Booking Engine URL.
- Your user role includes Booking Engine privileges to access and manage Booking Engine settings.
- Your package includes access to Premium Embeds, or your property already has Premium Embeds enabled.
Tip: If you see a Contact Sales option in the Premium Embeds section, your package may only include Basic Embeds. Use the option shown in Cloudbeds to Contact Sales about Premium Embeds access.
Important: If your properties only have separate Booking Engine links, such as hotels.cloudbeds.com/reservation/PROPERTYCODE, they are not using a Group Booking Engine yet.
To use the Multi-property Date Picker, the properties must first be connected under a Cloudbeds Organization. Contact Cloudbeds Support to request an Organization.
When requesting an Organization, be ready to provide:
- Desired Organization name and subdomain, for example, mygroup.cloudbeds.com
- Organization Owner first and last name
- Organization Owner email address
- Property names and their MFD IDs
If you are not the registered Property Owner for all properties, Cloudbeds Support may request additional proof of ownership or written authorization before creating the Organization.
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.
Iframe setups can cause display, scrolling, and performance issues. Use your website’s supported custom code or script installation area instead.
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 Organization Subdomain
The sub-domain value is your Organization subdomain. You can find it in your Group Booking Engine URL. It is the text that appears before .cloudbeds.com.
In the example below, the Group Booking Engine URL is alona.cloudbeds.com/manage. The Organization subdomain is alona.
You would add it to the component like this:
<cb-multi-property-date-picker sub-domain="alona"></cb-multi-property-date-picker>The Organization subdomain is not your public website domain, such as www.examplehotel.com, and it is not an individual property Booking Engine link, such as hotels.cloudbeds.com/reservation/PROPERTYCODE.
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-orderto 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) orverticalto 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-multi-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>Troubleshooting
Why is the Multi-property Date Picker not appearing on my website?
If the component does not appear, check the following:
- The Cloudbeds script is installed on the page or in the global
<head>of your website. - The component is not placed inside an iframe.
- Your website domain is added to Whitelisted domains in the Embeds tab.
- Your properties belong to the same Cloudbeds Organization.
- The
sub-domainvalue matches your Organization subdomain.
If your website builder limits custom scripts or web components, contact your website provider or developer for help placing the code in a supported custom code area.
Comments
Please sign in to leave a comment.