Intégrer les widgets de réservation
Introduction
Le widget de réservation Clévacances permet d’estimer un séjour selon une référence, une date d’entrée, une date de sortie ainsi qu’un nombre de voyageurs. Il permet également de rediriger le client d’autres sites vers la plateforme de réservation Clévacances.
Intégration du widget de réservation
Pour intégrer le widget, il faut ajouter le code suivant dans la page :
<div class="appMountPoint-asideBooking" data-room_id="50202" data-checkin="2020-11-01" data-checkout="2020-11-24" data-adults="3" data-locale="fr" data-source=”web”></div>
Ainsi que le script en fin de page (avant la fermeture de la balise body) :
En environnement pré-production :
<script type="text/javascript" src="https://cdn.preprod-clevacances.fr/widget/sdk.js"></script>
En environnement production :
<script type="text/javascript" src="https://cdn.preprod-clevacances.fr/assets/widget/sdk.js"></script>
Options disponibles
data-room_id : correspond à la référence Clévacances de la zone locative (loc) (format string, obligatoire)
data-checkin : correspond à la date d’entrée dans l’hébergement (format YYYY-MM-DD, non obligatoire)
data-checkout : correspond à la date de sortie de l’hébergement (format YYYY-MM-DD, non obligatoire)
data-adults : correspond au nombre de voyageurs (format int ou string, non obligatoire)
data-locale : correspond à la langue d’affichage du widget (format string, non obligatoire, par défaut français). Valeurs supportées : fr ou en
data-source : correspond à la source du widget (format string, non obligatoire, par défaut customer). Valeurs supportées : web, customer ou partner
data-logo : correspond à la couleur du logo (format string, non obligatoire). Valeurs supportées : blue, white
data-nb_calendar : correspond au nombre de calendrier par sélecteur (format int ou string, non obligatoire)
data-target : correspond à l'ouverture des liens (format string, non obligatoire). Valeurs supportées : self, blank
data-style : correspond à un objet de style custom permettant d’overwrite le style orange de base de Clévacances (format object, non obligatoire).
data-style_id : correspond à un id d'élément HTML contenant le style autre part dans la page (format string, non obligatoire)
Liste des propriétés de l’attribut data-style
contentBorder : gère le style du border global du widget
applyButton : gère le style du bouton “Appliquer” présent dans le sélecteur de voyageur
bookingButton : gère le style du bouton “Réserver”
loadingSpinner : gère le style des spinners de loading
selectedCheckinDay : gère le style des jours du datepicker sélectionnés
checkoutDays : gère le style des jours du datepicker pour les jours d’arrivée ou de départ possible
checkoutDaysOrTripDays : gère le style des jours du datepicker pour les jours disponibles
notBookable : gère le style des jours du datepicker pour les jours non disponible
tripDays : gère le style des jours du datepicker pour les jours du séjour
Exemple d’utilisation du widget avec data-style (bleu)
Exemple d’utilisation du widget avec data-style_id et style séparé dans un script dans le head
Intégration du widget de panier
Le widget de panier Clévacances permet d’afficher les réservations qui ont été ajoutées dans le panier.
Pour intégrer le widget, il faut ajouter le code suivant :
<div class="appMountPoint-cartBooking" data-locale=”fr”></div>
Options disponibles
data-locale : correspond à la langue d’affichage du widget (format string, non obligatoire, par défaut français). Valeurs supportées : fr ou en