Widget Builder
Dans le Widget Builder, tu assembles visuellement ce qui doit apparaître sur ton site.
Créer une intégration
Lorsque tu crées une nouvelle intégration, une fenêtre avec des modèles s'ouvre d'abord :
| Modèle | Description |
|---|---|
| Planning de cours | Titre avec vue hebdomadaire |
| Complet | Planning, forfaits et coachs en mise en page 2 colonnes |
| Forfaits uniquement | Focus sur les forfaits de crédit |
| Focus équipe | Présentation de l'équipe en grille |
| Quick-View | Liste compacte des prochains cours |
| Vide | Partir de zéro et tout construire soi-même |
Donne un nom à ton intégration (ex. "Page d'accueil", "Page des cours"), choisis un modèle et clique sur "Créer". Le modèle sert de point de départ - tu peux ensuite tout adapter librement dans le builder.
Structure
Le builder comporte trois zones :
| Zone | Position | Fonction |
|---|---|---|
| Catalogue de widgets | Gauche | Tous les widgets disponibles à ajouter |
| Canvas | Centre | Ton intégration - ici tu vois l'aperçu en direct |
| Paramètres | Droite | Configuration du widget sélectionné |
Lignes et colonnes
Les widgets sont organisés en lignes. Chaque ligne peut avoir une mise en page de colonnes spécifique :
| Mise en page | Description |
|---|---|
| 1 colonne | Pleine largeur (100 %) |
| 2 colonnes (50/50) | Deux colonnes de même largeur |
| 2 colonnes (33/66) | Colonne gauche étroite, colonne droite large |
| 2 colonnes (66/33) | Colonne gauche large, colonne droite étroite |
| 3 colonnes (33/33/33) | Trois colonnes de même largeur |
Comment créer une mise en page
- Cliquer sur "Ajouter une ligne" dans le canvas
- Choisir la mise en page de colonnes souhaitée
- Faire glisser les widgets dans les colonnes individuelles
Sur les appareils mobiles, toutes les mises en page en colonnes sont automatiquement affichées en empilé.
Ajouter des widgets
Par glisser-déposer
- Sélectionner un widget dans le catalogue (gauche)
- Le faire glisser dans une colonne du canvas
- Lâcher à la position souhaitée
Modifier l'ordre
Fais glisser les widgets à l'intérieur d'une colonne vers le haut ou le bas pour modifier l'ordre.
Supprimer un widget
Sélectionner le widget et cliquer sur l'icône de suppression (corbeille).
Widgets disponibles
Widgets principaux
Planning de cours
Planning interactif avec toutes les séances de ton studio.
| Paramètre | Options |
|---|---|
| Vue | Semaine, Liste, Tuiles ou regroupé par coach |
| Afficher les filtres | Oui / Non - affiche les filtres catégorie et coach |
| Semaines en avant | 1 à 8 - combien de semaines sont affichées |
| Tuiles par ligne | 2, 3 ou 4 (uniquement en vue tuiles) |
| Bouton de réservation | Oui / Non |
| Filtre par catégorie | Afficher optionnellement uniquement certaines catégories |
| Filtre par coach | Afficher optionnellement uniquement certains coachs |
Lorsqu'un visiteur clique sur un cours, une fenêtre de détail s'ouvre avec description, infos sur le coach, horaire, capacité et plus encore. De là, le visiteur peut réserver le cours sur la plateforme Bookicorn (s'ouvre dans un nouvel onglet).
Forfaits de crédit
Affiche tous les forfaits de crédit avec prix, crédits et fonctionnalités. Via le bouton "Acheter maintenant", le visiteur est redirigé vers la plateforme Bookicorn pour acquérir le forfait.
| Paramètre | Options |
|---|---|
| Mise en page | Grille, Liste ou Carrousel |
| Max. forfaits | 1 à 12 |
| Tri | Popularité, Prix ou Crédits |
| Badge "Populaire" | Oui / Non - marque les forfaits populaires |
Vue d'ensemble des coachs
Affiche ton équipe avec photos de profil, bio et spécialisations.
| Paramètre | Options |
|---|---|
| Mise en page | Grille, Liste ou Carrousel |
| Max. coachs | 1 à 20 |
| Afficher la bio | Oui / Non |
| Spécialisations | Oui / Non |
Lorsqu'un visiteur clique sur un coach, une fenêtre de profil s'ouvre avec bio, spécialisations, liens réseaux sociaux et prochains cours.
Widgets avancés
Prochains cours
Liste compacte des prochaines séances.
| Paramètre | Options |
|---|---|
| Nombre | 1 à 20 |
| Afficher le coach | Oui / Non |
| Filtre par catégorie | Optionnellement uniquement certaines catégories |
Quick Book
Met en avant un seul cours - avec date, capacité et bouton "Réserver maintenant". Idéal pour promouvoir une offre spécifique.
| Paramètre | Options |
|---|---|
| Cours | Menu déroulant pour sélectionner le cours |
| Texte du bouton | Libre (par défaut : "Réserver maintenant") |
Catégories
Catégories de cours filtrables à parcourir.
| Paramètre | Options |
|---|---|
| Style | Pills (boutons) ou Cards (cartes) |
| Afficher le nombre | Oui / Non - affiche le nombre de cours par catégorie |
Trainer Spotlight
Un seul coach en vedette - parfait pour présenter un coach.
| Paramètre | Options |
|---|---|
| Coach | Menu déroulant pour la sélection |
| Afficher les cours | Oui / Non |
| Max. cours | Nombre de prochains cours |
Marketing
Avis
Avis des clients de ton studio.
| Paramètre | Options |
|---|---|
| Nombre | 1 à 20 |
| Note minimum | 1 à 5 étoiles |
| Style | Cartes ou Carrousel |
| Autoriser les avis | Oui / Non - affiche le bouton "Laisser un avis" |
Widgets membres
Ces widgets sont destinés aux membres connectés.
Bouton de connexion
Bouton pour se connecter à Bookicorn.
| Paramètre | Options |
|---|---|
| Texte du bouton | Libre |
| Redirection | URL après connexion (optionnel) |
Statut des crédits
Affiche le solde actuel du membre connecté.
| Paramètre | Options |
|---|---|
| Style | Compact ou Détaillé |
Mes réservations
Liste des prochaines réservations du membre.
| Paramètre | Options |
|---|---|
| Nombre | Réservations affichées |
| Afficher les passées | Oui / Non |
Lieu
Carte du lieu
Carte avec l'emplacement de ton studio.
| Paramètre | Options |
|---|---|
| Hauteur | En pixels |
| Zoom | Niveau de zoom de la carte |
| Afficher l'itinéraire | Oui / Non |
Widgets de mise en page
Les widgets de mise en page t'aident à structurer ton intégration.
Titre
| Paramètre | Options |
|---|---|
| Texte | Libre |
| Taille | H1, H2, H3 ou H4 |
| Alignement | Gauche, Centré ou Droite |
Bloc de texte
| Paramètre | Options |
|---|---|
| Contenu | Texte libre (HTML) |
| Alignement | Gauche, Centré ou Droite |
Espacement (Spacer)
| Paramètre | Options |
|---|---|
| Hauteur | 8 à 200 pixels |
Séparateur (Divider)
| Paramètre | Options |
|---|---|
| Style | Continu, Tirets ou Pointillés |
| Couleur | Couleur personnalisée optionnelle |
Enregistrer et aperçu
Enregistrer
Clique en haut à droite sur "Enregistrer". Les modifications sont immédiatement en ligne - la version mise à jour apparaît sur ton site.
En cas de modifications non enregistrées, tu seras averti lors de la sortie du builder.
Aperçu
Clique sur "Aperçu" pour voir l'intégration dans un nouvel onglet en plein écran. L'aperçu affiche des données en direct de ton studio.
Conseils
Composition recommandée pour la page d'accueil
- Titre ("Nos cours")
- Prochains cours (3-5)
- Espacement
- Titre ("Forfaits de crédit")
- Forfaits de crédit
- Espacement
- Titre ("Notre équipe")
- Vue d'ensemble des coachs
Pour une page de planning
- Planning (vue hebdomadaire, filtres actifs)
Pour une page de tarifs
- Titre ("Nos forfaits")
- Forfaits de crédit (mise en page grille)
- Espacement
- Avis (carrousel)
Conseil de performance
Moins c'est plus. Un widget avec planning et forfaits se charge plus rapidement que dix widgets différents sur une page. Utilise des intégrations séparées pour différentes pages de ton site.
Questions fréquentes
Puis-je utiliser un widget plusieurs fois ?
À l'intérieur d'une intégration, chaque type de widget ne peut apparaître qu'une seule fois. Crée des intégrations séparées pour différentes pages.
Pourquoi ne vois-je pas de données dans le builder ?
Assure-toi d'avoir créé des cours, des forfaits ou des coachs dans ton studio. Le builder affiche des données en direct.
Que se passe-t-il si je modifie l'ordre ?
Après l'enregistrement, le nouvel ordre est immédiatement visible sur ton site.
Responsive - à quoi ça ressemble sur téléphone ?
Tous les widgets sont entièrement responsive. Les mises en page multi-colonnes sont automatiquement empilées sur les petits écrans. Tu peux utiliser la fonction d'aperçu pour tester différentes tailles d'écran.