Experiencia Inmersiva 2.0 del motor de reservas de Cloudbeds - Todo lo que debes saber

Gabriela Garcia

Actualización 7 de enero de 2026 14:19

Resumen

El Cloudbeds Booking Engine Immersive Experience 2.0 es una solución de reservas moderna, totalmente basada en la web, que ofrece una experiencia de reserva fluida y fácil para tus huéspedes directamente en el sitio web de tu propiedad. Facilita pagos seguros y compatibles con PCI, e incorpora el seguimiento de compatibilidad con Google para obtener información desde la vista de página hasta la compra.

Como componente basado en la web, Immersive Experience 2.0 elimina la necesidad de whitelisting o procesos complejos de enmascaramiento. En su lugar, simplifica la integración mediante una inserción (embed) sencilla que se integra sin problemas en el sitio web de tu propiedad, manteniendo tanto la consistencia del diseño como la facilidad de implementación.

Una experiencia de reserva mejorada

Immersive Experience 2.0 presenta funciones únicas diseñadas para mejorar la experiencia de reserva de tus huéspedes en tu propio sitio web:

Mayores tasas de conversión: Menos clics, tiempos de carga más rápidos y una experiencia de marca coherente impulsan más reservas.
Más personalización: Crea una experiencia única y memorable para tus huéspedes sin las limitaciones de un iframe estándar.
Crecimiento basado en datos: Accede a métricas e información clave para optimizar tu proceso de reserva e impulsar las reservas directas.
Mayor confianza: El flujo de reserva seguro y fluido genera confianza en el huésped y lo anima a completar el proceso de reserva.

Componentes web vs. componentes basados en iframe

En contraste con los sistemas basados en iframe, este componente web integrado ofrece:

Tiempos de carga del sitio web más rápidos
Mayor personalización de marca
Un flujo de reserva unificado que garantiza que los huéspedes permanezcan en el sitio desde su búsqueda inicial hasta completar el pago

Cómo se ve

Immersive Experience 2.0 ofrece dos opciones flexibles de inserción (embed) para adaptarse al diseño y al flujo de usuario del sitio web de tu propiedad. Puedes optar por insertar una experiencia inmersiva a pantalla completa o crear e insertar una experiencia inmersiva emergente.

La inserción a pantalla completa funciona tal como suena: coloca el motor de reservas completo directamente dentro de una página de tu sitio web, brindando a los huéspedes un recorrido de reserva ininterrumpido y totalmente inmersivo de principio a fin.

La opción de inserción emergente ofrece una alternativa elegante y moderna. Cuando un huésped hace clic en el botón “Reservar ahora”, un panel lateral se desliza suavemente desde el borde de la pantalla, ofreciendo una experiencia de reserva compacta pero totalmente funcional sin salir de la página actual.

El flujo de reserva incluye:

Búsqueda de disponibilidad
Selección de habitación
Visualización de tarifas
Oportunidades de upsell
Ingreso de información del huésped
Procesamiento de pagos seguro

Precios y disponibilidad

Cloudbeds Booking Engine Plus está incluido con todas las suscripciones de Cloudbeds sin costo adicional para las propiedades incluidas en nuestra primera fase de lanzamiento. Immersive Experience 2.0 utiliza el mismo flujo de reserva, pero ofrece una forma mejorada de integrarlo directamente en tu sitio web.

Si Immersive Experience 2.0 tiene un cargo adicional depende de tu suscripción y del programa de migración vigente:

Durante la transición desde los iframes heredados y Immersive 1.0, muchas propiedades pueden tener Immersive Experience 2.0 habilitado sin costo adicional como parte de la actualización.
Fuera de estos programas, Immersive Experience 2.0 puede ofrecerse como un complemento facturable, aplicado a la factura regular de Cloudbeds de la propiedad.

Cloudbeds comunicará con claridad y con anticipación cualquier actualización futura de precios antes de que los cambios entren en vigor.

Nota: Cualquier valor que se muestre como {PARAMETER} en este artículo es un marcador de posición. Reemplázalo con tu valor real y elimina las llaves ({ }).

Importante:

Immersive Experience se ha probado con sitios web hechos a medida. Los sitios basados en plantillas o sin código, creados con plataformas de creación de sitios, pueden manejar los scripts personalizados de forma diferente, lo que podría afectar la funcionalidad.
No uses las etiquetas de componente web de Immersive Experience 2.0 dentro de iframes.
- Esta configuración puede causar problemas de desplazamiento (scroll) y requeriría hacer whitelisting de cada elemento en la cadena de iframes, una configuración no recomendada.
Lista de buenas prácticas cuando un 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 especificarlo todo en la documentación, pero 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; nuevamente, puede ser diferente en cada plataforma:
```
<script src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" type="text/javascript"></script>
```

Cómo instalar Immersive Experience 2.0

Para habilitar Immersive Experience 2.0 en el sitio web de tu propiedad, sigue los pasos a continuación.

Paso 1 – Activar Dominios permitidos

Para iniciar la instalación de Immersive Experience 2.0 y maximizar tu experiencia de reserva, ve a Dominios permitidos en la configuración de tus widgets del sitio web. Si la opción no está disponible, contacta a nuestro Equipo de soporte para que te ayuden a activarla.
Si eres cliente de Cloudbeds Websites, puedes comunicarte con el equipo de Cloudbeds Websites para recibir orientación sobre la implementación y las solicitudes de activación.

Paso 2 – Hacer whitelisting de tu dominio

Una vez que nuestro equipo de soporte habilite las configuraciones adecuadas, verás la sección Dominios permitidos en tu Cloudbeds PMS.

Desde tu Menú de cuenta , selecciona Configuración
Haz clic en Motor de reservas
Ve a Widgets del sitio web y, en la sección Dominios permitidos, agrega el/los dominio(s) donde instalarás Immersive Experience. Puedes agregar hasta 5 dominios.

Se admiten dominios principales y subdominios (p. ej.,my-hotel.com y booking.my-hotel.com).

Whitelist de dominios permitidos: cómo comprobar el formato correcto del dominio

A veces, el dominio de un sitio web puede configurarse de forma que sea necesario incluir www. Para cubrir ambas posibilidades, te recomendamos hacer una prueba sencilla.

Revisa la barra de URL: abre tu sitio web y mira la URL en tu navegador.
¿Incluye www? Por ejemplo, ¿muestra https://www.yourdomain.com o solo https://yourdomain.com?

Una vez que sepas qué formato usa tu sitio, podrás ingresar el dominio correcto en el campo de whitelist de Cloudbeds. Por ejemplo, si tu sitio se muestra con www, entonces deberías hacer whitelisting de tu dominio como www.yourdomain.com.

Por qué los dominios deben estar en la whitelist

Immersive Experience es un componente web (no es un iframe). Se ejecuta en tu sitio y realiza solicitudes API a los servicios de Cloudbeds desde tu dominio. El whitelisting le indica a Cloudbeds qué orígenes están autorizados para que esas solicitudes entre dominios sean aceptadas.

Paso 3 – Agregar el script de Immersive Experience

Agrega el siguiente script en el elemento <head> del documento HTML de tu sitio web:

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

Nota: El valor de data-cookieconsent varía y solo será necesario si usas un CMP (integración de cumplimiento de cookies) en tu sitio web. Si usas un CMP, deberás verificar que el atributo (por ejemplo, "data-cookieconsent=ignore) se ajuste para cumplir con la configuración de atributos de tu CMP específico.

Paso 4 – Integrar el motor de reservas

Puedes renderizar Immersive Experience de dos maneras:

Modo estándar (inserción a pantalla completa): También conocido como “inserción a pantalla completa”, es el modo predeterminado en el que la app del motor de reservas se integra por completo en el sitio web anfitrión. Para integrarlo, incluye el siguiente fragmento en el HTML donde deba renderizarse:

<cb-immersive-experience mode="standard" property-code="{PROPERTY_CODE}" />

Modo emergente (botón Reservar ahora): Este modo renderiza la app del motor de reservas como un pop-up con posición fija y superposición. Para agregar un botón Reservar ahora que abra Immersive Experience en un pop-up:

<cb-book-now-button property-code="{PROPERTY_CODE}" />

Si omites el atributo mode, el componente usa por defecto standard.

Encuentra tu código de propiedad

Ve a Menú de cuenta > Configuración > Motor de reservas > pestaña Resumen. Tu código es el valor alfanumérico de 6 caracteres al final de tu enlace del motor de reservas:

https://hotels.cloudbeds.com/reservation/{PROPERTY_CODE}

En el ejemplo a continuación, el segmento resaltado es el código de propiedad que debes usar en tu inserción (reemplaza las llaves y el valor en tu fragmento).

Consideraciones de configuración y comportamiento

Las secciones a continuación destacan detalles de comportamiento e implementación útiles para conocer antes de publicarlo.

Compatibilidad con creadores de sitios

Immersive Experience se ha probado con sitios web hechos a medida. Los creadores de sitios con plantillas o sin código pueden manejar los scripts personalizados de forma diferente, lo que podría afectar la funcionalidad.

✔️ Inyección en el head: Confirma que puedes agregar el script de Immersive Experience <script> en el <head> de la página.

✔️ Whitelisting: Asegúrate de que tu dominio en vivo (y cualquier dominio de staging/vista previa) esté agregado en Dominios permitidos para que se acepten las solicitudes API (hasta 5 dominios).

✔️ CSS/JS personalizado: Los estilos o scripts agregados en la sección de personalización del motor de reservas no se aplican automáticamente a Immersive Experience; agrégalos al HTML de tu sitio en su lugar.

✔️ Página de pago: El paso de pago puede variar según el método de pago seleccionado.

⮕ Si el huésped elige Apple Pay, Google Pay u otra opción de pago de terceros, será redirigido a la página del tercero correspondiente para completar el pago.

⮕ Una vez que la transacción sea exitosa, será redirigido de vuelta a la página de confirmación de Immersive Experience.

✔️ Enlaces profundos/parámetros: Los parámetros de búsqueda se leen solo en la carga inicial. Si cambias la URL después de que la app se haya cargado, recarga la página para aplicarlos.

Portales

El motor de reservas renderiza varios elementos en una posición fija en la pantalla, por ejemplo:

Modales
Tooltips
Calendario
Comprobador de tarifas
Banner del carrito de compras (en móvil)
Selectores de idioma y moneda

Estos elementos se renderizan dentro de un Portal, lo que significa que, en lugar de seguir la estructura del árbol DOM, están envueltos por un elemento con la clase estática .cb-portal y se agregan al final del body. Los portales tienen diferentes valores de z-index según la capa correspondiente en nuestro contexto de apilamiento.

La mayoría de los sitios web tienen sus propios contextos de apilamiento, y dependiendo de cómo estén definidos en el eje z imaginario, pueden o no entrar en conflicto con los contextos de apilamiento de Immersive Experience.

Por ejemplo, si no están definidos correctamente, el Comprobador de tarifas de Immersive Experience podría mostrarse por encima del menú de navegación móvil del sitio web de la propiedad, o un elemento flotante del sitio web de la propiedad podría mostrarse por encima del botón “Reservar ahora” en el banner del carrito de compras en móvil, bloqueándolo y, por lo tanto, impidiendo que el usuario continúe con el proceso de reserva.

Por el momento, tenemos 4 tipos de portales: modal, popover, sticky y tooltip. El tipo de portal usado en cada caso depende del tipo de elemento para el que se utiliza el portal. Por lo tanto, todos los modales usarán un portal modal; el popover del Calendario y los selectores de idioma y moneda usan un portal popover; mientras que el banner del carrito de compras en móvil y el Comprobador de tarifas usan un portal sticky, por poner algunos ejemplos.

Según el tipo de portal, estos son los valores que Immersive Experience usa para la propiedad CSS z-index:

Modal:1400
Popover:1500
Sticky:1100
Tooltip:1800

Solución de problemas de superposición

Cuando tengas problemas con elementos renderizados por Immersive Experience que se estén superponiendo a otros elementos del sitio web padre, te recomendamos buscar el Portal (elemento con la clase estática .cb-portal ) que lo contiene y ajustar el valor de z-index según corresponda, o ajustar el valor de z-index del elemento del sitio web padre.

Los valores de z-index para los distintos tipos de portales renderizados por Immersive Experience podrán personalizarse redefiniendo las variables CSS usadas para este fin, como se muestra en el ejemplo a continuación:

<style>
/* Limita el alcance a la raíz del motor de reservas al sobrescribir */
.cb-bookingengine-root {
  --booking-engine-zIndices-sticky: 1100;
  --booking-engine-zIndices-modal: 1400;
  --booking-engine-zIndices-popover: 1500;
  --booking-engine-zIndices-tooltip: 1800;
}
</style>

The Rate Checker is included with all Cloudbeds Booking Engine packages except Legacy plans. Properties on active packages can enable it at no additional cost.

Parámetros de búsqueda

Immersive Experience admite los mismos parámetros de búsqueda que la versión alojada. Los parámetros solo se leen en la carga inicial y no se actualizan de forma dinámica.

Nombre	Tipo	Descripción	Ejemplo
adults	Número	Cantidad de adultos para la reserva, usada al buscar alojamientos disponibles.	adults=2
allotment_block_code	Cadena	Código del bloque de cupo (allotment) que se usa al obtener alojamientos para las fechas seleccionadas.	allotment_block_code=b123456
checkin	AAAA-MM-DD	Fecha seleccionada para el check-in.	checkin=2025-12-01
checkout	AAAA-MM-DD	Fecha seleccionada para el check-out. Si se proporciona checkin pero no checkout, se establece por defecto al día siguiente.	checkout=2025-12-01
currency	Código de moneda ISO-4217 de 3 letras	Moneda seleccionada. Si no se proporciona ninguna, el motor de reservas usa la predeterminada de la propiedad.	currency=brl
kids	Número	Cantidad de niños para la reserva, usada al buscar alojamientos disponibles.	kids=1
promo	Cadena	Código promocional que se usa al obtener alojamientos para las fechas seleccionadas.	promo=superpromo
rate_plan	Cadena separada por punto y coma	Filtra los resultados de alojamiento según los planes de tarifas; corresponde al “Nombre de plan de tarifas privado” en Cloudbeds PMS.	rate_plan=3DAYSTAY;LOWSEASON
rid	Cadena numérica separada por punto y coma	Lista de IDs de habitación para filtrar los resultados de alojamiento.	rid=27434;23421
room_type	Cadena de 3 letras separada por punto y coma	Corresponde a la “Abreviatura del alojamiento” en Cloudbeds PMS y se usa para filtrar los resultados de alojamiento. Si no se proporciona check-in ni checkout, el motor de reservas selecciona automáticamente mañana y el día siguiente.	room_type=PRI;SHA
utm_source	Cadena	Se usa para identificar el origen de la campaña de marketing (por ejemplo: Google, TripAdvisor, Trivago)	utm_source=Google

Seguimiento y analítica

Immersive Experience admite los mismos parámetros de búsqueda que la versión alojada. Los parámetros se leen desde la ubicación de la ventana solo en la carga inicial de la aplicación, lo que significa que los cambios dinámicos en los parámetros de búsqueda no tendrán impacto en Immersive Experience una vez cargada.

Además, Immersive Experience no actualiza la URL de la ventana como sí lo hace la versión alojada después de ciertas acciones del usuario (por ejemplo, seleccionar fechas de check-in y checkout).

Google Analytics 4 / GTM: El ID de etiqueta de Google o el ID del contenedor de GTM debe estar inicializado en el sitio web del hotel.
Google Ads: El seguimiento de conversiones requiere configuración manual en el sitio web de la propiedad.
Meta Pixel: El script de Meta Pixel debe agregarse en el HTML <head> para su inicialización.

Para obtener detalles adicionales de configuración, consulta la documentación de cada plataforma de seguimiento.

Agrega manualmente los scripts de Google Tag Manager (GTM) o Google Analytics 4 (GA4) al <head> de tu HTML para habilitar el seguimiento.

Parámetros de búsqueda de Google Hotel Ads

Estos parámetros los agrega Google Hotel Ads y el motor de reservas los envía al servidor en la solicitud al hacer una reserva:

Parámetro

gha_advance_booking_window

gha_campaign_id

gha_google_site

gha_is_ad_click

gha_is_click_type_hotel

gha_is_click_type_room

gha_is_hotel_campaign

gha_is_promoted

gha_length

gha_payment_id

gha_price_displayed_total

gha_promo_code

gha_user_country

gha_user_currency

gha_user_device

gha_user_language

gha_user_list_id

Personalización: atributos, parámetros de URL y estilos

Personaliza Immersive Experience usando atributos del componente, además de tu propio CSS/JS en tu sitio web.

El código personalizado puede requerir mantenimiento con el tiempo

A medida que evoluciona el motor de reservas, las personalizaciones aplicadas por cuenta propia pueden dejar de funcionar o requerir actualizaciones.
Siempre que sea posible, prueba los cambios en un entorno de staging o en una copia de borrador de tu sitio antes de publicarlo.

Atributos del componente para cb-immersive-experience y cb-book-now-button

Estos atributos se comparten tanto en los modos Estándar como Emergente (ver Integrar el motor de reservas).

Los siguientes atributos son opcionales (excepto property-code) y tanto los componentes web cb-immersive-experience como cb-book-now-button los admiten.

Nombre	Tipo	Obligatorio	Valor predeterminado	Descripción
*currency ()**	Código de moneda ISO-4217 de 3 letras	No	Moneda predeterminada de la propiedad	Moneda que se usará en la carga inicial de Immersive Experience.
disable-css-title-reset	yes \| no	No	no	Debe usarse yes si la propiedad quiere definir sus propias reglas CSS para los encabezados en la IU (h1… h6).
hide-custom-header	yes \| no	No	no	Oculta el encabezado personalizado definido en Cloudbeds PMS.
hide-custom-footer	yes \| no	No	no	Oculta el pie de página personalizado definido en Cloudbeds PMS.
hide-property-info	yes \| no	No	no	Oculta la sección de información de la propiedad en todas las páginas.
*ignore-search-params ()**	yes \| no	No	no	Por defecto, Immersive Experience lee los parámetros de consulta en la URL del sitio web anfitrión y los usa en la carga inicial de la aplicación. Admite los mismos parámetros que el motor de reservas alojado.
*lang ()**	auto-detect \| código de idioma ISO 639-1 de 2 letras	No	Idioma predeterminado de la propiedad.	Idioma que se usará en la carga inicial de Immersive Experience. Si no se proporciona, Immersive Experience verificará el atributo lang del HTML. Si tampoco está definido, se usará el idioma predeterminado de la propiedad. Si se proporciona el valor auto-detect, Immersive Experience se cargará en el idioma del navegador del usuario.
mode	standard \| popup	No	standard	Modo en el que debe renderizarse Immersive Experience. Debe usarse popup cuando Immersive Experience se renderiza dentro de un contenedor con altura fija o altura máxima.
*property-code ()**	Código alfanumérico de 6 dígitos que identifica tu propiedad.	Sí	—	Código alfanumérico de 6 dígitos que representa la propiedad. Es el mismo código de la URL del motor de reservas: https://hotels.cloudbeds.com/reservation/{PROPERTY_CODE}.

Los atributos marcados para la carga inicial solo se leen una vez cuando la app se inicia. Cambiarlos después en tu propiedad no afectará una instancia de Immersive Experience ya cargada.

Atributos personalizados del botón Reservar ahora

Estas opciones se aplican al componente cb-book-now-button (consulta la sección Integrar el motor de reservas) y te permiten dar estilo al botón y controlar la etiqueta y las dimensiones del pop-up.

Atributo	Descripción
class-name	Clase CSS para dar estilo al botón.
close-label	Etiqueta personalizada para el botón de cerrar.
height	Altura del pop-up.
width	Ancho del pop-up.

Ejemplo del botón Reservar ahora con etiqueta, tamaño y clase CSS:

<cb-book-now-button
  property-code="{PROPERTY_CODE}"
  class-name="cb-book-now-button"
  label="Book Now"
  height="90vh"
  width="90vw"
/>

Agregar CSS y JavaScript personalizados para Immersive Experience

El CSS o JavaScript personalizado agregado en los campos de personalización del motor de reservas no se aplica automáticamente a Immersive Experience. Deben agregarse manualmente al documento HTML.

Agrega el atributo data-cb-immersive-experience-root a las etiquetas de estilo y script para evitar conflictos.

Ejemplo de CSS personalizado:

<style data-cb-immersive-experience-root>
  :is(#cb-bookingengine, .cb-bookingengine-root) {
    h1 {
      font-family: serif;
      font-size: 24px;
    }
  }
</style>