Calendario multipropiedad - Inserción del selector de fechas

Gabriela Garcia

Actualización 23 de febrero de 2026 14:01

El <cb-multi-property-date-picker> es un componente web para múltiples propiedades dentro de una organización. Debes pasar el atributo obligatorio sub-domain. Muestra un menú desplegable para seleccionar la propiedad, campos de selección de fechas y un botón de búsqueda. El huésped elige una propiedad, selecciona las fechas de check-in y check-out y luego hace clic en buscar; después es redirigido al Motor de reservas de Cloudbeds (o a tu URL personalizada) para esa propiedad.

Descripción general

El modo multipropiedad es para integraciones que muestran múltiples propiedades dentro de una misma organización (por ejemplo, una marca o un grupo). Funciona bien en:

Páginas de inicio de la organización o la marca
Secciones de “Elige una propiedad” + búsqueda por fechas
Landing pages que muestran varias propiedades y llevan a los huéspedes al flujo de reserva de la que elijan
Cualquier página donde el huésped primero deba elegir una propiedad y luego elegir fechas

El componente carga la lista de propiedades de la organización, muestra un desplegable con búsqueda y, después de que el huésped seleccione una propiedad y fechas, lo redirige al Motor de reservas Immersive Experience (o a una URL personalizada) de esa propiedad.

Paso 1: Agrega el script de Cloudbeds

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

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

Carga el script en el <head> o antes del componente en el <body> para que se ejecute antes de que se procese la etiqueta del componente.

<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 script del selector de fechas del calendario

Para el modo multipropiedad, debes pasar el subdominio de la organización en el elemento:

<cb-multi-property-date-picker sub-domain="YOUR_SUB_DOMAIN"></cb-multi-property-date-picker>

Con solo un sub-domain, el componente muestra el botón predeterminado “Search” y usa el idioma y la moneda predeterminados de cada propiedad una vez que se selecciona una propiedad.

Nota: En el calendario multipropiedad, se selecciona inglés como idioma y USD como moneda de forma predeterminada, a menos que se reemplace mediante parámetros personalizados, como se indica más abajo.

No existe un atributo global custom-url. Las URL personalizadas se definen por propiedad con data-property-url-{code}. Si una propiedad no tiene una URL personalizada, se usa la URL predeterminada del Motor de reservas de Cloudbeds alojado.

Atributos

Atributo	Obligatorio	Predeterminado	Descripción
`sub-domain`	Sí	—	Subdominio de tu organización. Carga y lista sus propiedades.
`button-label`	No	"Search"	Texto del botón de búsqueda (p. ej., "Check Availability", "Search Rooms").
`layout`	No	"horizontal"	Diseño: `horizontal` (selector de propiedad, 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.
`property-order`	No	—	Orden de las propiedades en el desplegable. Códigos separados por punto y coma, por ejemplo `"CODE1;CODE2"`.
`data-property-url-{code}`	No	—	URL personalizada para la propiedad `{code}`, por ejemplo `data-property-url-O2YXd0="https://example.com/downtown"`.
`data-property-name-{code}`	No	—	Nombre visible personalizado para la propiedad `{code}`, por ejemplo `data-property-name-O2YXd0="Downtown Hotel"`.

Qué genera el componente

Al cargar: Un selector de propiedades (desplegable con búsqueda), campos de check-in y check-out, y un botón de búsqueda (horizontal o vertical según layout). El desplegable lista todas las propiedades de la organización. Al tocar/hacer clic en un campo de fecha, se abre un calendario emergente.
Después de seleccionar una propiedad: El selector de fechas y el calendario usan la configuración de esa propiedad (disponibilidad, restricciones, reglas de mismo día, etc.).
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 (o a la URL personalizada) con la propiedad seleccionada, check-in, check-out, idioma y otros parámetros de consulta (por ejemplo, promoción o analítica).

Cómo encontrar tu subdominio

Este es el subdominio de tu organización. Puedes encontrarlo accediendo a tu CRM o al motor de reservas del grupo. Es el nombre de tu organización antes de "cloudbeds.com", como se muestra en la URL.

Flujo del usuario

El huésped ve el selector de propiedad, la barra de fechas (check-in, check-out) y el botón de búsqueda en tu página.
El huésped selecciona una propiedad en el desplegable (puede escribir para buscar/filtrar).
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 (misma pestaña o nueva pestaña) al Motor de reservas de Cloudbeds (o a tu URL) para la propiedad seleccionada con las fechas elegidas, donde selecciona una habitación y completa la reserva.

Funciones multipropiedad

Desplegable de propiedades con búsqueda: Los huéspedes pueden escribir para filtrar propiedades por nombre.
Orden personalizado: Usa property-order para controlar el orden de las propiedades en el desplegable.
Nombres personalizados: Usa data-property-name-{code} para mostrar nombres amigables para cada propiedad.
URL personalizadas: Usa data-property-url-{code} para enviar a los huéspedes a diferentes URL por propiedad.
Diseño: horizontal (predeterminado) o vertical para ajustarse al diseño de tu página.
Cuando no se cargan propiedades: El componente igual se muestra; el desplegable queda deshabilitado y muestra un tooltip al pasar el cursor: “No se encontraron datos”.

Ejemplos de uso

Básico (solo subdominio de la organización)

Este es el subdominio de tu organización. Estamos trabajando activamente para agregar este ID en la página de propiedades de Organizations para que sea fácil acceder a él. Mientras tanto, contacta a soporte y te pueden proporcionar el ID de la organización de inmediato.

<cb-multi-property-date-picker sub-domain="dcmcu2"></cb-property-date-picker>

Con atributos opcionales

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 button-label="Check Availability"  
 layout="vertical"  
 lang="es"  
 currency="eur"  
 class-name="my-multi-date-picker">
</cb-multi-property-date-picker>

Abrir el motor de reservas en una nueva pestaña

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 open-in-new-tab="true"
></cb-multi-property-date-picker>

Orden personalizado de propiedades

Orden personalizado de propiedades en el desplegable. Códigos de propiedad separados por punto y coma. Las propiedades de esta lista aparecerán primero, en el orden indicado. Las propiedades restantes se ordenarán alfabéticamente.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 property-order="2SI0CT;O2YXd0;PROP003"
></cb-multi-property-date-picker>

Nombres personalizados de propiedades

Nombre visible personalizado por propiedad. Usa atributos data-property-name-{code}, donde {code} es el código de la propiedad. Reemplaza los nombres predeterminados en el desplegable.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 data-property-name-O2YXd0="Downtown Hotel"  
 data-property-name-2SI0CT="Beach Resort"  
 data-property-name-PROP003="Mountain Lodge"
></cb-multi-property-date-picker>

URL de redirección personalizadas

URL de redirección personalizada por propiedad. Usa atributos data-property-url-{code}, donde {code} es el código de la propiedad. Cuando se selecciona una propiedad, si existe un atributo que coincida, se usará esa URL para la redirección. De lo contrario, se usa la URL predeterminada del motor de reservas alojado.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 data-property-url-O2YXd0="https://example.com/downtown"  
 data-property-url-2SI0CT="https://example.com/beach"
></cb-multi-property-date-picker>