Widget Réservation
Le parcours complet de réservation, du choix de l’activité au paiement.
Balise
<hivebook-appointment>DimensionsCarte de 350 px sur ordinateur · plein écran sur mobile
Dans cette page
Le widget de réservation enchaîne jusqu’à sept étapes, affichées seulement si elles sont pertinentes pour le produit choisi. Son contenu — tarifs, options, titres d’étapes, messages — vient entièrement de la fiche produit : voir Configurer un produit réservable.
1. Attributs
| Attribut | Statut | Défaut | Rôle |
|---|---|---|---|
api_key | Requis | — | Clé fournie par Hivebook, identifiant votre boutique. |
lang | Optionnel | fr | Langue d’affichage : fr ou en. |
data-theme | Optionnel | — | Thème visuel. Voir Thèmes. |
widget_title | Optionnel | — | Titre affiché en en-tête du widget. |
widget_step1 | Optionnel | — | Libellé de l’étape 1, le choix de l’activité. |
product_cat | Optionnel | — | Restreint la liste à une catégorie de produits (identifiant de catégorie). |
product_id | Optionnel | -1 | Force une activité précise. -1 affiche toutes les activités. |
calendar_navigation | Optionnel | full | Mode du calendrier : full ou month. Détail ci-dessous. |
responsive | Optionnel | true | false conserve la mise en page intégrée sur mobile, sans plein écran. |
Choisir le mode de calendrier
| Valeur | Comportement | Quand l’utiliser |
|---|---|---|
full | Charge les disponibilités sur douze mois et propose la navigation par mois disponibles. Seules les dates réellement réservables sont présentées. | Offre saisonnière ou à départs espacés : le client voit immédiatement quand c’est possible. |
month | Affiche un mois à la fois, avec flèches de navigation, et présente tous les jours du mois. | Activité ouverte quasiment tous les jours : le calendrier est plus léger et plus familier. |
Effet sur les performances. Le mode
full interroge une plage de douze mois au premier affichage. Sur une boutique avec beaucoup d’activités et de règles, le mode month affiche le calendrier plus vite. Testez les deux sur votre propre catalogue avant de choisir.2. Exemple complet
HTML
<script src="https://cdn.hivebook.fr/widget/v3/loader.js" defer></script>
<hivebook-appointment
lang="fr"
api_key="VOTRE_CLE_API"
data-theme="light-cyan"
widget_title="Canoë-kayak"
widget_step1="Choix de l'activité"
product_cat=""
product_id="-1"
calendar_navigation="full"
responsive="true">
</hivebook-appointment>Variante — une page par activité. Sur la page « Descente de 7 km », renseignez
product_id="42" et supprimez widget_step1 : l’étape de sélection disparaît et le client arrive directement sur le calendrier. Le titre du widget peut alors reprendre le nom de la page.Variante — une page par famille. Sur la page « Nos locations », renseignez
product_cat="locations" et laissez product_id="-1" : l’étape 1 ne propose que les produits de cette catégorie.3. Le parcours client, étape par étape
| Étape | Écran | Affichée si… | Ce que le client y fait |
|---|---|---|---|
| 1 | Activité | product_id vaut -1 | Choisit l’activité parmi celles du catalogue, avec image et description. |
| 2 | Date et créneau | Toujours | Choisit une date disponible, puis un créneau. Les créneaux pleins affichent Complet. |
| 3 | Tarifs | Toujours | Saisit les quantités par tarif. Le total se recalcule à chaque changement. |
| 4 | Options | Le produit a des extras | Ajoute des options, avec choix de variante si nécessaire. |
| 5 | Coordonnées | Toujours | Saisit prénom, nom, e-mail, téléphone, et éventuellement société et adresse. |
| 6 | Participants | La décharge est activée sur le produit | Saisit les noms des participants et accepte les clauses. |
| 7 | Récapitulatif | Toujours | Vérifie le détail, saisit un code promo, accepte les conditions puis paie. |
Ce que le client voit à l’étape des tarifs
- Le titre, l’indication et la description de chaque tarif, tels que configurés sur le produit.
- Un sélecteur de quantité borné par la capacité réellement disponible.
- La mention Complet sur un tarif dont les ressources sont épuisées.
- Pour un tarif de groupe, un sélecteur de composition et un prix affiché par personne.
- Un lien Plus d’infos ouvrant la description longue du tarif.
Message de quota. Lorsqu’il reste moins de places que le client en demande, le widget affiche un message indiquant le nombre de places restantes. Ce texte se personnalise sur le produit, onglet Labels : prévoyez une porte de sortie — « contactez-nous pour une demande de groupe » — plutôt qu’un simple refus.
Ce que le client voit au récapitulatif
| Ligne | Contenu |
|---|---|
| Activité | Produit, date, créneau et nombre de personnes. |
| Options | Extras retenus et leur quantité. |
| Bon cadeau / Code promo | Champ de saisie, avec message de validation ou de refus. |
| Frais | Taxe de séjour le cas échéant. |
| Coût total / Total | Montant avant et après réductions. |
| Conditions | Cases à cocher issues des conditions de paiement de la Boutique. |
Le bouton final — Je réserve ! — redirige vers la passerelle de paiement. En cas d’indisponibilité survenue entre-temps, le widget affiche « Réservation impossible » suivi du motif, et le client est invité à reprendre le choix du créneau.
4. Séjours multi-jours
Lorsque le produit est configuré en Activité multi-jours, le widget bascule automatiquement : aucun attribut supplémentaire n’est nécessaire côté site.
| Différence | Comportement |
|---|---|
| Étape 2 | Le calendrier demande une date d’Arrivée puis une date de Départ. Les horaires affichés viennent du produit. |
| Disponibilité | Toute la période doit être disponible. Une seule journée fermée invalide le séjour. |
| Tarifs | Les prix sont affichés par nuit, avec le nombre de nuits rappelé (« 3 nuits »). |
| Options | Un extra marqué Calcul par nuit est multiplié par le nombre de nuits ; les autres restent facturés une fois. |
| Taxe de séjour | Ajoutée comme ligne de frais, calculée selon le pourcentage du produit, le coût nocturne moyen, le nombre d’adultes et le nombre de nuits. |
Ne convertissez pas sans recette. Activer le mode multi-jours sur une activité existante change la signification de la durée, des disponibilités, du coût et des ressources. Dupliquez le produit ou travaillez en environnement de test, puis contrôlez un séjour d’une nuit et un séjour de sept nuits.
Exemple — chalet 4 personnes. Produit multi-jours, arrivée 16:00, départ 10:00, taxe de séjour 5 %. Le client choisit du 12 au 15 juillet : le widget annonce 3 nuits, applique le tarif par nuit, multiplie le linge par 3 et facture le ménage une seule fois, puis ajoute la taxe de séjour sur la base des adultes déclarés.
5. Codes promos et bons cadeaux
Le champ Bon cadeau / Code promo du récapitulatif accepte les deux. Un bon cadeau est décompté de son solde ; un code promo applique sa remise en euros ou en pourcentage.
| Message | Cause probable |
|---|---|
| « Le code promo … a été appliqué. » | Code valide, remise visible immédiatement sur le total. |
| « Le code promo … n’est pas valide. » | Code inconnu, expiré, limite d’usage atteinte, ou catégorie de produit non autorisée par la restriction globale. |
Tester les deux issues. Avant une campagne, essayez le code sur un produit autorisé et sur un produit exclu. La restriction par catégories se règle dans Réglages → Hivebook → Coupons.
6. Contrôles avant publication
- Le widget s’affiche sur la page publiée, en navigation privée, sur ordinateur et sur mobile.
- L’étape 1 propose exactement les activités attendues — ni plus, ni moins.
- Une date disponible, une date fermée et un créneau complet se comportent correctement.
- La dernière place passe ; la quantité suivante affiche le message de quota configuré.
- Les bornes exactes des tarifs de groupe sont refusées au bon endroit.
- Les extras modifient le total, et les extras par nuit sont bien multipliés sur un séjour.
- La décharge, si elle est activée, demande les participants et bloque sans acceptation.
- Un code promo valide et un code refusé affichent le bon message.
- Le paiement aboutit, la réservation apparaît dans le planning du Manager et l’e-mail de confirmation arrive.
- Les titres d’étapes et le thème correspondent à la charte du site.