Intégration du calendrier multi-établissements avec sélecteur de date

Gabriela Garcia

Mise à jour 4 juin 2026 01:29

Le <cb-multi-property-date-picker> est un composant web destiné à plusieurs établissements au sein d’une organisation. Vous devez fournir un attribut sous-domaine obligatoire. Il affiche un sélecteur d’établissement sous forme de liste déroulante, des champs de sélection de dates et un bouton de recherche. Le client choisit un établissement, sélectionne les dates de check-in et de check-out, puis clique sur rechercher et est redirigé vers le moteur de réservation (ou vers votre URL personnalisée) pour cet établissement.

Aperçu

Le mode multi-établissements est conçu pour les intégrations affichant plusieurs établissements au sein d’une même organisation (par exemple, une marque ou un groupe). Il fonctionne bien sur :

Les pages d’accueil d’organisations ou de marques
Les sections « Choisir un établissement » + recherche par dates
Les pages d’atterrissage listant plusieurs établissements et envoyant les clients dans le processus de réservation pour celui qu’ils choisissent
Toute page où le client doit d’abord choisir un établissement, puis sélectionner des dates

Le composant charge la liste des établissements de l’organisation, affiche une liste déroulante avec fonction de recherche, et après que le client a sélectionné un établissement et des dates, le redirige vers le moteur de réservation Immersive Experience (ou une URL personnalisée) pour cet établissement.

Étape 1 : Ajouter le script Cloudbeds

Ajoutez le script suivant dans la balise <head> de votre site web :

Note : Toutes les balises script de la première étape sont identiques pour Immersive Experience 2.0 et tous les widgets. Si vous l’avez déjà installé pour un précédent embed, il n’est pas nécessaire de le refaire. Il suffit de l’installer une seule fois dans le <head> (global) du site web.

Chargez le script dans le <head> ou avant le composant dans le <body> afin qu’il s’exécute avant que la balise du composant soit analysée.

Important : N’utilisez pas les balises de composant web Immersive Experience 2.0 à l’intérieur d’iframes.

Cette configuration peut provoquer des problèmes de défilement et nécessiterait d’ajouter chaque élément de la chaîne d’iframes à la liste d’autorisation — une configuration non recommandée.

Voici une liste de bonnes pratiques lorsque l’utilisateur utilise un CMP :

Ajoutez Immersive Experience tout au début du <head> avant la balise CMP, et incluez 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"
Classez 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>

Étape 2 : Ajouter le script du sélecteur de dates du calendrier

Pour le mode multi-établissements, vous devez passer le sous-domaine de l’organisation sur l’élément :

<cb-multi-property-date-picker sub-domain="YOUR_SUB_DOMAIN"></cb-multi-property-date-picker>

Avec uniquement un sous-domaine, le composant affiche le bouton « Rechercher » par défaut et utilise la langue et la devise par défaut de chaque établissement une fois celui-ci sélectionné.

Note : Pour le calendrier multi-établissements, l’anglais sera sélectionné par défaut comme langue et le dollar américain (USD) comme devise, sauf si ces paramètres sont modifiés via des paramètres personnalisés comme indiqué ci-dessous.

Il n’existe pas d’attribut global custom-url. Les URL personnalisées sont définies par établissement avec data-property-url-{code}. Si un établissement n’a pas d’URL personnalisée, l’URL par défaut du moteur de réservation hébergé est utilisée.

Attributs

Attribut	Obligatoire	Par défaut	Description
`sous-domaine`	Oui	—	Sous-domaine de ton organisation. Charge et liste ses établissements.
`libellé-bouton`	Non	"Rechercher"	Texte sur le bouton de recherche (p. ex. « Vérifier la disponibilité », « Rechercher des chambres »).
`mise-en-page`	Non	"horizontal"	Mise en page : `horizontal` (sélecteur d’établissement, dates et bouton alignés sur une ligne) ou `vertical` (empilés).
`ouvrir-dans-nouvel-onglet`	Non	"false"	Indique si le moteur de réservation doit s’ouvrir dans un nouvel onglet. Utilise `"true"` ou `"false"` sous forme de chaîne.
`lang`	Non	Par défaut de l’établissement	Code langue pour l’interface (p. ex., `en`, `es`).
`currency`	Non	Par défaut de l’établissement	Code devise pour les tarifs affichés (p. ex., `usd`, `eur`).
`class-name`	Non	—	Nom de classe CSS appliqué au composant pour un style personnalisé.
`property-order`	Non	—	Ordre des établissements dans la liste déroulante. Codes séparés par des points-virgules, p. ex. `"CODE1;CODE2"`.
`data-property-url-{code}`	Non	—	URL personnalisée pour l’établissement `{code}`, p. ex. `data-property-url-O2YXd0="https://example.com/downtown"`.
`data-property-name-{code}`	Non	—	Nom d’affichage personnalisé pour l’établissement `{code}`, p. ex. `data-property-name-O2YXd0="Hôtel du Centre-ville"`

Ce que le composant génère

Au chargement : Un sélecteur d’établissement (liste déroulante avec recherche), des champs de check-in et check-out, ainsi qu’un bouton de recherche (horizontal ou vertical selon la mise en page). La liste déroulante affiche tous les établissements de l’organisation. En cliquant sur un champ de date, un calendrier apparaît en popover.
Après sélection d’un établissement : Le sélecteur de dates et le calendrier utilisent les paramètres de cet établissement (disponibilité, restrictions, règles du même jour, etc.).
Lors de la recherche (clic sur le bouton) : Le client est redirigé (dans le même onglet ou un nouvel onglet selon ouvrir-dans-nouvel-onglet) vers le moteur de réservation (ou l’URL personnalisée) avec l’établissement sélectionné, les dates de check-in et check-out, la langue et d’autres paramètres de requête (p. ex., promo, analytique).

Trouver votre sous-domaine

Voici le sous-domaine de votre organisation. Vous pouvez le trouver en accédant à votre CRM ou à votre moteur de réservation de groupe. Il correspond au nom de votre organisation avant « cloudbeds.com » comme indiqué dans l’URL.

Flux utilisateur

Le client voit le sélecteur d’établissement, la barre de dates (check-in, check-out) et le bouton de recherche sur votre page.
Le client sélectionne un établissement dans la liste déroulante (il peut taper pour rechercher/filtrer).
Le client clique sur un champ de date → un calendrier apparaît en popover.
Le client sélectionne la date de check-in → le calendrier met en surbrillance les dates de check-out disponibles.
Le client sélectionne la date de check-out → le bouton de recherche devient actif.
Le client clique sur le bouton de recherche → il est redirigé (même onglet ou nouvel onglet) vers le moteur de réservation (ou votre URL) pour l’établissement et les dates sélectionnés, où il choisit une chambre et finalise la réservation.

Fonctionnalités multi-établissements

Liste déroulante d’établissements avec recherche : Les clients peuvent taper pour filtrer les établissements par nom.
Ordre personnalisé : Utilisez ordre-établissement pour contrôler l’ordre des établissements dans la liste déroulante.
Noms personnalisés : Utilisez donnée-nom-établissement-{code} pour afficher des noms conviviaux pour chaque établissement.
URLs personnalisées : Utilisez donnée-url-établissement-{code} pour envoyer les clients vers des URLs différentes selon l’établissement.
Mise en page : horizontal (par défaut) ou vertical pour correspondre à la mise en page de votre page.
Quand aucun établissement ne charge : Le composant s’affiche quand même ; la liste déroulante d’établissements est désactivée et affiche une info-bulle au survol « Aucune donnée trouvée. »

Exemples d’utilisation

Basique (sous-domaine de l’organisation uniquement)

Voici le sous-domaine de votre organisation. Nous travaillons activement à l’ajout de cet ID sur la page de l’établissement de votre organisation pour un accès facile. En attendant, veuillez contacter le support, qui pourra vous fournir immédiatement l’ID de l’organisation.

<cb-multi-property-date-picker sub-domain="dcmcu2"></cb-property-date-picker>

Avec des attributs facultatifs

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 button-label="Vérifier la disponibilité"  
 layout="vertical"  
 lang="es"  
 currency="eur"  
 class-name="my-multi-date-picker">
</cb-multi-property-date-picker>

Ouvrir le moteur de réservation dans un nouvel onglet

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 open-in-new-tab="true"
></cb-multi-property-date-picker>

Ordre personnalisé des établissements

Ordre personnalisé des établissements dans la liste déroulante. Codes d’établissements séparés par des points-virgules. Les établissements de cette liste apparaîtront en premier, dans l’ordre spécifié. Les établissements restants seront triés par ordre alphabétique.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 property-order="2SI0CT;O2YXd0;PROP003"
></cb-multi-property-date-picker>

Noms personnalisés des établissements

Nom d’affichage personnalisé par établissement. Utilisez les attributs data-property-name-{code}, où {code} est le code de l’établissement. Remplace les noms d’établissements par défaut dans la liste déroulante.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 data-property-name-O2YXd0="Hôtel du centre-ville"  
 data-property-name-2SI0CT="Station balnéaire"  
 data-property-name-PROP003="Lodge de montagne"
></cb-multi-property-date-picker>

URL de redirection personnalisées

URL de redirection personnalisée par établissement. Utilisez les attributs data-property-url-{code}, où {code} est le code de l’établissement. Lorsqu’un établissement est sélectionné, si un attribut correspondant existe, cette URL sera utilisée pour la redirection. Sinon, l’URL par défaut du moteur de réservation hébergé est utilisée.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 data-property-url-O2YXd0="https://example.com/downtown"  
 data-property-url-2SI0CT="https://example.com/beach"
></cb-multi-property-date-picker>