Personnaliser

Adapte l'apparence de tes widgets au design de ton site. Tous les paramètres se trouvent dans le Widget Builder sous les Paramètres d'intégration (icône d'engrenage).

Thèmes

Les thèmes sont des combinaisons de couleurs prédéfinies qui changent l'apparence générale de ton widget en un clic.

Thèmes disponibles

Choisir un thème

1. Ouvrir le Widget Builder
2. Cliquer sur l'icône d'engrenage (Paramètres d'intégration)
3. Choisir le schéma de couleurs souhaité sous "Thème"
4. Les couleurs sont automatiquement appliquées

Couleurs personnalisées

Choisis "Couleurs personnalisées" pour configurer chaque couleur individuellement. Ou choisis un thème comme point de départ et ajuste ensuite les couleurs individuelles.

Couleurs

Tu peux configurer les couleurs suivantes individuellement :

Modifier une couleur

1. Cliquer sur le carré de couleur à côté de la couleur concernée
2. Choisir une couleur avec le sélecteur de couleur ou saisir un code hexadécimal (ex. #84CC16)
3. L'aperçu dans le canvas se met à jour immédiatement

Conseil : Utilise la même couleur primaire que sur ton site - ainsi le widget s'intègre parfaitement.

Paramètres du conteneur

Ces paramètres concernent le cadre extérieur de l'ensemble du widget.

Largeur

Largeur maximale

Limite la largeur même avec un paramètre en pourcentage :

Espacement intérieur (Padding)

Arrondi des coins (Border Radius)

Contrôle l'arrondi des coins des cartes et des éléments à l'intérieur du widget. Valeurs de 0px (carré) à 32px (très arrondi).

Ombre

Active ou désactive une légère ombre autour du widget.

Mises en page spécifiques aux widgets

Certains widgets proposent différentes options de mise en page :

Grille

• Grille responsive automatique
• Les éléments remplissent l'espace disponible
• Sur les petits écrans, passe automatiquement en une colonne

Liste

• Liste verticale
• Chaque élément utilise la pleine largeur
• Idéal pour les affichages détaillés

Carrousel

• Défilement horizontal
• Optimisé pour le tactile sur mobile
• Navigation avec des flèches sur ordinateur

Comportement responsive

Tous les widgets s'adaptent automatiquement à la taille de l'écran :

Tu n'as rien à configurer - le comportement responsive fonctionne automatiquement.

Terminologie dynamique

Les widgets utilisent automatiquement les termes que tu as configurés dans ton studio :

• Au lieu de "Trainer", tu peux avoir Coach, Instructeur ou Thérapeute
• Au lieu de "Cours", tu peux avoir Ateliers, Séminaires ou Sessions

Modifier la terminologie

1. Aller dans Paramètres → Général → Terminologie
2. Choisir les termes adaptés à ton studio
3. Les widgets appliquent le changement automatiquement - pas besoin de réintégrer

Branding

Automatiquement repris

Les widgets reprennent automatiquement :

• Le nom de ton studio
• Ta terminologie choisie
• Les couleurs configurées

Isolation de ton site

Le widget fonctionne dans une zone isolée (Shadow DOM). Cela signifie :

• Le CSS de ton site n'a aucune influence sur l'apparence du widget
• Le CSS du widget ne modifie rien sur ton site
• Les couleurs et le style sont contrôlés exclusivement via les paramètres du widget

Bonnes pratiques

Adapter au site

• Utilise la même couleur primaire que sur ton site
• Choisis un arrondi des coins similaire
• Adapte le fond (transparent convient souvent le mieux)

Moins c'est plus

• Les paramètres par défaut sont optimisés pour la plupart des sites
• Commence avec un thème adapté et ajuste uniquement la couleur primaire
• Teste toujours sur ordinateur et téléphone

Tester

• Utilise la fonction d'aperçu dans le builder
• Vérifie le widget sur ton vrai site
• Teste sur différents appareils et navigateurs
• Clique partout : cliquer sur des cours, utiliser les filtres, voir les profils de coachs

Questions fréquentes

Puis-je ajouter mon propre CSS au widget ?

Non. Le widget fonctionne dans un Shadow DOM isolé qui ne peut pas être ciblé par du CSS externe. Toutes les personnalisations visuelles se font via les paramètres du Widget Builder.

Pourquoi le widget sur mon site a-t-il un aspect différent de l'aperçu ?

Le widget s'adapte à la largeur du conteneur dans lequel il est placé sur ton site. Si le conteneur est plus étroit que dans le builder, la mise en page sera légèrement différente. Mais les contenus s'adaptent automatiquement.

Puis-je changer la police ?

Les widgets utilisent des polices système pour des temps de chargement rapides. Une police personnalisée n'est pas configurable pour l'instant.

Les modifications sont-elles visibles immédiatement ?

Oui. Dès que tu cliques sur "Enregistrer" dans le Widget Builder, les modifications sont immédiatement visibles sur ton site. Tu n'as pas besoin de réinsérer le code d'intégration.

Dois-je mettre à jour le code d'intégration quand je modifie quelque chose ?

Non. Le code d'intégration reste toujours le même. Toutes les modifications de design, de widgets et de contenu sont automatiquement répercutées.

Prochaines étapes

• Intégrer le widget sur ton site
• Découvrir le Widget Builder
• Retour à la vue d'ensemble