Información general
El Motor de reservas de Cloudbeds Experiencia inmersiva 2.0 es una solución de reservas moderna y totalmente basada en la web que ofrece una experiencia de reserva fluida y fácil de usar para los huéspedes directamente en el sitio web de tu propiedad. Facilita pagos seguros y compatibles con PCI, e incorpora el seguimiento de datos de compatibilidad con Google para obtener información desde la visualización de la página hasta la compra.
Como componente basado en la web, la Experiencia inmersiva 2.0 elimina la necesidad de incluir en listas blancas o de usar procesos complejos de enmascaramiento. En su lugar, simplifica la integración mediante una inserción sencilla que se integra perfectamente en el sitio web de tu propiedad, manteniendo tanto la consistencia del diseño como la facilidad de implementación.
Esta guía ofrece una visión completa del Motor de reservas de Cloudbeds Experiencia inmersiva 2.0 y detalla sus funciones principales, ventajas técnicas y recomendaciones de seguridad. A continuación, encontrarás información sobre precios, detalles importantes sobre el soporte de gateways de pago y una guía técnica paso a paso para una instalación exitosa en el sitio web de tu propiedad.
En este artículo:
Una experiencia de reserva mejorada
La Experiencia inmersiva 2.0 introduce 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 generan más reservas.
- Más personalización: crea una experiencia única y memorable para los huéspedes sin las limitaciones de un iframe estándar.
- Crecimiento impulsado por datos: accede a métricas e información clave para optimizar tu proceso de reservas y aumentar las reservas directas.
- Mayor confianza: el flujo de reserva seguro y fluido genera confianza en los huéspedes y los anima a completar el proceso de reserva.
Componentes basados en la web vs. basados en iframe
A diferencia de los sistemas basados en iframe, este componente integrado basado en la web ofrece:
- Tiempos de carga del sitio web más rápidos
- Mayor personalización de la marca
- Un flujo de reserva unificado que garantiza que los huéspedes permanezcan en el sitio desde su búsqueda inicial hasta la finalización del pago
Cómo se ve
La Experiencia inmersiva 2.0 ofrece dos opciones flexibles de inserción para adaptarse al diseño del sitio web y al flujo de usuario de tu propiedad. Puedes optar por insertar una Experiencia inmersiva de página completa o crear e insertar una Experiencia inmersiva emergente.
- La inserción de página completa funciona exactamente como su nombre indica: coloca el motor de reservas completo directamente dentro de una página de tu sitio web, ofreciendo a los huéspedes una experiencia de reserva continua y totalmente inmersiva 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 seguro de pagos
Precios y disponibilidad
Cloudbeds Booking Engine Plus está incluido en todas las suscripciones de Cloudbeds sin costo adicional para las propiedades incluidas en la primera fase de implementación. La Experiencia inmersiva 2.0 usa el mismo flujo de reservas, pero ofrece una forma mejorada de insertarlo directamente en tu sitio web.
El hecho de que la Experiencia inmersiva 2.0 tenga un costo adicional depende de tu suscripción y del programa de migración actual:
- Durante la transición desde los iframes heredados y la Experiencia inmersiva 1.0, muchas propiedades tuvieron habilitada la Experiencia inmersiva 2.0 sin costo adicional como parte de la actualización.
- Fuera de estos programas, la Experiencia inmersiva 2.0 puede ofrecerse como un complemento de pago, aplicado a la factura habitual de Cloudbeds de la propiedad.
Cloudbeds proporcionará comunicación clara y anticipada sobre cualquier actualización futura de precios antes de que los cambios entren en vigor.
Métodos de pago personalizados y soporte de gateways
- Recomendaciones de soporte para gateways: No recomendamos usar gateways de pago no compatibles en la Experiencia inmersiva. Una vez que los gateways ya no estén en un dominio de Cloudbeds, no tendremos control sobre la seguridad ni sobre el cumplimiento de PCI.
- Limitaciones actuales: Los métodos de pago personalizados solo deben usarse en entornos alojados por ahora.
- Soporte futuro: El equipo de Cloudbeds Payments está trabajando para ofrecer soporte oficial para estos gateways mediante conexiones personalizadas dentro de la IU del PMS (interfaz de usuario). Está previsto que esta función se lance en 2026. Los clientes pueden esperar más detalles sobre el calendario a medida que se acerque la fecha de entrega.
- Canal de soporte: Para recibir orientación específica sobre la implementación o resolver preguntas relacionadas con métodos de pago personalizados, comunícate directamente con nuestro equipo de Cloudbeds Payments. Ellos gestionan todo el SDK de pagos y son quienes mejor pueden ayudarte.
Cómo instalar la Experiencia inmersiva 2.0
Para garantizar una implementación fluida, sigue los pasos técnicos a continuación para incluir tu dominio en la lista blanca e insertar los scripts necesarios. Este proceso está diseñado para integrar perfectamente el flujo de reservas en tu sitio, manteniendo al mismo tiempo la seguridad y el rendimiento.
Nota: Cualquier valor mostrado como {PARAMETER} en este artículo es un marcador de posición. Sustitúyelo por tu valor real y elimina las llaves ({ }).
Importante:
- La Experiencia inmersiva se ha probado en sitios web personalizados. Los sitios basados en plantillas o sin código creados con plataformas de creación de sitios pueden manejar los scripts personalizados de manera diferente, lo que podría afectar la funcionalidad.
-
No uses etiquetas de componentes web de la Experiencia inmersiva 2.0 dentro de iframes.
- Esta configuración puede causar problemas de desplazamiento y requeriría incluir en lista blanca cada elemento de la cadena del iframe, una configuración que no se recomienda.
- Lista de mejores prácticas cuando un usuario utiliza una CMP:
- Agrega la Experiencia inmersiva al inicio de la etiqueta head antes de la etiqueta de la CMP e incluye el atributo que evita que se bloquee. Es mejor no especificarlo 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 de la CMP; de nuevo, 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>
- Agrega la Experiencia inmersiva al inicio de la etiqueta head antes de la etiqueta de la CMP e incluye el atributo que evita que se bloquee. Es mejor no especificarlo todo en la documentación, ya que puede variar según la plataforma.
Pasos de instalación
Para habilitar la Experiencia inmersiva 2.0 en el sitio web de tu propiedad, sigue los pasos a continuación.
Paso 1: activar los dominios permitidos
- Para comenzar la instalación de la Experiencia inmersiva 2.0 y maximizar tu experiencia de reserva, ve a Allowed Domains en la configuración de tus widgets del sitio web. Si la opción no está disponible, comunícate con nuestro equipo de soporte para solicitar su activación.
- 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: incluye tu dominio en la lista blanca
Una vez que nuestro equipo de soporte habilite la configuración correspondiente, verás la sección Allowed Domains en tu PMS.
- En tu menú de cuenta
, selecciona Configuración
- Haz clic en Motor de reservas
- Ve a Widgets del sitio web y, en la sección Allowed domains, agrega el o los dominios donde instalarás la Experiencia inmersiva. Puedes agregar hasta 5 dominios.
Se admiten tanto dominios principales como subdominios (por ejemplo,my-hotel.com y booking.my-hotel.com).
Lista blanca de dominios permitidos: cómo verificar el formato correcto del dominio
A veces, el dominio de un sitio web puede estar configurado de una manera que requiere incluir el www. Para contemplar ambas posibilidades, 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 lista blanca de Cloudbeds. Por ejemplo, si tu sitio se muestra con www, entonces debes incluir tu dominio en la lista blanca como www.yourdomain.com.
Por qué es necesario incluir los dominios en la lista blanca
La Experiencia inmersiva es un componente web (no un iframe). Se ejecuta en tu sitio y realiza solicitudes de API a los servicios de Cloudbeds desde tu dominio. La inclusión en lista blanca le indica a Cloudbeds qué orígenes están autorizados para que esas solicitudes entre dominios sean aceptadas.
Paso 3: agrega el script de la Experiencia inmersiva
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 una CMP (integración de cumplimiento de cookies) en tu sitio web. Si usas una CMP, deberás verificar que el atributo (por ejemplo, "data-cookieconsent=ignore") esté ajustado para cumplir con la configuración de atributos de tu CMP específica.
Paso 4: inserta el Motor de reservas
Puedes renderizar la Experiencia inmersiva de dos maneras:
- Modo estándar (inserción de página completa): también conocido como “inserción de página completa”, este es el modo predeterminado en el que la aplicación del Motor de reservas se integra por completo en el sitio web anfitrión. Para insertarlo, 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 aplicación del Motor de reservas como una ventana emergente con posición fija y superposición. Para agregar un botón de Reservar ahora que abra la Experiencia inmersiva en una ventana emergente:
<cb-book-now-button property-code="{PROPERTY_CODE}" />Si omites el atributo mode, el componente usará standard de forma predeterminada.
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 del enlace de tu Motor de reservas:
https://hotels.cloudbeds.com/reservation/{PROPERTY_CODE}
En el siguiente ejemplo, 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 siguientes secciones destacan detalles de comportamiento e implementación que conviene conocer antes de publicar el sitio.
Compatibilidad con creadores de sitios
La Experiencia inmersiva se ha probado en sitios web personalizados. Los creadores de sitios basados en plantillas o sin código pueden manejar los scripts personalizados de forma diferente, lo que podría afectar la funcionalidad.
✔️ Inserción en el head: confirma que puedes agregar el <script> de la Experiencia inmersiva en el <head> de la página.
✔️ Inclusión en lista blanca: asegúrate de que tus dominios en producción (y cualquier dominio de staging o preview) estén agregados en Allowed Domains para que se acepten las solicitudes de API (hasta 5 dominios).
✔️ CSS/JS personalizados: los estilos o scripts agregados en la sección de personalización del Motor de reservas no se aplican automáticamente a la Experiencia inmersiva; agrégalos directamente al HTML de tu sitio.
✔️ 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 correspondiente del tercero para completar el pago.
⮕ Una vez que la transacción se complete correctamente, será redirigido de vuelta a la página de confirmación de la Experiencia inmersiva.
✔️ Enlaces profundos/parámetros: los parámetros de búsqueda solo se leen en la carga inicial. Si cambias la URL después de que la aplicación se haya cargado, vuelve a cargar 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
- Verificador de tarifas
- Banner del carrito de compra (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 distintos 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 según cómo estén definidos en el eje z imaginario, pueden o no entrar en conflicto con los contextos de apilamiento de la Experiencia inmersiva.
Por ejemplo, si no están definidos correctamente, el verificador de tarifas de la Experiencia inmersiva podría mostrarse por encima del menú de navegación móvil del sitio web de la propiedad, o bien un elemento flotante del sitio web de la propiedad podría mostrarse por encima del botón “Reservar ahora” del banner del carrito de compra en móvil, bloqueándolo y, por lo tanto, impidiendo que el usuario continúe con el proceso de reserva.
En este momento, tenemos 4 tipos de portales: modal, popover, sticky y tooltip. El tipo de portal utilizado en cada caso depende del tipo de elemento para el que se usa. Por lo tanto, todos los modales usarán un portal modal, el popover del calendario y los selectores de idioma y moneda usan un popover, mientras que el banner del carrito de compra en móvil y el verificador de tarifas usan un sticky, por poner algunos ejemplos.
Según el tipo de portal, estos son los valores que la Experiencia inmersiva usa para la propiedad CSS z-index:
- Modal:1400
- Popover:1500
- Sticky:1100
- Tooltip:1800
Solución de problemas de superposición
Cuando haya problemas con elementos renderizados por la Experiencia inmersiva que se superponen con otros elementos del sitio web principal, 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 principal.
Los valores de z-index para los distintos tipos de portales renderizados por la Experiencia inmersiva se podrán personalizar simplemente redefiniendo las variables CSS utilizadas para este fin, como se muestra en el siguiente ejemplo:
<style>
/* Scope to the Booking Engine root when overriding */
.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
La Experiencia inmersiva 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 dinámicamente.
Nombre |
Tipo |
Descripción |
Ejemplo |
| adults | Número | La cantidad de adultos de la reserva, usada al buscar alojamientos disponibles. | adults=2 |
| allotment_block_code | Cadena | El código del bloque de allotment que se usará al obtener los alojamientos para las fechas seleccionadas. | allotment_block_code=b123456 |
| checkin | AAAA-MM-DD | La fecha seleccionada para el check-in. | checkin=2025-12-01 |
| checkout | AAAA-MM-DD | La fecha seleccionada para el check-out. Si se proporciona checkin pero no checkout, el valor predeterminado será el 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 | La cantidad de niños de la reserva, usada al buscar alojamientos disponibles. | kids=1 |
| promo | Cadena | Código promocional que se usará al obtener alojamientos para las fechas seleccionadas. | promo=superpromo |
| rate_plan | Cadena separada por punto y coma | Para filtrar los resultados de alojamiento según los planes tarifarios; corresponde al “Nombre del plan tarifario privado” en el PMS. | rate_plan=3DAYSTAY;LOWSEASON |
| rid | Cadena numérica separada por punto y coma | Lista de ID de habitaciones para filtrar resultados de alojamiento. | rid=27434;23421 |
| room_type | Cadena de 3 letras separada por punto y coma | Corresponde a la “Abreviatura del alojamiento” en el PMS y se usa para filtrar los resultados de alojamiento. Si no se proporcionan check-in y check-out, el Motor de reservas selecciona automáticamente mañana y el día siguiente. | room_type=PRI;SHA |
| utm_source | Cadena | Se usa para conocer la fuente de la campaña de marketing (por ejemplo: Google, TripAdvisor, Trivago) | utm_source=Google |
Seguimiento y analítica
La Experiencia inmersiva admite los mismos parámetros de búsqueda que la versión alojada. Los parámetros se leen de la ubicación de la ventana solo durante 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 la Experiencia inmersiva una vez que se haya cargado.
Además, la Experiencia inmersiva no actualiza la URL de la ventana como sí lo hace la versión alojada después de ciertas acciones del usuario (por ejemplo, al seleccionar fechas de check-in y check-out).
- Google Analytics 4 / GTM: el ID de etiqueta de Google o el ID del contenedor de GTM deben estar inicializados en el sitio web del hotel.
- Google Ads: el seguimiento de conversiones requiere una configuración manual en el sitio web de la propiedad.
- Meta Pixel: el script de Meta Pixel debe agregarse en el <head> del HTML para su inicialización.
Para obtener más detalles 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
Google Hotel Ads agrega estos parámetros y el Motor de reservas los envía al servidor en la solicitud al realizar 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 la Experiencia inmersiva usando atributos del componente, además de tu propio CSS/JS en tu sitio web.
Los códigos personalizados pueden requerir mantenimiento con el tiempo
- A medida que el Motor de reservas evoluciona, las personalizaciones aplicadas por tu cuenta pueden dejar de funcionar o requerir actualizaciones.
- Siempre que sea posible, prueba los cambios en un entorno de staging o en un borrador de tu sitio antes de publicarlos.
Atributos del componente para cb-immersive-experience y cb-book-now-button
Estos atributos son compartidos por los modos Estándar y Emergente (consulta Insertar el Motor de reservas).
Los siguientes atributos son todos 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 | La moneda que se usará para la carga inicial de la Experiencia inmersiva. |
| disable-css-title-reset | yes | no | No | no | yes debe usarse si la propiedad quiere definir sus propias reglas CSS para los encabezados de la IU (h1… h6). |
| hide-custom-header | yes | no | No | no | Para ocultar el encabezado personalizado definido en el PMS. |
| hide-custom-footer | yes | no | No | no | Para ocultar el pie de página personalizado definido en el PMS. |
| hide-property-info | yes | no | No | no | Para ocultar la sección Información de la propiedad en todas las páginas. |
| ignore-search-params (*) | yes | no | No | no | De forma predeterminada, la Experiencia inmersiva 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 de 2 letras ISO 639-1 | No | Idioma predeterminado de la propiedad. | El idioma que se usará en la carga inicial de la Experiencia inmersiva. Si no se proporciona ninguno, la Experiencia inmersiva revisará el atributo lang del HTML; si tampoco está definido, se usará el idioma predeterminado de la propiedad. Si se proporciona el valor auto-detect, la Experiencia inmersiva se cargará en el idioma del navegador del usuario. |
| mode | standard | popup | No | standard | El modo en el que se debe renderizar la Experiencia inmersiva. Se debe usar popup cuando la Experiencia inmersiva 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í | — | El 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 aplicación se inicia. Cambiarlos después en tu propiedad no afectará una Experiencia inmersiva que ya esté cargada.
Atributos personalizados del botón Reservar ahora
Estas opciones se aplican al componente cb-book-now-button (consulta la sección Insertar el Motor de reservas) y te permiten dar estilo al botón y controlar la etiqueta y las dimensiones de la ventana emergente.
Atributo |
Descripción |
| class-name | Clase CSS para dar estilo al botón. |
| close-label | Etiqueta personalizada para el botón de cierre. |
| height | Altura de la ventana emergente. |
| width | Ancho de la ventana emergente. |
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="Reservar ahora"
height="90vh"
width="90vw"
/>Agregar CSS y JavaScript personalizados para la Experiencia inmersiva
El CSS o JavaScript personalizado agregado en los campos de personalización del Motor de reservas no se aplica automáticamente a la Experiencia inmersiva. Debe agregarse manualmente al documento HTML.
Agrega el atributo data-cb-immersive-experience-root a las etiquetas style 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>
Comentarios
Inicie sesión para dejar un comentario.