1. Démarrage rapide

Deux balises suffisent : le loader, à placer une seule fois dans la page, et la balise du widget, à placer là où le parcours doit apparaître.

<!-- 1. Le loader, une seule fois dans la page -->
<script src="https://cdn.hivebook.fr/widget/v3/loader.js" defer></script>

<!-- 2. Le widget, là où il doit s'afficher -->
<hivebook-appointment
  lang="fr"
  api_key="VOTRE_CLE_API"
  data-theme="light-cyan"
  widget_title="Réservez votre activité">
</hivebook-appointment>

1. Collez les deux balises dans votre page, en remplaçant VOTRE_CLE_API.
2. Publiez, puis ouvrez la page en navigation privée pour éviter tout cache.
3. Vérifiez l’affichage du parcours, puis réalisez une réservation de test sur un créneau réel.
4. Contrôlez dans le planning du Manager que la réservation est bien arrivée, puis annulez-la.

2. Comment le loader fonctionne

3. Versions et canaux

L’URL du loader détermine la version que reçoivent vos visiteurs. Trois canaux sont disponibles selon le niveau de stabilité souhaité.

4. Intégration dans votre site

Les widgets étant des balises HTML standards, ils s’intègrent partout. Il suffit de coller le code à l’endroit où le widget doit apparaître.

<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="Réservez en ligne">
</hivebook-appointment>

5. Plusieurs widgets sur la même page

Placez autant de widgets que nécessaire, de types différents et même avec des clés API différentes. Le loader reste chargé une seule fois.

<!-- Un seul loader, quel que soit le nombre de widgets -->
<script src="https://cdn.hivebook.fr/widget/v3/loader.js" defer></script>

<!-- Réservation du site A -->
<hivebook-appointment
  api_key="CLE_SITE_A"
  data-theme="light-cyan"
  widget_title="Réservez">
</hivebook-appointment>

<!-- Carte cadeau du site A -->
<hivebook-gift
  api_key="CLE_SITE_A"
  data-theme="light-cyan"
  widget_title="Offrez">
</hivebook-gift>

• Chaque widget gère sa propre clé API, son propre thème et son propre état.
• Deux widgets de réservation peuvent viser deux produits différents via product_id.
• Les paniers ne sont pas partagés : un client qui réserve puis achète un bon cadeau passe par deux commandes.

6. Comment les attributs sont interprétés

Les attributs HTML sont toujours des chaînes de caractères. La v3 ne les interprète pas tous de la même façon, et une valeur inattendue ne provoque jamais d’erreur : elle est silencieusement remplacée. Ces règles expliquent la plupart des « le widget ignore mon attribut ».

Attributs à deux états

Valeurs numériques et de repli

Valeurs énumérées

Orthographes acceptées

7. FAQ intégration

Mon widget ne s’affiche pas — que vérifier ?

1. La page est-elle servie en HTTPS ? C’est obligatoire.
2. La balise <script src="…/loader.js"> est-elle bien présente dans le code source publié ?
3. L’attribut api_key est-il renseigné et complet, sans espace ni retour à la ligne ?
4. Le navigateur est-il compatible : Chrome/Edge 80+, Firefox 75+, Safari 14+ ?
5. La maintenance du Widget est-elle activée dans la Boutique ?
6. La console du navigateur (F12 → Console) signale-t-elle une erreur réseau ou de script ?

Puis-je utiliser plusieurs clés API différentes sur la même page ?

Oui, sans restriction. Chaque widget est indépendant. Vous pouvez afficher une réservation du site A et une carte cadeau du site B côte à côte.

Comment personnaliser les couleurs au-delà des thèmes fournis ?

Les widgets utilisent des variables CSS qui traversent la frontière du Shadow DOM. Vous pouvez donc les surcharger depuis votre propre feuille de style, sans modifier les fichiers Hivebook. Voir Personnalisation CSS.

Comment afficher une seule activité ?

Renseignez product_id avec l’identifiant numérique du produit dans votre catalogue Hivebook. Le widget supprime alors l’étape de sélection et ouvre directement le calendrier. La valeur par défaut -1 affiche toutes les activités.

Le widget est-il traduit ?

L’attribut lang accepte fr et en ; la valeur par défaut est fr. Les textes propres à votre offre — titres d’étapes, libellés de tarifs, messages de quota — se personnalisent dans la Boutique, produit par produit. Voir Libellés et textes.

Que se passe-t-il si un client abandonne son paiement ?

La commande reste en Attente paiement puis expire après le délai configuré dans Réglages → Hivebook → Autres. Les places et ressources sont alors libérées. Un délai trop court coupe le client en pleine saisie bancaire ; un délai trop long immobilise les places.