Thèmes & libellés
Harmoniser les widgets avec votre charte, et parler la langue de vos clients.
Thème globalAdministration Hivebook → Réglages → GénéralThème par widgetAttribut
data-themeLibellésAdministration Hivebook → Produits → onglets Widget et Labels
Dans cette page
1. Les neuf thèmes
Chaque thème définit une couleur principale, sa couleur de contraste, un fond doux et une couleur d’accentuation. Tous sont des thèmes clairs : le fond du widget reste blanc pour s’intégrer sans heurt dans un site.
lightThème neutre par défaut
light-cyan#37B6C1 · accent bleu
light-moutarde#B8860B · accent ardoise
light-yellow#FFD133 · texte foncé
light-blue#395FD6 · accent rosé
light-purple#624FAD · accent olive
light-purple-or#5C2582 · accent or #D4B27D
light-black#232323 · accent noir
light-olive#82953A · accent violet
Attention au contraste. Le thème
light-yellow utilise un texte foncé sur la couleur principale, contrairement aux autres thèmes qui emploient du blanc. Si votre charte est claire, vérifiez la lisibilité des boutons avant de retenir ce thème.2. Appliquer un thème
| Portée | Où le définir | Priorité |
|---|---|---|
| Toute la Boutique | Réglages → Hivebook → Général, champ Theme Widget. | Valeur de référence côté Boutique. |
| Un widget précis | Attribut data-theme sur la balise. | L’emporte sur le réglage de la Boutique. |
| Une boutique du catalogue | Troisième segment de l’entrée api_key en multi-sites. | L’emporte sur data-theme pour les cartes de ce site. |
| Le Manager | Réglages → Hivebook → Général, champ Theme Manager. | Indépendant du thème du widget. |
HTML
<!-- Thème appliqué à ce widget uniquement -->
<hivebook-appointment
api_key="VOTRE_CLE_API"
data-theme="light-purple-or"
widget_title="Réservez votre séjour">
</hivebook-appointment>
<!-- Catalogue : un thème par boutique -->
<hivebook-catalog
api_key="Canoë Kayak|CLE_A|light-cyan,Accrobranche|CLE_B|light-olive"
data-theme="light-cyan">
</hivebook-catalog>3. Personnalisation CSS
Quand aucun thème ne correspond à votre charte, surchargez les variables CSS depuis votre propre feuille de style. Les widgets utilisent le Shadow DOM pour isoler leurs styles, mais les variables CSS traversent cette frontière : la surcharge fonctionne sans modifier un seul fichier Hivebook.
| Variable | Ce qu’elle colore |
|---|---|
--primary-color | Couleur principale : boutons, sélections, éléments actifs du calendrier. |
--primary-contrast-color | Texte posé sur la couleur principale. |
--primary-color-shade | Variante utilisée au survol et à l’appui. |
--primary-background | Fond doux des zones mises en avant. |
--secondary-color | Couleur secondaire des éléments d’interface. |
--accent-color | Couleur d’accentuation : badges et mises en avant ponctuelles. |
--accent-text | Texte posé sur la couleur d’accentuation. |
CSS
/* Dans la feuille de style de votre site */
hivebook-appointment,
hivebook-gift,
hivebook-catalog {
--primary-color: #FF6B35;
--primary-contrast-color: #ffffff;
--primary-color-shade: #E55A28;
--primary-background: #FFF1EB;
--accent-color: #1F2933;
--accent-text: #ffffff;
}- Partez du thème le plus proche avec
data-theme, puis ne surchargez que les variables nécessaires. - Renseignez toujours
--primary-contrast-coloren même temps que--primary-color, sinon le texte des boutons peut devenir illisible. - Contrôlez le résultat sur les trois écrans sensibles : calendrier, sélecteurs de quantité, bouton de paiement.
- Si vous figez une version du loader, revérifiez vos surcharges à chaque montée de version.
Ne ciblez pas les classes internes. Les noms de classes à l’intérieur du Shadow DOM ne font pas partie de l’interface publique et peuvent changer d’une version à l’autre. Seules les variables CSS listées ci-dessus constituent un point d’appui stable.
4. Libellés et textes
Les textes du parcours ne se règlent pas dans le code du site : ils viennent de la fiche produit, ce qui permet d’avoir un vocabulaire différent par activité.
Titres et infobulles des étapes
AccèsAdministration Hivebook → Produits → Modifier → Widget
| Champ | Étape concernée | Exemple |
|---|---|---|
| Étape 1 : Titre et Infobulle | Choix de l’activité | « Votre activité » |
| Étape 2 : Titre et Infobulle | Date et créneau | « Choisissez votre départ » |
| Étape 3 : Titre et Infobulle | Tarifs | « Qui participe ? » |
| Étape 4 : Titre et Infobulle | Options | « Compléter votre sortie » |
| Étape 5 : Titre et Infobulle | Coordonnées | « Vos coordonnées » |
| Étape 5-1 : Titre et Infobulle | Participants et décharge — masquée si la décharge est inactive | « Les participants » |
| Étape 6 : Titre et Infobulle | Récapitulatif | « Votre réservation » |
Titre court, infobulle utile. Le titre doit tenir sur une ligne dans une carte de 350 px. Déportez toute consigne secondaire — pièces à apporter, âge minimum, point de rendez-vous — dans l’infobulle : l’icône n’apparaît que si l’infobulle est renseignée.
Libellés métier
AccèsAdministration Hivebook → Produits → Modifier → Labels
| Champ | Où il apparaît | Exemple |
|---|---|---|
| Titre des tarifs | Titre de la zone des tarifs, et sous-titre « Choix des … ». | « participants », « embarcations » |
| Indications pour le dépassement du quota de personnes | Message affiché lorsqu’il reste moins de places que demandé. | « Créneau presque complet — appelez-nous au [votre numéro] pour un groupe. » |
| Informations pratiques | Informations pratiques présentées dans le parcours. | « Prévoir chaussures fermées et une tenue de rechange. » |
Exemple — message de quota efficace. Plutôt que « Complet », écrivez « Il ne reste que quelques places sur ce créneau. Choisissez un autre départ, ou contactez-nous au [votre numéro] pour une demande de groupe. » Le client dispose alors de deux solutions et n’abandonne pas la page.
Textes gérés ailleurs
| Texte | Où le modifier |
|---|---|
| Titre en en-tête du widget | Attribut widget_title sur la balise. |
| Libellé de l’étape 1 | Attribut widget_step1, qui l’emporte pour ce widget. |
| Conditions à cocher avant paiement | Réglages → Hivebook → Paiements, conditions de paiement. |
| Clauses de la décharge | Produit → Hivebook → Décharge de responsabilité. |
| Message de maintenance | Réglages → Hivebook → Maintenance. |
| Boutons et messages génériques | Traductions internes du widget, selon l’attribut lang. |
5. Contrôles
- Le thème retenu reste lisible sur le fond réel de votre page, pas seulement sur fond blanc.
- Les boutons principaux conservent un contraste suffisant avec leur texte.
- Les titres d’étapes ne sont pas tronqués sur mobile.
- Chaque infobulle renseignée s’ouvre et son contenu est à jour.
- Le message de quota propose une alternative au client.
- En multi-sites, chaque boutique s’affiche bien avec son propre thème.