Calendario de alojamientos - Inserción del selector de fechas

Gabriela Garcia

Actualización 23 de febrero de 2026 13:57

Esta funcionalidad está disponible para propiedades con el Premium Embed Suite, que incluye Immersive Experience 2.0. El MVP (Minimum Viable Product), es decir, la primera versión funcional, redirige a los huéspedes al Motor de reservas de Cloudbeds alojado. La compatibilidad con redirecciones directas a Immersive Experience 2.0 está prevista para inicios del Q1 de 2026.

Esto ofrece una solución sencilla para agregar un botón de Reservar ahora para una habitación específica en tu sitio web, sin tener que reconstruir todo tu flujo de reservas.

El Embed del calendario de alojamientos es un componente web inmersivo y liviano que abre un calendario, permite a los huéspedes elegir fechas y los envía directamente a tu motor de reservas con todo prellenado. Menos fricción, más reservas. Todos ganan.

Qué es (y cuándo usarlo)

Usa el calendario de alojamientos cuando quieras que los huéspedes reserven una habitación o unidad específica, y no solo “el hotel en general”. Es ideal para:

Páginas de detalle de la habitación
Páginas de listado de habitaciones
Landing pages de marketing o campañas
Páginas promocionales que destaquen un solo alojamiento

Qué experimentan los huéspedes

Este es el flujo desde el punto de vista del huésped:

El huésped hace clic en Reservar ahora
Se abre un calendario en una ventana modal
El huésped selecciona las fechas de check-in y check-out
El huésped hace clic en Continuar
Se abre una nueva pestaña con tu Motor de reservas de Cloudbeds, ya prellenado con:
- Las fechas seleccionadas
- La habitación o unidad correcta

Qué necesitas antes de empezar

Asegúrate de tener:

Tu Motor de reservas de Cloudbeds (código de la propiedad)
El ID de la habitación que quieres reservar (se explica más abajo)
Acceso para editar el HTML de tu sitio web

Para encontrar el código de tu propiedad, puedes consultar el enlace de tu motor de reservas y extraer el identificador único.

Opción 1: ID del tipo de habitación

Usa esta opción si quieres que los huéspedes reserven cualquier habitación disponible dentro de una categoría. Para encontrar el ID de tu habitación (rid):

Ve a Cuenta → Configuración ➜ Propiedad → pestaña Alojamientos
Luego, haz clic en el nombre del alojamiento (tipo de habitación) que necesitas
Mira la barra de direcciones del navegador: el número que aparece al final de la URL es el ID del tipo de habitación

Por ejemplo, para la URL https://hotels.cloudbeds.com/connect/100000#/manage/roomTypes/123456 → el ID de la habitación es 123456.

Opción 2: ID de la unidad

Usa esta opción si quieres que los huéspedes reserven una habitación física específica (unidad), en lugar de cualquier habitación dentro de un tipo. Para encontrar el ID de tu unidad:

Ve a Cuenta → Configuración ➜ Propiedad → pestaña Alojamientos, luego ubica la unidad que quieres incrustar.
Haz clic en Editar junto a la unidad de habitación específica.
Abre las Herramientas para desarrolladores del navegador y selecciona la pestaña Network.
En las solicitudes de Network, localiza la llamada a la API [find_one].
En la respuesta (payload), busca el campo "id": ese valor es el ID de la unidad que usarás.

Paso 1: Agrega el script de Cloudbeds

Agrega el siguiente script dentro del <head> de tu sitio web:

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

Paso 2: Agrega el botón del selector de fechas

Coloca esta etiqueta donde quieras que aparezca el botón de Reservar ahora:

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

Una vez agregado, el botón se mostrará automáticamente.

Personalización opcional

Puedes ajustar el botón y la interfaz con estos atributos opcionales:

Atributo	Qué hace
button-label	Cambia el texto del botón (por defecto: “Reservar ahora”)
lang	Define el idioma del calendario y las etiquetas
currency	Reemplaza la moneda predeterminada de la propiedad
class-name	Agrega una clase CSS personalizada para aplicar estilos

Ejemplo:

<cb-accommodation-date-picker  
property-code="YOUR_PROPERTY_CODE"  
rid="YOUR_ROOM_ID"  
button-label="Reserva esta habitación"  
lang="en"
></cb-accommodation-date-picker>

Funciones del calendario que verán los huéspedes

Según la configuración de tu propiedad, el calendario puede mostrar:

Restricciones de reserva (estancia mínima, fechas cerradas, etc.)
La tarifa disponible más baja por día
Check-in el mismo día (si está habilitado)
Idioma y formato totalmente localizados

Todo esto se obtiene directamente de tu configuración de Cloudbeds — no se requiere configuración adicional.

Configuraciones de la propiedad que afectan el comportamiento

Estas funciones se controlan en Cloudbeds:

Reservas el mismo día – Permite reservar para hoy
Indicadores de restricciones – Muestra las reglas de reserva en el calendario
Visualización de tarifas más bajas – Muestra la tarifa más barata disponible por día

Si algo no aparece, lo primero que debes revisar es tu configuración de Cloudbeds.