Découvrir le Widget
Trois composants web à poser sur votre site, en deux lignes.
https://cdn.hivebook.fr/widget/v3/loader.jsLes widgets Hivebook sont des Web Components standards — des balises HTML comme les autres. Aucune dépendance, aucun compte à créer : un script à charger une fois dans la page, une balise à placer là où le parcours doit apparaître. Ils s’intègrent dans n’importe quelle page de votre site, sans adaptation.
Le configurateur assemble la balise à partir de vos options et n’écrit que les attributs utiles. Vous n’avez plus qu’à copier.
1. Choisir son widget
<hivebook-appointment>
Parcours complet en étapes : activité, date, tarifs, options, coordonnées, décharge, paiement.
<hivebook-gift>
Achat d’un bon cadeau : carte, montant, acheteur, destinataire, paiement.
<hivebook-catalog>
Grille d’activités pleine largeur avec sélection de date, multi-boutiques possible.
| Votre besoin | Widget conseillé | Pourquoi |
|---|---|---|
| Une page par activité, avec son bouton de réservation | Réservation, avec product_id | Le client arrive directement sur le choix de la date. |
| Une seule page « Réserver » pour toute l’offre | Réservation, sans product_id | L’étape 1 propose la liste des activités. |
| Une vitrine qui montre les disponibilités du jour | Catalogue | Les créneaux restants s’affichent sur chaque carte produit. |
| Plusieurs bases ou sites dans une même page | Catalogue, en mode multi-sites | Une clé par boutique, un thème par boutique si besoin. |
| Vendre des bons cadeaux | Carte cadeau | Parcours dédié avec acheteur et destinataire distincts. |
| Réserver un hébergement ou un séjour | Réservation ou Catalogue | Les deux gèrent la sélection d’une période arrivée / départ. |
2. Nouveautés de la version 3
| Nouveauté | Widget concerné | Ce que cela change pour vous |
|---|---|---|
| Séjours multi-jours | Réservation, Catalogue | Le calendrier propose une date d’arrivée et une date de départ, et le total est calculé à la nuit. |
| Taxe de séjour | Réservation, Catalogue | Ligne de frais ajoutée automatiquement au récapitulatif selon le paramétrage du produit. |
| Extras facturés par nuit | Réservation | Une option peut être multipliée par le nombre de nuits, ou restée facturée une seule fois. |
| Catalogue multi-produits | Catalogue | Une même carte peut porter plusieurs produits, notamment plusieurs logements d’un même site. |
| Commande en modale | Catalogue | Attribut useOrderPopup : le parcours de commande s’ouvre par-dessus le catalogue. |
| Filtre par boutique | Catalogue | Attribut store_filter : le visiteur choisit le site qui l’intéresse. |
| Mode maintenance | Les trois | Le widget affiche un message d’indisponibilité au lieu du parcours lorsque la maintenance est active. |
| Mise en page non responsive | Les trois | Attribut responsive="false" pour conserver la mise en page intégrée sur mobile. |
/v2/loader.js par /v3/loader.js dans votre page. Testez malgré tout un parcours complet après bascule, en particulier sur les produits convertis en séjour.3. Prérequis
http:// n’affichera rien.| Prérequis | Valeur attendue |
|---|---|
| Protocole de la page | https:// |
| Chrome / Edge | 80 ou plus récent |
| Firefox | 75 ou plus récent |
| Safari | 14 ou plus récent |
| Accès réseau | cdn.hivebook.fr et l’adresse de votre boutique Hivebook |
| Droits sur le site | Pouvoir insérer un bloc HTML ou modifier le modèle de page |
4. La clé API
L’attribut api_key est le seul attribut obligatoire des trois widgets. Il identifie votre boutique Hivebook et donne accès à ses produits, créneaux et tarifs.
| Point | À retenir |
|---|---|
| Où l’obtenir | Hivebook vous la communique à l’ouverture de votre espace. |
| Comment l’utiliser | Telle quelle, sans la modifier, sans l’encoder à nouveau. |
| Ce qu’elle contient | L’adresse de votre boutique sous forme encodée. Une clé erronée interroge donc une autre boutique, ou aucune. |
| Plusieurs boutiques | Une clé par boutique. Le widget Catalogue sait en agréger plusieurs — voir Multi-sites. |
| Confidentialité | La clé est publique par nature : elle figure dans le code source de votre page. Elle ne donne accès qu’au catalogue et à la prise de réservation, jamais au Manager. |
5. Affichage et responsive
| Widget | Ordinateur | Mobile (≤ 767 px) |
|---|---|---|
| Réservation | Carte de 350 px de large, intégrée dans le flux de la page. | Vignette, puis parcours plein écran à l’ouverture. |
| Carte cadeau | Carte de 350 px de large. | Vignette, puis parcours plein écran. |
| Catalogue | Grille pleine largeur, nombre de colonnes réglable. | Grille à une colonne. |
L’attribut responsive="false" désactive le passage en plein écran sur mobile : le widget conserve alors sa mise en page intégrée. Utile lorsque le widget est déjà placé dans un conteneur étroit maîtrisé, ou dans une modale de votre site.