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
Nota: No debe insertarse en un iframe.
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
- 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:
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>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.
Comentarios
Inicie sesión para dejar un comentario.