Configurer et personnaliser Cloudbeds Booking Engine Immersive Experience 2.0

Introduction

Immersive Experience 2.0 du Cloudbeds Booking Engine intègre le parcours de réservation directement dans le site web de ton établissement sans utiliser de masquage basé sur iframe. Ton site web doit être autorisé via une Liste d’autorisation de domaines, et le script chargeur supporté doit être installé dans le code HTML du site avant que le composant web puisse s’afficher.

Utilise ce guide pour la mise en œuvre elle-même ainsi que pour les considérations techniques pouvant affecter le flux de réservation, notamment les plateformes de gestion du consentement (CMP), les créateurs de sites, le suivi, les paramètres de recherche et le style personnalisé. Pour un aperçu général du moteur de réservation, consulte Cloudbeds Booking Engine : Tout ce que tu dois savoir.

Table des matières

• À propos d’Immersive Experience 2.0
• Installer Immersive Experience 2.0
• Consentement aux cookies et configuration CMP
• Considérations de configuration et dépannage
• Paramètres de recherche et suivi
• Personnaliser Immersive Experience 2.0

À propos d’Immersive Experience 2.0

Cloudbeds Booking Engine Immersive Experience 2.0 est un composant web qui permet aux clients de rechercher la disponibilité, de sélectionner des chambres et des tarifs, de saisir leurs informations et de finaliser le paiement directement depuis le site web de ton établissement. Il peut être mis en œuvre comme une expérience en pleine page ou s’ouvrir depuis un bouton Réserver maintenant.

Principaux avantages

Immersive Experience 2.0 introduit des fonctionnalités uniques conçues pour améliorer l’expérience de réservation de tes clients sur ton propre site web :

• Taux de conversion plus élevés : moins de clics, des temps de chargement plus rapides et une expérience de marque cohérente génèrent plus de réservations.
• Plus de personnalisation : crée une expérience client unique et mémorable sans les contraintes d’un iframe standard.
• Croissance basée sur les données : accède aux métriques clés et aux analyses pour optimiser ton processus de réservation et augmenter les réservations directes.
• Confiance accrue : le flux de réservation sécurisé et fluide renforce la confiance des clients, les encourageant à finaliser leur réservation.

Composants web vs. basés sur iframe

Contrairement aux systèmes basés sur iframe, ce composant web intégré offre :

• Des temps de chargement plus rapides du site web
• Une personnalisation de marque améliorée
• Un flux de réservation unifié qui garantit que les clients restent sur le site depuis leur recherche initiale jusqu’au paiement

À quoi ça ressemble

Immersive Experience 2.0 propose deux options d’intégration flexibles pour s’adapter au design du site de ton établissement et au parcours utilisateur. Tu peux choisir d’intégrer une expérience en pleine page ou de créer et intégrer une expérience Immersive sous forme de pop-up.

• L’intégration en pleine page fonctionne exactement comme son nom l’indique : elle place le moteur de réservation complet directement au sein d’une page de ton site web, offrant aux clients un parcours de réservation fluide et totalement immersif du début à la fin.

L’intégration en pleine page maintient le client sur le site de l’établissement pendant qu’il recherche des hébergements disponibles, consulte les tarifs et construit sa réservation.

Lors du check-out, les clients saisissent leurs coordonnées, des informations supplémentaires facultatives, des invités additionnels, ainsi que leurs préférences de communication sans quitter le flux de réservation intégré.

Avant de finaliser la réservation, les clients peuvent consulter les conditions générales de l’établissement concernant le check-in, le check-out, l’annulation, et autres.

• L’option d’intégration en pop-up offre une alternative élégante et moderne. Lorsqu’un client clique sur le bouton « Réserver maintenant », un panneau latéral glisse en douceur depuis le bord de l’écran, proposant une expérience de réservation compacte mais entièrement fonctionnelle sans quitter la page en cours.

Dans cette mise en œuvre en pop-up, le client ouvre l’Immersive Experience depuis le bouton Réserver maintenant de l’établissement tandis que le site original reste visible derrière le panneau de réservation.

Le flux de réservation inclut :

• Recherche de disponibilité
• Sélection de la chambre
• Affichage des tarifs
• Opportunités de vente additionnelle
• Saisie des informations client
• Traitement sécurisé du paiement

Tarification et disponibilité

L’accès à Immersive Experience 2.0 dépend de ton abonnement Cloudbeds. Si les Intégrations premium sont incluses dans ton forfait, tu peux accéder à Immersive Experience 2.0 depuis la section Premium de l’onglet Intégrations.

Si les Intégrations premium ne sont pas incluses dans ton forfait, la section Premium peut afficher une option Contacter les ventes. Clique sur Contacter les ventes pour demander plus d’informations sur la mise à niveau vers un forfait incluant les Intégrations premium.

Méthodes de paiement personnalisées et prise en charge des passerelles

• Recommandations pour le support des passerelles : Nous ne recommandons pas d’utiliser des passerelles de paiement non prises en charge dans Immersive Experience. Une fois que les passerelles ne sont plus sur un domaine Cloudbeds, nous n’avons aucun contrôle sur la sécurité ni la conformité PCI.
• Limitations actuelles : Les modes de paiement personnalisés doivent être utilisés uniquement dans des environnements hébergés pour le moment.
• Support futur : L’équipe Cloudbeds Payments travaille à fournir un support officiel pour ces passerelles via des connexions personnalisées dans l’interface utilisateur du PMS. Cette fonctionnalité est prévue pour une sortie en 2026. Les clients recevront des informations plus précises sur le calendrier à l’approche de la date de livraison.
• Voie de support : Pour des conseils spécifiques à la mise en œuvre ou des questions concernant les modes de paiement personnalisés, contacte directement notre équipe Cloudbeds Payments. Ils gèrent l’ensemble du SDK de paiements et sont les mieux placés pour t’aider.

Installer Immersive Experience 2.0

Complète la configuration ci-dessous pour autoriser le domaine de ton site web, charger le script Immersive Experience supporté, et ajouter le composant moteur de réservation à ton site. Ces étapes s’appliquent aussi bien à l’implémentation en pleine page qu’au bouton Réserver maintenant.

Étape 1 : Confirmer l’accès aux Intégrations premium

Étape 2 : Ajoute ton domaine aux domaines autorisés

Ajoute le domaine où tu vas installer Immersive Experience 2.0 dans la section Domaines autorisés de l’Intégration premium sélectionnée. Tu peux ajouter jusqu’à 5 domaines.

1. Depuis ton Menu Compte , sélectionne Paramètres
2. Clique sur moteur de réservation
3. Clique sur l’onglet Intégrations.
4. Dans la section Premium, sélectionne l’option Immersive Experience que tu souhaites installer.
5. Dans la carte Domaines autorisés, clique sur Ajouter un domaine.
6. Saisis le domaine où Immersive Experience sera installé, puis enregistre tes modifications.

Étape 3 : Ajouter le script de l’Expérience Immersive

Ajoute le script suivant dans l’élément <head> du document HTML de ton site :

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

Étape 4 : Intégrer le moteur de réservation

Tu peux afficher l’Expérience Immersive de deux façons :

• Mode standard (intégration pleine page) : Aussi appelé « intégration pleine page », c’est le mode par défaut où l’application du moteur de réservation est entièrement intégrée dans le site hôte. Pour l’intégrer, inclue le fragment suivant dans le HTML à l’endroit où il doit s’afficher :

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

• Mode popup (bouton Réserver maintenant) : Ce mode affiche l’application du moteur de réservation sous forme de popup avec une position fixe et une superposition. Pour ajouter un bouton Réserver maintenant qui ouvre l’Expérience Immersive dans une popup :

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

Consentement aux cookies et configuration du CMP

Si ton site web utilise une plateforme de gestion du consentement (CMP), configure l’expérience immersive pour que les ressources Cloudbeds nécessaires soient considérées comme essentielles et ne soient pas bloquées avant le chargement du processus de réservation. Suis la configuration spécifique à ton fournisseur avant de publier les modifications du site.

Utilise le paramètre spécifique au fournisseur qui correspond à ton CMP :

• Cookiebot : data-cookieconsent="ignore"
• OneTrust : data-ignore-consent="true"
• Quantcast : data-quantcast-ignore="true"
• Termly : ajoute la carte de blocage personnalisée ci-dessous avant le script Termly, de préférence près du début du 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>

Classe le chargeur de l’expérience immersive comme nécessaire ou essentiel dans la configuration de ton CMP. Utilise le point d’entrée actuel du chargeur ci-dessous. L’utilisation directe de cb-immersive-experience.js est obsolète.

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

Considérations de configuration et dépannage

Les sections ci-dessous mettent en avant des comportements et des détails de mise en œuvre utiles à connaître avant la mise en production.

<style>
/* Portée à la racine du moteur de réservation lors de la redéfinition */
.cb-bookingengine-root {
  --booking-engine-zIndices-sticky: 1100;
  --booking-engine-zIndices-modal: 1400;
  --booking-engine-zIndices-popover: 1500;
  --booking-engine-zIndices-tooltip: 1800;
}
</style>

Paramètres de recherche et suivi

Immersive Experience peut lire les paramètres de recherche pris en charge lors du chargement initial de l’application et peut fonctionner avec les outils d’analytique et de publicité basés sur le site web. Utilise les sections de référence ci-dessous lorsque tu as besoin de transmettre des valeurs de recherche, configurer le suivi ou comprendre les paramètres de Google Hotel Ads.

Personnalise Immersive Experience 2.0

Adapte Immersive Experience en utilisant les attributs des composants, ainsi que ton propre CSS/JS sur ton site web.

<cb-book-now-button
  property-code="{PROPERTY_CODE}"
  class-name="cb-book-now-button"
  label="Réserver maintenant"
  height="90vh"
  width="90vw"
/>

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

Prochaine étape

Après avoir installé et testé Immersive Experience 2.0 sur ton domaine autorisé, consulte le guide de l’onglet Intégrations du Cloudbeds Booking Engine lorsque tu dois comparer ou configurer d’autres options d’intégration.