Calendrier d'Établissement Unique - Intégration du Sélecteur de Date

Gabriela Garcia

Mise à jour 4 juin 2026 01:18

Aperçu

Ce composant est conçu pour les intégrations nécessitant une recherche de dates au niveau de l'établissement sur votre site web. Il fonctionne bien sur :

La page d'accueil ou la section principale de votre site
Les sections de réservation ou « Vérifier la disponibilité »
Les pages d'atterrissage qui dirigent les utilisateurs vers le flux complet de réservation
Toute page où vous souhaitez que les dates soient sélectionnées avant que le client n'accède au moteur de réservation

Le composant affiche la disponibilité au niveau de l'établissement (tous types de chambres confondus), et non une chambre spécifique. Après avoir sélectionné une date, le client est redirigé vers le moteur de réservation pour choisir une chambre et finaliser la réservation.

Configuration

Pour ajouter les Widgets du moteur de réservation à un site web externe, il faut d'abord insérer le script Immersive Experience dans la section head du document HTML :

Le <cb-property-date-picker> est un widget web qui fournit une barre de sélection de dates pour votre établissement. Il affiche les champs check-in et check-out, un calendrier en popover, et un bouton de recherche. Lorsque le client sélectionne des dates et clique sur Rechercher, il est redirigé vers le moteur de réservation avec ces dates, où il peut choisir une chambre et finaliser la réservation.

Note : Tous les tags 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.

Important : N'utilisez pas les tags de composants web Immersive Experience 2.0 à l'intérieur d'iframes.

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

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

Ajoutez Immersive Experience tout au début de la balise 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 ; cela peut aussi 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>

Installation

Incluez le script des composants web Cloudbeds dans la <head> de votre HTML (ou avant le composant dans le <body>). Le script doit être chargé avant toute balise <cb-property-date-picker> afin que le composant soit enregistré.

Utilisation basique

<script  
src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js">
</script>

Ce que fait la configuration

Le chargement de ce script enregistre le composant <cb-property-date-picker> sur la page.
Une fois le script chargé, vous pouvez placer une ou plusieurs balises <cb-property-date-picker> n’importe où. Chaque instance affiche la barre du sélecteur de dates (check-in, check-out et bouton de recherche) et, lorsque le client sélectionne des dates et clique sur rechercher, redirige vers le moteur de réservation (ou votre URL personnalisée) avec les dates sélectionnées comme décrit ci-dessous.

Utilisation du composant

Exemple minimal requis

Vous pouvez utiliser le composant avec uniquement l’attribut data-property-code du script (sans attributs sur l’élément), ou passer le code de l’établissement directement sur l’élément :

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

Avec seulement le code de l’établissement (sur le script ou l’élément), le composant affiche le bouton “Rechercher” par défaut et utilise la langue et la devise par défaut de votre établissement.

Attributs

Attribut	Obligatoire	Par défaut	Description
`property-code`	Oui	—	Le code de ton établissement Cloudbeds. Si omis, le composant utilise le `data-property-code` du script (uniquement pour un établissement unique).
`button-label`	Non	"Rechercher"	Le texte affiché sur le bouton de recherche (p. ex. « Vérifier la disponibilité », « Rechercher des chambres »).
`layout`	Non	"horizontal"	Disposition de la barre des dates : `horizontal` (dates et bouton sur une ligne) ou `vertical` (empilés).
`open-in-new-tab`	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é.
`custom-url`	Non	—	URL de redirection après la sélection des dates, à la place du moteur de réservation. Reçoit `checkin`, `checkout`, `widget_source`, `promo` et les paramètres analytiques en tant que paramètres de requête.

Ce que le composant génère

Au chargement de la page : Une barre de dates avec des champs check-in et check-out ainsi qu’un bouton de recherche (horizontal ou vertical, selon la mise en page). En cliquant sur un champ de date, un calendrier s’ouvre en popover.
Dans le popover, le client sélectionne les dates de check-in et de check-out. Le calendrier affiche la disponibilité au niveau de l’établissement ainsi que les restrictions ou tarifs que vous avez activés.
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 avec :
- La date de check-in sélectionnée
- La date de check-out sélectionnée
- La langue et d’autres paramètres de requête (p. ex. promo, analytique)

Si vous définissez url-personnalisée, les mêmes paramètres de requête (checkin, checkout, widget_source, promo, analytique) sont ajoutés à cette URL pour que votre page puisse poursuivre le processus.

Trouver le code de votre établissement

Le code de votre établissement est l’identifiant unique dans l’URL de votre moteur de réservation. Vous pouvez le trouver dans les paramètres de votre PMS, sous l’onglet Résumé du moteur de réservation :

Flux utilisateur

Le client voit la barre de dates (check-in, check-out, bouton de recherche) sur votre page.
Le client clique sur un champ de date → Un calendrier s’ouvre 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é vers l’URL spécifiée (Expérience immersive ou URL hébergée) du moteur de réservation avec les dates sélectionnées, où il choisit une chambre et finalise la réservation.

Fonctionnalités du sélecteur de dates

Le calendrier en popover inclut :

Affichage de la disponibilité : Disponibilité au niveau de l’établissement (combinée pour tous les types de chambre).
Indicateurs de restrictions : Séjour minimum, fermé à l’arrivée et autres restrictions (lorsqu’activés dans les paramètres de votre établissement).
Affichage du tarif le plus bas : Tarif le plus bas disponible par jour (lorsqu’activé dans les paramètres de votre établissement).
Réservations le jour même : Réservation pour la date du jour (lorsqu’activé dans les paramètres de votre établissement).
Interface localisée : Les libellés et messages suivent l’attribut lang que vous avez défini.

Configuration de l’établissement

Certains comportements dépendent des paramètres de votre établissement dans Cloudbeds. Ceux-ci sont configurés dans le tableau de bord Cloudbeds, pas via les attributs du composant :

Paramètre	Effet
`allowSameDayReservation`	Permet aux clients de sélectionner aujourd’hui comme date de check-in.
`showRestrictionsOnCalendar`	Affiche les indicateurs de restrictions (séjour minimum, fermé à l’arrivée, etc.).
`showLowestRatesOnCalendar`	Affiche le tarif disponible le plus bas pour chaque jour.

Exemples d’utilisation

Basique (code établissement sur l’élément)

<cb-property-date-picker  
property-code="O2YXd0"
></cb-property-date-picker>

Avec attributs facultatifs

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

Ouvrir le moteur de réservation dans un nouvel onglet

<cb-property-date-picker  
property-code="O2YXd0"  
open-in-new-tab="true"
></cb-property-date-picker>

Avec une URL de redirection personnalisée

Lorsque vous utilisez custom-url, le client est redirigé vers votre URL après avoir choisi les dates. L’URL reçoit les paramètres checkin, checkout, widget_source, promo et analytiques pour que votre page puisse poursuivre le processus de réservation.

<cb-property-date-picker  
property-code="O2YXd0"  
custom-url="https://example.com/booking"
></cb-property-date-picker>

Questions fréquentes

Le widget de recherche prend-il en charge les filtres Client (Adultes/Enfants) ?

Non. Le widget actuel n'inclut pas de filtres Client pour les adultes ou les enfants. Il prend uniquement en charge le check-in, le check-out, le code promo et le bouton Rechercher.