Intégration du calendrier des Hébergements - Sélecteur de date

Gabriela Garcia

Mise à jour 4 juin 2026 18:41

Cette fonctionnalité est disponible pour les établissements disposant de la Premium Embed Suite incluant Immersive Experience 2.0. Par défaut, les clients sont redirigés vers le moteur de réservation hébergé. Pour rediriger les clients vers une URL de réservation différente, comme Immersive Experience 2.0, utilisez l’attribut custom-url.

Cela offre une solution simple pour ajouter un bouton Réserver maintenant pour une chambre spécifique sur votre site web — sans reconstruire tout votre flux de réservation.

L’intégration du calendrier d’hébergement est un composant web immersif léger qui ouvre un calendrier, permet aux clients de choisir des dates, et les envoie directement vers votre moteur de réservation avec toutes les informations préremplies. Moins de friction, plus de réservations. Tout le monde y gagne.

Qu’est-ce que c’est (et quand l’utiliser)

Utilisez le calendrier d’hébergement lorsque vous souhaitez que les clients réservent une chambre ou une unité spécifique, et pas seulement « l’établissement en général ». C’est idéal pour :

Les pages de détail des chambres
Les pages d’annonces de chambres
Les pages d’atterrissage marketing ou de campagne
Les pages promotionnelles présentant un hébergement unique

Note : Il ne doit pas être intégré dans une iframe.

Ce que vivent les clients

Voici le déroulement du point de vue d’un client :

Le client clique sur Réserver maintenant
Un calendrier s’ouvre dans une fenêtre modale
Le client sélectionne les dates de check-in et de check-out
Le client clique sur Continuer
Un nouvel onglet s’ouvre avec l’URL de réservation configurée, déjà remplie avec :
- Les dates sélectionnées
- La chambre ou l’unité correcte

Ce dont vous avez besoin avant de commencer

Assurez-vous de disposer de :

Le code de votre établissement dans le Cloudbeds Booking Engine
L’ID de la chambre que vous souhaitez réserver (expliqué ci-dessous)
L’accès pour modifier le HTML de votre site web

Pour trouver le code de votre établissement, vous pouvez consulter le lien de votre moteur de réservation et en extraire l’identifiant unique.

Option 1 : ID du type de chambre

Utilisez cette option si vous souhaitez que les clients réservent n’importe quelle chambre disponible dans une catégorie de chambre. Pour trouver votre ID de chambre (rid) :

Accédez à Compte → Paramètres ➜ Établissement → onglet Hébergements
Puis clique sur le nom de l’hébergement (type de chambre) dont tu as besoin
Regarde la barre d’adresse du navigateur ; le numéro affiché à la toute fin de l’URL est l’ID du type de chambre

Par exemple, pour l’URL https://hotels.cloudbeds.com/connect/100000#/manage/roomTypes/123456 → l’ID du type de chambre est 123456.

Option 2 : ID d’unité

Utilise cette option si tu souhaites que les clients réservent une chambre physique spécifique (unité), plutôt qu’une chambre quelconque d’un type de chambre. Pour trouver ton ID d’unité :

Accède à Compte → Paramètres ➜ Établissement → onglet Hébergements, puis localise l’unité de chambre que tu souhaites intégrer.
Clique sur Modifier à côté de l’unité de chambre spécifique.
Ouvre les Outils de développement de ton navigateur et sélectionne l’onglet Réseau.
Dans les requêtes réseau, localise l’appel API [find_one].
Dans la charge utile de la réponse, trouve le champ intitulé "id" — cette valeur est l’ID d’unité que tu utiliseras.

Étape 1 : Ajouter le script Cloudbeds

Ajoute le script suivant dans la balise <head> de ton site web :

Note : Tous les tags de 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 une intégration précédente, tu n’as pas besoin de le refaire. Il suffit de l’installer une seule fois dans le <head> (global) du site web.

Important : Ne pas utiliser les tags 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’autoriser chaque élément dans la chaîne d’iframes — une configuration non recommandée.

Une liste de bonnes pratiques lorsqu’un utilisateur utilise un CMP :

Ajoutez l’expérience immersive tout au début de la balise 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 chaque 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 bouton Sélecteur de date

Placez cette balise où vous souhaitez que le bouton Réserver maintenant apparaisse :

<cb-accommodation-date-picker  
property-code="VOTRE_CODE_ÉTABLISSEMENT"  
rid="VOTRE_ID_CHAMBRE"
></cb-accommodation-date-picker>

Une fois ajouté, le bouton s’affichera automatiquement.

Personnalisation facultative

Vous pouvez ajuster le bouton et l’interface en utilisant ces attributs facultatifs :

Attribut	Fonction
button-label	Modifie le texte du bouton (par défaut « Réserver maintenant »)
lang	Définit la langue du calendrier et des libellés
currency	Remplace la devise par défaut de l’établissement
class-name	Ajoute une classe CSS personnalisée pour le style
custom-url	Redirige les clients vers une URL de réservation personnalisée, comme Immersive Experience 2.0

Exemple :

<cb-accommodation-date-picker  
property-code="VOTRE_CODE_ÉTABLISSEMENT"  
rid="VOTRE_ID_CHAMBRE"  
button-label="Réserver cette chambre"  
lang="fr"
custom-url="https://example.com/booking"
></cb-accommodation-date-picker>

Fonctionnalités du calendrier visibles par les clients

Selon la configuration de votre établissement, le calendrier peut afficher :

Restrictions de réservation (séjour minimum, dates fermées, etc.)
Tarif le plus bas disponible par jour
Check-in le jour même (si activé)
Langue et formatage entièrement localisés

Toutes ces informations sont directement extraites de votre configuration Cloudbeds — aucune configuration supplémentaire n’est nécessaire.

Paramètres de l’établissement qui influencent le comportement

Ces fonctionnalités sont contrôlées dans Cloudbeds :

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.

Réservations le jour même – Permet de réserver pour aujourd’hui
Indicateurs de restriction – Affiche les règles de réservation sur le calendrier
Affichage des tarifs les plus bas – Montre le tarif disponible le moins cher par jour

Si quelque chose n’apparaît pas, la première étape est de vérifier vos paramètres Cloudbeds.