Intégration du Sélecteur de Dates du Calendrier des Hébergements

Gabriela Garcia

Mise à jour 4 juin 2026 01:27

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.

Le Calendrier d’hébergement intégré 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 ». Il 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 parcours du 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 :

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

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

Option 1 : ID de 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
Cliquez ensuite sur le nom de l’hébergement (type de chambre) dont vous avez besoin
Regardez 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é

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

Accédez à Compte → Paramètres ➜ Établissement → onglet Hébergements, puis localisez l’unité de chambre que vous souhaitez intégrer.
Cliquez sur Modifier à côté de l’unité de chambre spécifique.
Ouvrez les Outils de développement de votre navigateur et sélectionnez l’onglet Réseau.
Dans les requêtes réseau, localisez l’appel API [find_one].
Dans la charge utile de la réponse, trouvez le champ intitulé "id" — cette valeur est l’ID d’unité que vous utiliserez.

Étape 1 : Ajouter le script Cloudbeds

Ajoutez le script suivant à l’intérieur de 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 les avez déjà installées pour une intégration précédente, vous n’avez pas besoin de les réinstaller. Elles doivent être installées une seule fois dans le <head> (global) du site web.

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

Une liste de bonnes pratiques lorsque vous utilisez 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 :

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.