Le <cb-multi-property-date-picker> est un composant web destiné aux établissements appartenant à la même organisation Cloudbeds. Il affiche une liste déroulante de sélection d’établissement, des champs de sélection de dates, ainsi qu’un bouton de recherche. Les clients sélectionnent un établissement, choisissent les dates de check-in et de check-out, puis cliquent sur rechercher pour accéder au moteur de réservation ou à une URL personnalisée pour cet établissement.
Ce composant nécessite l’attribut sub-domain. La valeur doit être le sous-domaine de ton organisation Cloudbeds, et non le domaine du site web de ton établissement ni l’URL du moteur de réservation d’un établissement individuel.
Aperçu
Le mode multi-établissements est conçu pour les sites web qui doivent afficher un sélecteur de dates pour plusieurs établissements au sein d’une même organisation Cloudbeds, comme une marque, un groupe ou une collection d’établissements. Il fonctionne bien sur :
- Les pages d’accueil d’une organisation ou d’une marque
- Les sections « Choisis un établissement » + recherche par dates
- Les pages d’atterrissage listant plusieurs établissements et redirigeant les clients vers le processus de réservation de celui qu’ils choisissent
- Toute page où le client doit d’abord sélectionner un établissement, puis choisir 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.
Avant de commencer
Avant d’installer le sélecteur de dates multi-établissements, vérifie les points suivants :
- Tes établissements appartiennent à la même organisation Cloudbeds.
- Tu disposes du sous-domaine de l’organisation pour l’URL du moteur de réservation de groupe.
- Ton rôle utilisateur inclut les privilèges du moteur de réservation pour accéder et gérer les paramètres du moteur de réservation.
- Ton forfait inclut l’accès aux intégrations premium, ou ton établissement a déjà les intégrations premium activées.
Astuce : Si tu vois une option Contacte les ventes dans la section Intégrations premium, ton forfait inclut peut-être uniquement les intégrations de base. Utilise l’option affichée dans Cloudbeds pour contacter les ventes concernant l’accès aux intégrations premium.
Important : Si tes établissements n'ont que des liens séparés du moteur de réservation, comme hotels.cloudbeds.com/reservation/CODEÉTABLISSEMENT, ils n'utilisent pas encore un moteur de réservation de groupe.
Pour utiliser le sélecteur de date multi-établissements, les établissements doivent d'abord être connectés sous une organisation Cloudbeds. Contacte l’Assistance Cloudbeds pour demander une organisation.
Lors de ta demande d’organisation, prépare les informations suivantes :
- Nom et sous-domaine souhaités pour l’organisation, par exemple mygroup.cloudbeds.com
- Prénom et nom du propriétaire de l’organisation
- Adresse e-mail du propriétaire de l’organisation
- Noms des établissements et leurs identifiants MFD
Si tu n'es pas le propriétaire enregistré de tous les établissements, l’Assistance Cloudbeds peut te demander une preuve supplémentaire de propriété ou une autorisation écrite avant de créer l’organisation.
Étape 1 : Ajouter le script Cloudbeds
Ajoute le script suivant dans la balise <head> de ton site web :
Note : Tous les tags script de la première étape sont identiques pour Immersive Experience 2.0 et tous les widgets. Si tu l'as déjà installé pour un précédent embed, tu n'as pas besoin de le refaire. Il suffit de l’installer une seule fois dans le <head> (global) du site.
Charge le script dans le <head> ou avant le composant dans le <body> pour qu'il s'exécute avant que la balise du composant soit analysée.
Important : Ne pas utiliser les balises de composant web Immersive Experience 2.0 à l'intérieur d'iframes.
Les iframes peuvent causer des problèmes d'affichage, de défilement et de performance. Utilise plutôt la zone de code personnalisé ou d'installation de script prise en charge par ton site web.
Voici une liste de bonnes pratiques lorsque l'utilisateur utilise un CMP :
- Ajoute Immersive Experience tout au début du
<head>avant la balise CMP, et inclue l'attribut qui empêche son blocage. Il vaut mieux 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"
- Classe 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 date du calendrier
Pour le mode multi-établissements, tu dois 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 qu’un établissement est 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" en chaîne de caractères. |
lang |
Non | Par défaut de l’établissement | Code de langue pour l’interface (p. ex. en, es). |
currency |
Non | Par défaut de l’établissement | Code de 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 de 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 date 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 le
ouverture-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 de check-out, la langue et d’autres paramètres de requête (p. ex., promo, analytique).
Trouver le sous-domaine de ton organisation
La valeur sous-domaine correspond au sous-domaine de ton organisation. Tu peux le trouver dans l’URL du moteur de réservation de groupe. C’est le texte qui apparaît avant .cloudbeds.com.
Dans l’exemple ci-dessous, l’URL du moteur de réservation de groupe est alona.cloudbeds.com/manage. Le sous-domaine de l’organisation est alona.
Tu l’ajoutes au composant comme ceci :
<cb-multi-property-date-picker sub-domain="alona"></cb-multi-property-date-picker>Le sous-domaine de l’organisation n’est pas le domaine public de ton site web, comme www.examplehotel.com, et ce n’est pas non plus le lien du moteur de réservation d’un établissement individuel, comme hotels.cloudbeds.com/reservation/PROPERTYCODE.
Flux utilisateur
- Le client voit le sélecteur d’établissement, la barre de dates (check-in, check-out) et le bouton de recherche sur ta 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é (dans le même onglet ou un nouvel onglet) vers le moteur de réservation (ou ton URL) pour l’établissement sélectionné avec les dates choisies, où il choisit une chambre et finalise la réservation.
Fonctionnalités multi-établissements
- Liste déroulante d’établissement consultable : Les clients peuvent taper pour filtrer les établissements par nom.
-
Ordre personnalisé : Utilise
property-orderpour contrôler l’ordre des établissements dans la liste déroulante. -
Noms personnalisés : Utilise les attributs
data-property-name-{code}pour afficher des noms conviviaux pour chaque établissement. -
URLs personnalisées : Utilise
data-property-url-{code}pour rediriger les clients vers des URLs différentes selon l’établissement. -
Mise en page :
horizontal(Par défaut) ouverticalpour correspondre à la mise en page de ta page. - Quand aucun établissement ne charge : Le composant s’affiche quand même ; la liste déroulante d’établissement 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)
Ceci est le sous-domaine de ton organisation. Nous travaillons activement à ajouter cet ID sur la page de ton établissement d’organisation pour un accès facile. En attendant, contacte le support qui pourra te fournir immédiatement l’ID de l’organisation.
<cb-multi-property-date-picker sub-domain="dcmcu2"></cb-multi-property-date-picker>Avec 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’établissement 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. Utilise les attributs data-property-name-{code}, où {code} est le code de l’établissement. Remplace les noms d’établissement 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>URLs de redirection personnalisées
URL de redirection personnalisée par établissement. Utilise 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>Dépannage
Pourquoi le sélecteur de date multi-établissements n’apparaît-il pas sur mon site web ?
Si le composant n’apparaît pas, vérifie les points suivants :
- Le script Cloudbeds est installé sur la page ou dans le
<head>global de ton site web. - Le composant n’est pas placé à l’intérieur d’une iframe.
- Le domaine de ton site web est ajouté à la Liste d’autorisation dans l’onglet Intégrations.
- Tes établissements appartiennent à la même organisation Cloudbeds.
- La valeur du
sub-domaincorrespond au sous-domaine de ton organisation.
Si ton créateur de site limite les scripts personnalisés ou les composants web, contacte ton fournisseur ou développeur de site pour t’aider à placer le code dans une zone de code personnalisé prise en charge.
Commentaires
Vous devez vous connecter pour laisser un commentaire.