Cloudbeds Booking Engine Immersive Experience 2.0 - Tout ce que vous devez savoir

Gabriela Garcia

Mise à jour 4 juin 2026 00:42

Aperçu

Le Cloudbeds Booking Engine Immersive Experience 2.0 est une solution de réservation moderne, entièrement basée sur le web, qui offre une expérience de réservation fluide et conviviale directement sur le site web de votre établissement. Elle facilite des paiements sécurisés, conformes aux normes PCI, et intègre le suivi des données compatibles avec Google pour obtenir des analyses allant de la consultation de la page à l'achat.

En tant que composant web, Immersive Experience 2.0 élimine le besoin de listes d'autorisation ou de processus complexes de masquage. Elle simplifie l’intégration grâce à un simple embed qui s’intègre parfaitement au site web de votre établissement — tout en conservant la cohérence du design et la facilité de mise en œuvre.

Ce guide offre un aperçu complet du Cloudbeds Booking Engine Immersive Experience 2.0, détaillant ses fonctionnalités principales, avantages techniques et recommandations de sécurité. Vous y trouverez également des informations sur la tarification, les détails essentiels du support des passerelles de paiement, ainsi qu’un guide technique étape par étape pour une installation réussie sur le site web de votre établissement.

Dans cet article :

Aperçu
Comment installer Immersive Experience 2.0

Une expérience de réservation améliorée

Immersive Experience 2.0 introduit des fonctionnalités uniques conçues pour améliorer l’expérience de réservation de vos clients directement sur votre 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 favorisent davantage de réservations.
Plus de personnalisation : créez une expérience client unique et mémorable sans les contraintes d’un iframe standard.
Croissance basée sur les données : accédez à des indicateurs clés et des analyses pour optimiser votre processus de réservation et augmenter les réservations directes.
Confiance accrue : le parcours de réservation sécurisé et fluide renforce la confiance des clients, les encourageant à finaliser leur réservation.

Composants basés sur le web vs. basés sur iframe

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

Des temps de chargement du site web plus rapides
Une personnalisation de la 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

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

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

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

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é des paiements

Dans le flux de réservation Immersive Experience 2.0 (fenêtre pop-up et page complète), les détails de recherche du client — y compris les dates, le nombre de clients, les codes promotionnels, les chambres sélectionnées et la progression du check-out — sont automatiquement conservés jusqu’à 10 minutes d’inactivité. Si un client quitte brièvement le flux de réservation et revient dans ce délai, il reprend exactement là où il s’était arrêté, offrant une expérience de réservation plus fluide et réduisant les risques d’abandon.

Tarification et disponibilité

Cloudbeds Booking Engine Plus est inclus dans tous les abonnements Cloudbeds sans coût supplémentaire pour les établissements inclus dans notre première phase de déploiement. Immersive Experience 2.0 utilise le même flux de réservation mais offre une manière améliorée de l’intégrer directement sur votre site web.

Que Immersive Experience 2.0 entraîne un supplément dépend de votre abonnement et du programme de migration en cours :

Pendant la transition depuis les iframes hérités et Immersive 1.0, de nombreux établissements ont bénéficié d’Immersive Experience 2.0 sans frais supplémentaires dans le cadre de la mise à jour.
En dehors de ces programmes, Immersive Experience 2.0 peut être proposé comme un supplément facturable, ajouté à la facture Cloudbeds régulière de l’établissement.

Cloudbeds communiquera clairement et à l’avance toute mise à jour tarifaire avant l’entrée en vigueur des changements.

Modes de paiement personnalisés et prise en charge des passerelles

Recommandations de 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 du PMS. Cette fonctionnalité est prévue pour une sortie en 2026. Les clients recevront des détails plus précis 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, veuillez contacter directement notre équipe Cloudbeds Payments. Ils gèrent l’ensemble du SDK de paiements et sont les mieux placés pour vous assister.

Comment installer Immersive Experience 2.0

Pour assurer un déploiement fluide, suis les étapes techniques ci-dessous pour ajouter ton domaine à la liste d’autorisation et intégrer les scripts nécessaires. Ce processus est conçu pour intégrer le flux de réservation de manière transparente à ton site tout en garantissant sécurité et performance optimales.

Note : Toute valeur affichée comme {PARAMETER} dans cet article est un espace réservé. Remplace-la par ta valeur réelle et supprime les accolades ({ }).

Important :

L’Immersive Experience a été testé avec des sites web personnalisés. Les sites basés sur des modèles ou sans code, créés avec des plateformes de création de site, peuvent gérer les scripts personnalisés différemment, ce qui pourrait affecter la fonctionnalité.
Ne pas utiliser les balises de composant web Immersive Experience 2.0 à l’intérieur des iframes.
- Cette configuration peut causer des problèmes de défilement et nécessiterait de mettre en liste d’autorisation chaque élément dans la chaîne d’iframe — une configuration non recommandée.
Voici une liste de bonnes pratiques lorsque l’utilisateur utilise un CMP :
- Ajouter l’Immersive Experience tout au début de la balise head, avant la balise CMP, et inclure l’attribut qui empêche son blocage. Il est préférable de ne pas tout spécifier dans la documentation, car cela peut varier selon la plateforme
  - Cookiebot : data-cookieconsent="ignore"
  - OneTrust : data-ignore-consent="true"
  - Quantcast : data-quantcast-ignore="true"
- Classer le script ci-dessous comme Nécessaire dans le panneau d’administration du CMP ; encore une fois, cela peut varier selon la plateforme :
```
<script src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" type="text/javascript"></script>
```

Étapes d’installation

Pour activer l’Immersive Experience 2.0 sur le site web de votre établissement, veuillez suivre les étapes ci-dessous.

Étape 1 – Activer les domaines autorisés

Pour commencer l'installation de l'Immersive Experience 2.0 et maximiser ton expérience de réservation, rends-toi dans Domaines autorisés dans les paramètres de ton Widget Site web. Si cette option n'est pas disponible, contacte notre Équipe d'assistance pour la faire activer.
Si tu es client de Cloudbeds Websites, tu peux contacter la équipe Cloudbeds Websites pour obtenir des conseils sur la mise en œuvre et les demandes d'activation.

Étape 2 – Ajoutez votre domaine à la liste d’autorisation

Une fois que notre équipe d’assistance aura activé les configurations appropriées, vous verrez la section Domaines autorisés dans votre PMS.

Depuis votre Menu Compte , sélectionnez Paramètres
Cliquez sur Moteur de réservation
Allez dans Widgets du site web et, dans la section Domaines autorisés, ajoutez le(s) domaine(s) où vous installerez l’Expérience immersive. Vous pouvez ajouter jusqu’à 5 domaines.

Les domaines principaux et les sous-domaines sont pris en charge (p. ex., mon-hotel.com et reservation.mon-hotel.com).

Liste d’autorisation des domaines : comment vérifier le format correct du domaine

Parfois, le domaine d’un site web peut être configuré de manière à nécessiter l’inclusion du www. Pour couvrir les deux cas, nous recommandons de faire un test simple.

Vérifiez la barre d’URL : ouvrez votre site web et regardez l’URL dans votre navigateur.
Inclut-elle www ? Par exemple, affiche-t-elle https://www.votredomaine.com ou simplement https://votredomaine.com ?

Une fois que vous savez quel format utilise votre site, vous pouvez saisir le domaine correct dans le champ de la liste d’autorisation Cloudbeds. Par exemple, si votre site s’affiche avec le www, vous devez alors ajouter à la liste d’autorisation votre domaine sous la forme www.votredomaine.com.

Pourquoi les domaines doivent être ajoutés à la liste d’autorisation

L’Expérience immersive est un composant web (et non une iframe). Elle s’exécute sur votre site et effectue des requêtes API vers les services Cloudbeds depuis votre domaine. L’ajout à la liste d’autorisation indique à Cloudbeds quels origines sont autorisées afin que ces requêtes inter-domaines soient acceptées.

Étape 3 – Ajouter le script Immersive Experience

Ajoutez le script suivant dans l’élément <head> du document HTML de votre site 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>

Note : L’attribut data-cookieconsent varie et ne sera nécessaire que si vous utilisez un CMP (intégration de conformité aux cookies) sur votre site. Si vous utilisez un CMP, vous devrez vérifier que l’attribut (par exemple « data-cookieconsent=ignore ») est adapté aux paramètres spécifiques de votre CMP.

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

Vous pouvez afficher l’Immersive Experience 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’app moteur de réservation est entièrement intégrée au site hôte. Pour l’intégrer, incluez 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’app moteur de réservation sous forme de fenêtre contextuelle avec position fixe et superposition. Pour ajouter un bouton Réserver maintenant qui ouvre l’Immersive Experience en popup :

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

Si vous omettez l’attribut mode, le composant utilise par défaut le mode standard.

Trouvez votre Code Établissement

Allez dans le Menu Compte > Paramètres > Moteur de réservation > Onglet Résumé. Votre code est la valeur alphanumérique de 6 caractères à la fin du lien de votre moteur de réservation :

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

Dans l’exemple ci-dessous, la partie surlignée est le Code Établissement que vous devez utiliser dans votre intégration (remplacez les accolades et la valeur dans votre fragment).

Considérations sur la configuration & comportement

Les sections ci-dessous mettent en lumière le comportement et les détails de mise en œuvre utiles à connaître avant la mise en service.

Compatibilité avec les créateurs de site

L'expérience immersive a été testée avec des sites web personnalisés. Les créateurs de site basés sur des modèles ou sans code peuvent gérer les scripts personnalisés différemment, ce qui pourrait affecter la fonctionnalité.

✔️ Injection dans le head : Vérifiez que vous pouvez ajouter le <script> de l'expérience immersive dans la balise <head> de la page.

✔️ Liste d’autorisation : Assurez-vous que vos domaines en production (et ceux de préproduction/aperçu) sont ajoutés dans la section Domaines autorisés afin que les requêtes API soient acceptées (jusqu’à 5 domaines).

✔️ CSS/JS personnalisé : Les styles ou scripts ajoutés dans la section de personnalisation du moteur de réservation ne s’appliquent pas automatiquement à l'expérience immersive ; ajoutez-les plutôt dans le HTML de votre site.

✔️ Page de paiement : L’étape de paiement peut varier selon le mode de paiement sélectionné.

⮕ Si le client choisit Apple Pay, Google Pay ou une autre option de paiement tierce, il sera redirigé vers la page tierce correspondante pour finaliser le paiement.

⮕ Une fois la transaction réussie, il sera redirigé vers la page de confirmation de l'expérience immersive.

✔️ Liens profonds/paramètres : Les paramètres de recherche sont lus uniquement au chargement initial. Si vous modifiez l’URL après le chargement de l’application, rechargez la page pour les appliquer.

Portails

Le moteur de réservation affiche plusieurs éléments en position fixe à l’écran, par exemple :

Fenêtres modales
Info-bulles
Calendrier
Vérificateur de tarifs
Bannière du panier d’achat (sur mobile)
Sélecteurs de langue et de devise

Ces éléments sont rendus à l’intérieur d’un portail, ce qui signifie qu’au lieu de suivre la structure de l’arbre DOM, ils sont enveloppés par un élément avec la classe statique .cb-portal et ajoutés à la fin du corps de la page. Les portails ont différentes valeurs de z-index selon la couche correspondante dans notre contexte d’empilement.

La plupart des sites web ont eux-mêmes des contextes d’empilement, et selon la manière dont ils sont définis sur l’axe z imaginaire, ils peuvent entrer en conflit ou non avec les contextes d’empilement de l’expérience immersive.

Par exemple, s’ils ne sont pas correctement définis, le vérificateur de tarifs de l’expérience immersive pourrait s’afficher au-dessus du menu de navigation mobile appartenant au site web de l’établissement, ou un élément flottant du site web de l’établissement pourrait apparaître au-dessus du bouton « Réserver maintenant » dans la bannière du panier d’achat sur mobile, le bloquant ainsi et empêchant l’utilisateur de poursuivre le processus de réservation.

À l’heure actuelle, nous avons 4 types de portails : fenêtre modale, popover, sticky et info-bulle. Le type de portail utilisé dans chaque cas dépend du type d’élément concerné. Ainsi, toutes les fenêtres modales utiliseront un portail fenêtre modale, le popover Calendrier ainsi que les sélecteurs de langue et de devise utilisent un portail popover, tandis que la bannière du panier d’achat sur mobile et le vérificateur de tarifs utilisent un portail sticky, pour ne citer que quelques exemples.

Selon le type de portail, voici les valeurs que l’expérience immersive utilise pour la propriété CSS z-index :

Fenêtre modale :1400
Popover :1500
Sticky :1100
Info-bulle :1800

Résolution des problèmes de chevauchement

Lorsque vous rencontrez des problèmes avec des éléments rendus par l’Expérience Immersive qui chevauchent d’autres éléments du site web parent, nous vous recommandons de rechercher le portail (élément avec la classe statique .cb-portal) qui le contient et d’ajuster la valeur du z-index en conséquence, ou d’ajuster la valeur du z-index de l’élément du site web parent.

Les valeurs de z-index pour les différents types de portails rendus par l’Expérience Immersive seront personnalisables simplement en redéfinissant les variables CSS utilisées à cet effet, comme illustré dans l’exemple ci-dessous :

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

Vérifié : registre « vous » cohérent, aucun anglicisme injustifié, « portail » utilisé pour Portal, « moteur de réservation » pour Booking Engine, « fenêtre modale » pour modal, « info-bulle » pour tooltip, accord en genre/nombre correct, casse de phrase appliquée aux titres, capitalisation des libellés d’interface cohérente, terminologie Microsoft alignée, phrases complètes vérifiées, pas de dérive terminologique, « téléverser » non concerné ici, formatage respecté.

``` Vérifié : registre "vous" cohérent, aucun anglicisme injustifié, "carrousel" utilisé pour "slider", "téléverser" utilisé pour l'upload, "rapport d'aspect" cohérent, "widget" en minuscules, liste des faux amis vérifiée, accord en genre/nombre correct, casse de phrase appliquée aux titres, capitalisation des libellés d'interface cohérente, "établissement" utilisé pour "property", phrases complètes vérifiées, erreurs sources signalées.

Le vérificateur de tarif est inclus dans tous les forfaits Cloudbeds Booking Engine sauf les plans hérités. Les établissements avec des forfaits actifs peuvent l’activer sans coût supplémentaire.

Paramètres de recherche

L'expérience immersive prend en charge les mêmes paramètres de recherche que la version hébergée. Les paramètres sont lus uniquement lors du chargement initial et ne se mettent pas à jour dynamiquement.

Nom	Type	Description	Exemple
adults	Nombre	Le nombre d’adultes pour la réservation, utilisé lors de la recherche d’hébergements disponibles.	adults=2
allotment_block_code	Chaîne de caractères	Le code du bloc de contingent à utiliser pour récupérer les hébergements pour les dates sélectionnées.	allotment_block_code=b123456
checkin	AAAA-MM-JJ	La date sélectionnée pour le check-in.	checkin=2025-12-01
checkout	AAAA-MM-JJ	La date sélectionnée pour le check-out. Si checkin est fourni mais pas checkout, la date par défaut est le lendemain.	checkout=2025-12-01
currency	Code devise ISO-4217 à 3 lettres	Devise sélectionnée. Si aucune n’est fournie, le moteur de réservation utilise la devise par défaut de l’établissement.	currency=brl
kids	Nombre	Le nombre d’enfants pour la réservation, utilisé lors de la recherche d’hébergements disponibles.	kids=1
promo	Chaîne de caractères	Code promo à utiliser pour récupérer les hébergements pour les dates sélectionnées.	promo=superpromo
rate_plan	Chaîne de caractères séparée par des points-virgules	Pour filtrer les résultats d’hébergement selon les plans tarifaires, correspond au « Nom du plan tarifaire privé » dans le PMS.	rate_plan=3DAYSTAY;LOWSEASON
rid	Chaîne numérique séparée par des points-virgules	Liste des IDs de chambre pour filtrer les résultats d’hébergement.	rid=27434;23421
room_type	Chaîne de 3 lettres séparée par des points-virgules	Correspond à l’« Abréviation d’hébergement » dans le PMS et sert à filtrer les résultats d’hébergement. Si aucun check-in ni check-out n’est fourni, le moteur de réservation sélectionne automatiquement demain et le jour suivant.	room_type=PRI;SHA
utm_source	Chaîne de caractères	Utilisé pour identifier la source de la campagne marketing (ex : Google, TripAdvisor, Trivago)	utm_source=Google

Suivi et analytique

L’Expérience immersive prend en charge les mêmes paramètres de recherche que la version hébergée. Ces paramètres sont lus depuis l’emplacement de la fenêtre uniquement lors du chargement initial de l’application, ce qui signifie que les modifications dynamiques des paramètres de recherche n’auront aucun impact sur l’Expérience immersive une fois celle-ci chargée.

De plus, l’Expérience immersive ne met pas à jour l’URL de la fenêtre comme le fait la version hébergée après certaines actions de l’utilisateur (par exemple, la sélection des dates d’arrivée et de départ).

Google Analytics 4 / GTM : L’ID de balise Google ou l’ID du conteneur GTM doit être initialisé sur le site web de l’établissement.
Google Ads : Le suivi des conversions nécessite une configuration manuelle sur le site web de l’établissement.
Meta Pixel : Le script Meta Pixel doit être ajouté dans la balise HTML <head> pour l’initialisation.

Pour plus de détails sur la configuration, consultez la documentation de chaque plateforme de suivi.

Ajoutez manuellement les scripts Google Tag Manager (GTM) ou Google Analytics 4 (GA4) dans la balise <head> de votre HTML pour activer le suivi.

Paramètres de recherche Google Hotel Ads

Ces paramètres sont ajoutés par Google Hotel Ads et le moteur de réservation les envoie au serveur dans la requête lors de la réalisation d’une réservation :

Paramètre

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

Personnalisation : attributs, paramètres d’URL et style

Adapte l’expérience immersive en utilisant les attributs des composants, ainsi que ton propre CSS/JS sur ton site web.

Les codes personnalisés peuvent nécessiter un entretien au fil du temps

Au fur et à mesure que le moteur de réservation évolue, les personnalisations appliquées par toi-même peuvent cesser de fonctionner ou nécessiter des mises à jour.
Dans la mesure du possible, teste les modifications sur une copie de test ou un brouillon de ton site avant de les mettre en ligne.

Attributs des composants pour cb-immersive-experience et cb-book-now-button

Ces attributs sont partagés par les modes standard et fenêtre contextuelle (voir Intégrer le moteur de réservation).

Les attributs suivants sont tous facultatifs (sauf le property-code) et sont pris en charge par les composants web cb-immersive-experience et cb-book-now-button.

Nom	Type	Obligatoire	Valeur par défaut	Description
*devise ()**	Code devise ISO-4217 à 3 lettres	Non	Devise par défaut de l’établissement	La devise utilisée pour le chargement initial de l’Application immersive.
disable-css-title-reset	oui \| non	Non	non	oui doit être utilisé si l’établissement souhaite définir ses propres règles CSS pour les titres dans l’interface utilisateur (h1… h6).
hide-custom-header	oui \| non	Non	non	Pour masquer l’en-tête personnalisé défini dans le PMS.
hide-custom-footer	oui \| non	Non	non	Pour masquer le pied de page personnalisé défini dans le PMS.
hide-property-info	oui \| non	Non	non	Pour masquer la section Informations sur l’établissement sur toutes les pages.
*ignore-search-params ()**	oui \| non	Non	non	L’Application immersive lit par défaut les paramètres de requête dans l’URL du site hôte et les utilise lors du chargement initial de l’application. Elle prend en charge les mêmes paramètres que le moteur de réservation hébergé.
*lang ()**	auto-détection \| code langue ISO 639-1 à 2 lettres	Non	Langue par défaut de l’établissement.	La langue utilisée lors du chargement initial de l’Application immersive. Si aucune n’est fournie, l’Application immersive vérifiera l’attribut lang du HTML, et si celui-ci n’est pas défini non plus, la langue par défaut de l’établissement sera utilisée. Si la valeur auto-détection est fournie, l’Application immersive se chargera dans la langue du navigateur de l’utilisateur.
mode	standard \| fenêtre contextuelle	Non	standard	Le mode dans lequel l'expérience immersive doit être affichée. Une fenêtre contextuelle doit être utilisée lorsque l'expérience immersive est affichée à l'intérieur d'un conteneur avec une hauteur fixe ou une hauteur maximale.
*code-établissement ()**	Code alphanumérique de 6 caractères qui identifie votre établissement.	Oui	—	Le code alphanumérique de 6 caractères qui représente l'établissement. C'est le même code que celui de l'URL du moteur de réservation : https://hotels.cloudbeds.com/reservation/{CODE_ÉTABLISSEMENT}.

Les attributs marqués pour le chargement initial ne sont lus qu’une seule fois au démarrage de l’application. Les modifier ultérieurement dans votre établissement n’affectera pas une expérience immersive déjà chargée.

Attributs personnalisés du bouton Réserver maintenant

Ces options s’appliquent au composant cb-book-now-button (voir la section Intégrer le moteur de réservation) et te permettent de styliser le bouton ainsi que de contrôler le libellé et les dimensions de la fenêtre contextuelle.

Attribut	Description
class-name	Classe CSS pour styliser le bouton.
close-label	Libellé personnalisé pour le bouton de fermeture.
height	Hauteur de la fenêtre contextuelle.
width	Largeur de la fenêtre contextuelle.

Exemple du bouton Réserver maintenant avec libellé, taille et classe CSS :

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

Ajouter du CSS et du JavaScript personnalisés pour l’expérience immersive

Le CSS ou JavaScript personnalisé ajouté dans les champs de personnalisation du moteur de réservation ne s’applique pas automatiquement à l’expérience immersive. Ils doivent être ajoutés manuellement au document HTML.

Ajoute l’attribut data-cb-immersive-experience-root aux balises style et script pour éviter les conflits.

Exemple de CSS personnalisé :

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