Calendario de una sola propiedad - Inserción del selector de fechas

Gabriela Garcia

Actualización 23 de febrero de 2026 14:12

Descripción general

Este componente está diseñado para integraciones que necesitan una búsqueda por fechas a nivel de propiedad en tu sitio web. Funciona bien en:

La página de inicio o la sección principal (hero) del sitio
Secciones de reservas o “Consultar disponibilidad”
Landing pages que llevan a los usuarios al flujo completo de reserva
Cualquier página donde quieras que las fechas se seleccionen antes de que el huésped llegue al Motor de reservas de Cloudbeds

El componente muestra disponibilidad a nivel de propiedad (en todos los tipos de habitación), no de una habitación específica. Después de seleccionar las fechas, el huésped es enviado al Motor de reservas de Cloudbeds para elegir una habitación y completar la reserva.

Configuración

Para agregar componentes web del Motor de reservas de Cloudbeds a un sitio web externo, primero debes agregar el script de Immersive Experience en el head del documento HTML:

El <cb-property-date-picker> es un componente web que proporciona una barra de selección de fechas para tu propiedad. Muestra los campos de check-in y check-out, un calendario emergente y un botón de búsqueda. Cuando el huésped selecciona fechas y hace clic en Search, se lo redirige al Motor de reservas de Cloudbeds con esas fechas, donde puede elegir una habitación y completar la reserva.

Nota: Todas las etiquetas de script del paso 1 son iguales para Immersive Experience 2.0 y para todos los widgets. Si ya instalaste esto para un embed anterior, no necesitas hacerlo de nuevo. Solo se instala una vez en el <head> (global) del sitio web.

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

Esta configuración puede causar problemas de desplazamiento (scroll) y requeriría permitir (whitelisting) cada elemento en la cadena de iframes, una configuración que no se recomienda.

Lista de buenas prácticas cuando el usuario utiliza un CMP:

Agrega Immersive Experience al inicio del head, antes de la etiqueta del CMP, e incluye el atributo que evita que se bloquee. Es mejor no detallar todo en la documentación, ya que puede 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 del CMP; esto puede 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>

Instalación

Incluye el script de componentes web de Cloudbeds en el <head> de tu HTML (o antes del componente en el <body>). El script debe cargarse antes de cualquier etiqueta <cb-property-date-picker> para que el componente quede registrado.

Uso básico

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

Qué hace la configuración

Al cargar este script, se registra el componente <cb-property-date-picker> en la página.
Después de que el script se cargue, puedes colocar una o más etiquetas <cb-property-date-picker> en cualquier parte. Cada instancia renderiza la barra de selección de fechas (check-in, check-out y botón de búsqueda) y, cuando el huésped selecciona fechas y hace clic en buscar, lo redirige al Motor de reservas de Cloudbeds (o a tu URL personalizada) con las fechas seleccionadas, como se describe más abajo.

Uso del componente

Ejemplo mínimo requerido

Puedes usar el componente solo con el data-property-code del script (sin atributos en el elemento), o pasar el código de la propiedad en el elemento:

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

Con solo el código de la propiedad (en el script o en el elemento), el componente muestra el botón “Search” por defecto y usa el idioma y la moneda predeterminados de tu propiedad.

Atributos

Atributo	Obligatorio	Predeterminado	Descripción
`property-code`	Sí	—	Tu código de propiedad de Cloudbeds. Si se omite, el componente usa el `data-property-code` del script (solo para propiedad única).
`button-label`	No	"Search"	Texto que se muestra en el botón de búsqueda (p. ej., “Check Availability”, “Search Rooms”).
`layout`	No	"horizontal"	Diseño de la barra de fechas: `horizontal` (fechas y botón en una fila) o `vertical` (en columna).
`open-in-new-tab`	No	"false"	Define si el Motor de reservas de Cloudbeds se abre en una nueva pestaña. Usa `"true"` o `"false"` como cadena.
`lang`	No	Predeterminado de la propiedad	Código de idioma de la interfaz (p. ej., en, es).
`currency`	No	Predeterminado de la propiedad	Código de moneda para las tarifas mostradas (p. ej., `usd`, `eur`).
`class-name`	No	—	Nombre de clase CSS aplicada al componente para estilos personalizados.
`custom-url`	No	—	URL a la que se redirige después de seleccionar fechas, en lugar del Motor de reservas de Cloudbeds. Recibe `checkin`, `checkout`, `widget_source`, `promo` y parámetros de analítica como parámetros de consulta.

Qué genera el componente

Al cargar la página: Una barra de fechas con campos de check-in y check-out y un botón de búsqueda (horizontal o vertical, según layout). Al tocar/hacer clic en un campo de fecha, se abre un calendario emergente.
En el emergente, el huésped selecciona las fechas de check-in y check-out. El calendario muestra disponibilidad a nivel de propiedad y cualquier restricción o tarifa que tu propiedad tenga habilitada.
Al buscar (clic en el botón): El huésped es redirigido (en la misma pestaña o en una nueva, según open-in-new-tab) al Motor de reservas de Cloudbeds con:
- La fecha de check-in seleccionada
- La fecha de check-out seleccionada
- El idioma y otros parámetros de consulta (p. ej., promoción, analítica)

Si configuras custom-url, los mismos parámetros de consulta (checkin, checkout, widget_source, promo, analítica) se agregan a esa URL para que tu página pueda continuar el flujo.

Cómo encontrar tu código de propiedad

Tu código de propiedad es el identificador único en la URL de tu motor de reservas. Puedes encontrarlo en la configuración del PMS, en la pestaña Resumen del motor de reservas (Booking Engine Summary).

Flujo del usuario

El huésped ve la barra de fechas (check-in, check-out y botón de búsqueda) en tu página.
El huésped hace clic en un campo de fecha → Se abre un calendario emergente.
El huésped selecciona la fecha de check-in → El calendario resalta las fechas de check-out disponibles.
El huésped selecciona la fecha de check-out → El botón de búsqueda se activa.
El huésped hace clic en el botón de búsqueda → Es redirigido a la URL especificada (Immersive Experience o URL alojada) del Motor de reservas de Cloudbeds con las fechas seleccionadas, donde elige una habitación y completa la reserva.

Funciones del selector de fechas

El calendario emergente incluye:

Visualización de disponibilidad: Disponibilidad a nivel de propiedad (combinada en todos los tipos de habitación).
Indicadores de restricciones: Estancia mínima, cerrado a la llegada y otras restricciones (cuando están habilitadas en la configuración de tu propiedad).
Visualización de la tarifa más baja: La tarifa disponible más baja por día (cuando está habilitada en la configuración de tu propiedad).
Reservas el mismo día: Reserva para la fecha de hoy (cuando está habilitada en la configuración de tu propiedad).
Interfaz localizada: Las etiquetas y los mensajes siguen el atributo lang que configures.

Configuración de la propiedad

Parte del comportamiento depende de la configuración de tu propiedad en Cloudbeds. Esto se configura en el dashboard de Cloudbeds, no mediante atributos del componente:

Configuración	Efecto
`allowSameDayReservation`	Permite que los huéspedes seleccionen hoy como fecha de check-in.
`showRestrictionsOnCalendar`	Muestra indicadores de restricciones (estancia mínima, cerrado a la llegada, etc.).
`showLowestRatesOnCalendar`	Muestra la tarifa disponible más baja para cada día.

Ejemplos de uso

Básico (código de la propiedad en el elemento)

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

Con atributos opcionales

<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>

Abrir el motor de reservas en una nueva pestaña

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

Con una URL de redirección personalizada

Cuando usas custom-url, el huésped es enviado a tu URL después de elegir fechas. La URL recibe checkin, checkout, widget_source, promo y parámetros de analítica para que tu página pueda continuar el flujo de reserva.

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

Preguntas frecuentes

¿El widget de búsqueda admite filtros de huéspedes (adultos/niños)?

No. El widget actual no incluye filtros de huéspedes para adultos o niños. Solo admite check-in, check-out, código promocional y el botón Search.