Single Property Calendar - Date Picker Embed

Gabriela Garcia

Updated February 20, 2026 18:13

Overview

This component is designed for integrations that need a property-level date search on your website. It works well on:

Homepage or hero section of your site
Booking or “Check Availability” sections
Landing pages that send users into the full booking flow
Any page where you want dates selected before the guest reaches the Booking Engine

The component shows property-level availability (across all room types), not a specific room. After selecting a date, the guest is sent to the Booking Engine to choose a room and complete the reservation.

Setup

To add Booking Engine Web Components to an external website, we first need to add the Immersive Experience script in the head of the HTML document:

The <cb-property-date-picker> is a web component that provides a date selection bar for your property. It shows the check-in and check-out fields, a calendar popover, and a search button. When the guest selects dates and clicks Search, they are redirected to the Booking Engine with those dates, where they can choose a room and complete the booking.

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.

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>

Installation

Include the Cloudbeds web components script in the <head> of your HTML (or before the component in <body>). The script must load before any <cb-property-date-picker> tag so the component is registered.

Basic Usage

<script  
src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js">
</script>

What the setup does

Loading this script registers the <cb-property-date-picker> component on the page.
After the script loads, you can place one or more <cb-property-date-picker> tags anywhere. Each instance renders the date picker bar (check-in, check-out, and search button) and, when the guest selects dates and clicks search, redirects to the Booking Engine (or your custom URL) with the selected dates as described below.

Component Usage

Minimal required example

You can use the component with just the script’s data-property-code (no attributes on the element), or pass the property code on the element:

<cb-property-date-picker  
property-code="YOUR_PROPERTY_CODE"
></cb-property-date-picker>

With only the property code (on the script or the element), the component shows the default “Search” button and uses your property’s default language and currency.

Attributes

Attribute	Required	Default	Description
`property-code`	Yes	—	Your Cloudbeds property code. If omitted, the component uses the script’s `data-property-code` (single-property only).
`button-label`	No	"Search"	The text shown on the search button (e.g., “Check Availability”, “Search Rooms”).
`layout`	No	"horizontal"	Layout of the date bar: `horizontal` (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.
`custom-url`	No	—	URL to redirect to after date selection instead of the Booking Engine. Receives `checkin`, `checkout`, `widget_source`, `promo`, and analytics params as query params.

What the Component Generates

On page load: A date bar with check-in and check-out fields and a search button (horizontal or vertical, depending on layout). Tapping/clicking a date field opens a calendar popover.
In the popover, the guest selects check-in and check-out dates. The calendar shows property-level availability and any restrictions or rates your property has enabled.
On search (button click): The guest is redirected (same tab or new tab, depending on open-in-new-tab) to the Booking Engine with:
- The selected check-in date
- The selected check-out date
- Language and other query parameters (e.g., promo, analytics)

If you set custom-url, the same query parameters (checkin, checkout, widget_source, promo, analytics) are appended to that URL so your page can continue the flow.

Finding Your Property Code

Your property code is the unique identifier in yyour booking engine URL. You can find it your PMS settings, under Booking Engine Summary Tab:

User Flow

The guest sees the date bar (check-in, check-out, search button) on your page.
The guest clicks a date field → A calendar popover opens.
The guest selects the check-in date → The calendar highlights available check-out dates.
The guest selects the check-out date → The search button becomes active.
The guest clicks the search button → They are redirected to specified URL (Immersive Experience or hosted URL) to the Booking Engine with the selected dates, where they choose a room and complete the booking.

Date Picker Features

The calendar popover includes:

Availability display: Property-level availability (combined across all room types).
Restriction indicators: Min stay, closed to arrival, and other restrictions (when enabled in your property settings).
Lowest rate display: Lowest available rate per day (when enabled in your property settings).
Same-day reservations: Booking for today’s date (when enabled in your property settings).
Localized interface: Labels and messages follow the lang attribute you set.

Property Configuration

Some behavior depends on your property settings in Cloudbeds. These are configured in the Cloudbeds dashboard, not via component attributes:

Setting	Effect
`allowSameDayReservation`	Allows guests to select today as the check-in date.
`showRestrictionsOnCalendar`	Shows restriction indicators (min stay, closed to arrival, etc.).
`showLowestRatesOnCalendar`	Shows the lowest available rate for each day.

Usage Examples

Basic (property code on the element)

<cb-property-date-picker  
property-code="O2YXd0"
></cb-property-date-picker>

With optional attributes

<cb-property-date-picker  
property-code="O2YXd0"  
button-label="Check Availability"  
layout="vertical"  
lang="es"  
currency="eur"  
class-name="my-date-picker"
></cb-property-date-picker>

Open Booking Engine in a new tab

<cb-property-date-picker  
property-code="O2YXd0"  
open-in-new-tab="true"
></cb-property-date-picker>

With a custom redirect URL

When you use custom-url, the guest is sent to your URL after choosing dates. The URL receives checkin, checkout, widget_source, promo, and analytics parameters so your page can continue the booking flow.

<cb-property-date-picker  
property-code="O2YXd0"  
custom-url="https://example.com/booking"
></cb-property-date-picker>

Frequently Asked Questions

Does the search widget support guest filters (Adults/Children)?

No. The current widget does not include guest filters for adults or children. It supports check-in, check-out, promo code, and the Search button only.