Accommodations Calendar - Date Picker Embed

Gabriela Garcia

Updated February 18, 2026 19:05

This feature is available for properties with the Premium Embed Suite that includes the Immersive Experience 2.0. The current MVP (Minimum Viable Product), meaning the initial functional release, redirects guests to the hosted Booking Engine. Support for redirects directly into Immersive Experience 2.0 is planned for early Q1 2026.

This provides a solution for a simple way to add a Book Now button for a specific room on your website — without rebuilding your entire booking flow.

The Accommodation Calendar Embed is a lightweight immersive web component that opens a calendar, lets guests choose dates, and sends them straight to your booking engine with everything pre-filled. Less friction, more bookings. Everybody wins.

What This Is (and When to Use It)

Use the Accommodation Calendar when you want guests to book a specific room or unit, not just “the hotel in general.” It’s ideal for:

Room detail pages
Room listing pages
Marketing or campaign landing pages
Promotional pages featuring a single accommodation

What Guests Experience

Here’s the flow from a guest’s point of view:

Guest clicks Book Now
A calendar pops up in a modal
Guest selects check-in and check-out dates
Guest clicks Continue
A new tab opens with your Booking Engine, already filled in with:
- Selected dates
- The correct room or unit

What You Need Before You Start

Make sure you have:

Your Cloudbeds Booking Engine (Property Code)
The Room ID you want to book (explained below)
Access to edit your website’s HTML

To find you property code, you can reference your booking engine link and extract the unique identifier.

Option 1: Room Type ID

Use this if you want guests to book any available room within a room category. To find your Room ID (rid):

Go to Account → Settings ➜ Property → Accommodations tab
Then click the accommodation (room type) name you need
Look at the browser’s address bar; the number shown at the very end of the URL is the room type’s ID

For example, for the URL https://hotels.cloudbeds.com/connect/100000#/manage/roomTypes/123456 → the Room ID is 123456.

Option 2: Unit ID

Use this option if you want guests to book one specific physical room (unit), rather than any room within a room type. To find your Unit ID:

Go to Account → Settings ➜ Property → Accommodations tab, then locate the room unit you want to embed.
Click Edit next to the specific room unit.
Open your browser’s Developer Tools and select the Network tab.
In the Network requests, locate the [find_one] API call.
In the response payload, find the field labeled "id" — this value is the Unit ID you will use.

Step 1: Add the Cloudbeds Script

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

<script  
src="https://hotels.cloudbeds.com/cb-immersive-experience.js"  
data-environment="prod"  
data-property-code="YOUR_PROPERTY_CODE"  
data-island="YOUR_ISLAND"
></script>

Step 2: Add the Date Picker Button

Place this tag wherever you want the Book Now button to appear:

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

Once added, the button will render automatically.

Optional Customization

You can tweak the button and interface using these optional attributes:

Attribute	What It Does
button-label	Change the button text (defaults to “Book Now”)
lang	Sets the language for the calendar and labels
currency	Overrides the property’s default currency
class-name	Adds a custom CSS class for styling

Example:

<cb-accommodation-date-picker  
property-code="YOUR_PROPERTY_CODE"  
rid="YOUR_ROOM_ID"  
button-label="Reserve This Room"  
lang="en"
></cb-accommodation-date-picker>

Calendar Features Guests Will See

Depending on your property settings, the calendar can display:

Booking restrictions (minimum stay, closed dates, etc.)
Lowest available rate per day
Same-day check-in (if enabled)
Fully localized language and formatting

All of this is pulled directly from your Cloudbeds configuration — no extra setup needed.

Property Settings That Affect Behavior

These features are controlled in Cloudbeds:

Same-day reservations – Allows booking for today
Restriction indicators – Shows booking rules on the calendar
Lowest rates display – Shows the cheapest available rate per day

If something isn’t showing up, the first stop is your Cloudbeds settings.