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

Introducción

La Experiencia inmersiva 2.0 del motor de reservas de Cloudbeds integra el proceso de reserva directamente en el sitio web de tu establecimiento sin recurrir al enmascaramiento mediante iframes. Debes autorizar tu sitio web a través de la lista de dominios permitidos e instalar el script de carga compatible en el HTML del sitio web para que el componente web pueda mostrarse.

Usa esta guía para realizar la implementación y conocer las consideraciones técnicas que pueden afectar el flujo de reserva, incluidas las plataformas de gestión del consentimiento (CMP), los creadores de sitios web, el seguimiento, los parámetros de búsqueda y los estilos personalizados. Para obtener información general sobre el motor de reservas, consulta Motor de reservas de Cloudbeds: todo lo que debes saber.

Índice

• Acerca de la Experiencia inmersiva 2.0
• Instalar la Experiencia inmersiva 2.0
• Consentimiento de cookies y configuración de la CMP
• Consideraciones de configuración y solución de problemas
• Parámetros de búsqueda y seguimiento
• Personalizar la Experiencia inmersiva 2.0

Acerca de la Experiencia inmersiva 2.0

La Experiencia inmersiva 2.0 del motor de reservas de Cloudbeds es un componente web que permite a los huéspedes consultar la disponibilidad, seleccionar habitaciones y tarifas, ingresar los datos del huésped y completar el pago directamente desde el sitio web de tu establecimiento. Puedes implementarla como una experiencia de página completa o abrirla desde un botón Reservar ahora.

Beneficios principales

La Experiencia inmersiva 2.0  incorpora 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 basado en datos: Accede a métricas e información clave para optimizar tu proceso de reserva 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 web frente a componentes basados en iframes

A diferencia de los sistemas basados en iframes, este componente web integrado 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 web desde la búsqueda inicial hasta la finalización del pago

Cómo se ve

La Experiencia inmersiva 2.0 ofrece dos opciones flexibles de incrustación que se adaptan al diseño del sitio web de tu establecimiento y al recorrido del usuario. Puedes elegir entre incrustar una Experiencia inmersiva de página completa o crear e incrustar una ventana emergente con la Experiencia inmersiva.

• La incrustación de página completa funciona tal como indica el nombre: coloca el motor de reservas completo directamente en una página de tu sitio web y ofrece a los huéspedes un proceso de reserva ininterrumpido y totalmente inmersivo de principio a fin. 

La incrustación de página completa mantiene al huésped en el sitio web del establecimiento mientras busca habitaciones disponibles, revisa las tarifas y prepara la reserva.

Durante el proceso de pago, los huéspedes ingresan los datos de contacto, la información adicional opcional, los huéspedes adicionales y las preferencias de comunicación sin salir del flujo de reserva incrustado.

Antes de completar la reserva, los huéspedes pueden revisar las políticas de check-in, check-out y cancelación del establecimiento, además de otros términos y condiciones.

• La incrustación en ventana 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 y ofrece una experiencia de reserva compacta y completamente funcional sin salir de la página actual.

Con la implementación en ventana emergente, el huésped abre la Experiencia inmersiva desde el botón Reservar ahora del establecimiento, mientras el sitio web original permanece visible detrás del panel de reservas.

El flujo de reserva incluye:

• Búsqueda de disponibilidad
• Selección de habitaciones
• Visualización de tarifas
• Oportunidades de venta adicional
• Ingreso de información del huésped
• Procesamiento seguro de pagos

Precios y disponibilidad

El acceso a la Experiencia inmersiva 2.0 depende de tu suscripción de Cloudbeds. Si las incrustaciones premium están incluidas en tu paquete, puedes acceder a la Experiencia inmersiva 2.0 desde la sección Premium de la pestaña Incrustaciones.

Si las incrustaciones premium no están incluidas en tu paquete, la sección Premium puede mostrar la opción Contactar a ventas. Haz clic en Contactar a ventas para solicitar más información sobre cómo cambiar a un paquete que incluya las incrustaciones premium.

Métodos de pago personalizados y compatibilidad con procesadores de pagos

• Recomendaciones sobre la compatibilidad con procesadores de pagos: No recomendamos usar procesadores de pagos no compatibles en la Experiencia inmersiva. Cuando los procesadores de pagos operan fuera de un dominio de Cloudbeds, no tenemos control sobre la seguridad ni el cumplimiento de PCI.
• Limitaciones actuales: Los métodos de pago personalizados solo deben usarse en entornos alojados por el momento.
• Compatibilidad futura: El equipo de Cloudbeds Payments está trabajando para ofrecer compatibilidad oficial con estos procesadores de pagos mediante conexiones personalizadas en la interfaz de usuario del PMS. El lanzamiento de esta función está previsto para 2026. Los clientes recibirán información más precisa sobre los plazos a medida que se acerque la fecha de lanzamiento.
• Canal de soporte: Para recibir orientación específica sobre la implementación o resolver preguntas sobre métodos de pago personalizados, comunícate directamente con nuestro equipo de Cloudbeds Payments. Este equipo gestiona todo el SDK de pagos y es el más indicado para ayudarte.

Instalar la Experiencia inmersiva 2.0

Completa la configuración que se indica a continuación para autorizar el dominio de tu sitio web, cargar el script compatible de la Experiencia inmersiva y añadir el componente del motor de reservas a tu sitio web. Los pasos se aplican tanto a la implementación de página completa como a la del botón Reservar ahora.

Paso 1: Confirma el acceso a las incrustaciones premium

Paso 2: Añade tu dominio a la lista de dominios permitidos

Añade el dominio donde instalarás la Experiencia inmersiva 2.0 en la sección Dominios permitidos de la incrustación premium seleccionada. Puedes añadir hasta 5 dominios.

1. En el Menú de cuenta , selecciona Configuración
2. Haz clic en Motor de reservas
3. Haz clic en la pestaña Incrustaciones.
4. En la sección Premium, selecciona la opción de Experiencia inmersiva que quieras instalar.
5. En la tarjeta Dominios permitidos, haz clic en Añadir dominio.
6. Ingresa el dominio donde se instalará la Experiencia inmersiva y guarda los cambios.

Paso 3: Añade el script de la Experiencia inmersiva

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

<script
  data-entry="immersive"
  src="https://static1.cloudbeds.com/booking-engine/latest/loader.js"
  nonce="+imGC13HmyB6zTZ1eTnZMw=="
  integrity="sha384-hd98w88pqnDT+lRLwyII/mRmbacols+VWYZF3HKdxnIlTYO+cF38GA1/I/+V8U4a"
  crossorigin="anonymous"
  type="text/plain"
  data-categories="essential"
></script>

Paso 4: Incrusta el motor de reservas

Puedes mostrar la Experiencia inmersiva de dos maneras:

• Modo estándar (incrustación de página completa): También conocido como «incrustación de página completa», 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 incrustarla, incluye el siguiente fragmento en el HTML donde deba mostrarse:

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

• Modo emergente (botón Reservar ahora): Este modo muestra la aplicación del motor de reservas como una ventana emergente con posición fija y superposición. Para añadir un botón Reservar ahora que abra la Experiencia inmersiva en una ventana emergente:

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

Consentimiento de cookies y configuración de la CMP

Si tu sitio web usa una plataforma de gestión del consentimiento (CMP), configura la Experiencia inmersiva para que los recursos necesarios de Cloudbeds se clasifiquen como esenciales y no se bloqueen antes de que pueda cargarse el flujo de reserva. Sigue las instrucciones de configuración específicas del proveedor que se indican a continuación antes de publicar los cambios del sitio web.

Usa la configuración específica del proveedor que corresponda a tu CMP:

• Cookiebot: data-cookieconsent="ignore"
• OneTrust: data-ignore-consent="true"
• Quantcast: data-quantcast-ignore="true"
• Termly: Añade el siguiente mapa de bloqueo personalizado antes del script de Termly, preferiblemente cerca del inicio del HTML.

<script data-termly-config>
 window.TERMLY_CUSTOM_BLOCKING_MAP = {
  "cloudbeds.com": "essential",
  "clientstream.launchdarkly.com": "essential",
  "clientsdk.launchdarkly.com": "essential",
  "tile.openstreetmap.org": "essential",
  "tokenex.com": "essential",
  "stripe.com": "essential",
  "stripe.network": "essential",
  "braintreegateway.com": "essential",
  "dlocal.com": "essential",
  "authorize.net": "essential",
  "pagosonline.net": "essential",
  "paypal.com": "essential",
  "adyen.com": "essential"
 };
</script>

Clasifica el script de carga de la Experiencia inmersiva como necesario o esencial en la configuración de tu CMP. Usa el punto de entrada actual del script de carga que se muestra a continuación. El uso directo de cb-immersive-experience.js está obsoleto.

<script
  data-entry="immersive"
  src="https://static1.cloudbeds.com/booking-engine/latest/loader.js"
  nonce="+imGC13HmyB6zTZ1eTnZMw=="
  integrity="sha384-hd98w88pqnDT+lRLwyII/mRmbacols+VWYZF3HKdxnIlTYO+cF38GA1/I/+V8U4a"
  crossorigin="anonymous"
  type="text/plain"
  data-categories="essential"
></script>

Consideraciones de configuración y solución de problemas

Las siguientes secciones describen el comportamiento y los detalles de implementación que conviene conocer antes de publicar.

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

Parámetros de búsqueda y seguimiento

La Experiencia inmersiva puede leer los parámetros de búsqueda compatibles cuando la aplicación se carga por primera vez y puede funcionar con herramientas de analítica y publicidad instaladas en el sitio web. Consulta las siguientes secciones de referencia cuando necesites pasar valores de búsqueda, configurar el seguimiento o comprender los parámetros de Google Hotel Ads.

Personalizar la Experiencia inmersiva 2.0

Adapta la Experiencia inmersiva mediante los atributos del componente y tu propio código CSS/JS en el sitio web.

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

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

Siguiente paso operativo

Después de instalar y probar la Experiencia inmersiva 2.0 en tu dominio autorizado, consulta la guía de la pestaña Incrustaciones del motor de reservas de Cloudbeds cuando necesites comparar o configurar otras opciones de incrustación.