Calendario de alojamientos - Inserción del selector de fechas

Gabriela Garcia

Actualización 4 de junio de 2026 14:39

Esta función está disponible para propiedades con Premium Embed Suite, que incluye Immersive Experience 2.0. De forma predeterminada, los huéspedes son redirigidos al Motor de reservas alojado. Para redirigir a los huéspedes a una URL de reserva diferente, como Immersive Experience 2.0, usa el atributo custom-url.

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

El Accommodation Calendar Embed es un componente web inmersivo y ligero que abre un calendario, permite que los huéspedes elijan fechas y los dirige directamente a tu motor de reservas con todo completado previamente. Menos fricción, más reservas. Todos ganan.

Qué es y cuándo usarlo

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

Páginas de detalles de habitaciones
Páginas de listado de habitaciones
Páginas de destino de marketing o campañas
Páginas promocionales que destacan un alojamiento específico

Nota: No debe insertarse en un iframe.

Qué experimentan los huéspedes

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

El huésped hace clic en Reservar ahora
Aparece 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 la URL de reserva configurada, ya completada con:
- Las fechas seleccionadas
- La habitación o unidad correcta

Qué necesitas antes de empezar

Asegúrate de tener:

Tu Cloudbeds Booking Engine (código de propiedad)
El ID de habitación que quieres que se pueda reservar (se explica a continuación)
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 de tipo de habitación

Usa esta opción si quieres que los huéspedes reserven cualquier habitación disponible dentro de una categoría de habitación. Para encontrar tu ID de 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
Revisa 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 habitación es 123456.

Opción 2: ID de 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 de habitación. Para encontrar tu ID de unidad:

Ve a Cuenta → Configuración ➜ Propiedad → pestaña Alojamientos, luego ubica la unidad de habitación que quieres insertar.
Haz clic en Editar junto a la unidad de habitación específica.
Abre las herramientas para desarrolladores de tu navegador y selecciona la pestaña Network.
En las solicitudes de Network, ubica la llamada API [find_one].
En la carga útil de la respuesta, busca el campo llamado "id"; este valor es el ID de unidad que usarás.

Paso 1: Agrega el script de Cloudbeds

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

Nota: Todas las etiquetas de script del paso uno son las mismas para Immersive Experience 2.0 y todos los widgets. Si ya lo instalaste para una integración insertada anterior, no necesitas hacerlo de nuevo. Solo debe instalarse una vez en el <head> global del sitio web.

Importante: No uses las etiquetas de componentes web de Immersive Experience 2.0 dentro de iframes.

Esta configuración puede causar problemas de desplazamiento y requeriría incluir en la lista de permitidos cada elemento de la cadena del iframe, una configuración que no se recomienda.

Lista de mejores prácticas cuando un usuario usa una CMP:

Agrega Immersive Experience al inicio de la etiqueta head antes de la etiqueta CMP, e incluye el atributo que evita que se bloquee. Es mejor no especificarlos todos en la documentación, ya que podrían variar según la plataforma:
- Cookiebot: data-cookieconsent="ignore"
- OneTrust: data-ignore-consent="true"
- Quantcast: data-quantcast-ignore="true"
Clasifica el siguiente script como Necesario en el panel de administración de la CMP; de nuevo, esto podría variar según la plataforma

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

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

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

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

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

Personalización opcional

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

Atributo	Qué hace
button-label	Cambia el texto del botón. El valor predeterminado es “Reservar ahora”.
lang	Define el idioma del calendario y las etiquetas
currency	Sobrescribe la moneda predeterminada de la propiedad
class-name	Agrega una clase CSS personalizada para aplicar estilos
custom-url	Redirige a los huéspedes a una URL de reserva personalizada, como Immersive Experience 2.0

Ejemplo:

<cb-accommodation-date-picker  
property-code="YOUR_PROPERTY_CODE"  
rid="YOUR_ROOM_ID"  
button-label="Reserve This Room"  
lang="en"
custom-url="https://example.com/booking"
></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 (estadía mínima, fechas cerradas, etc.)
Tarifa más baja disponible por día
Check-in el mismo día (si está habilitado)
Idioma y formato completamente localizados

Todo esto se obtiene directamente de tu configuración de Cloudbeds, sin necesidad de configuración adicional.

Configuración de la propiedad que afecta el comportamiento

Estas funciones se controlan en Cloudbeds:

Reservas para el mismo día : permite reservar para hoy
Indicadores de restricción: muestra las reglas de reserva en el calendario
Visualización de tarifas más bajas : muestra la tarifa disponible más económica por día

Si algo no se muestra, el primer lugar que debes revisar es tu configuración de Cloudbeds.