Branding et théming
Branding et théming
Configurer l’identité visuelle globale du site — logo, couleurs, titre, liens de footer et comment ces choix s’appliquent partout via les tokens de design
Personnalisez l’apparence publique de votre projet et comprenez comment chaque réglage est propagé globalement pour un theming cohérent.
Ce que couvre cette page
Identité & contenus
Nom du site, slogan, logo, favicon, image Open Graph et liens de pied de page.
Couleurs & typographie
Choix de la couleur primaire, accent, fond et texte ; aperçu et tests de contraste.
Théming global
Explication de la façon dont les variables de design et les tokens de thème propagent les changements dans toute l’interface.
Détection automatique (scraper)
Comment utiliser la détection automatique pour extraire logo et couleurs depuis un site externe.
Tickets publics
Comment fonctionne le formulaire public pour envoyer des tickets et comment ils sont routés vers vos contacts.
Bonnes pratiques
Conseils pour garder une identité cohérente, gérer domaines personnalisés et valider les modifications.
Vue d’ensemble rapide
Les réglages d’identité que vous modifiez dans l’interface sont appliqués globalement : ils alimentent un jeu de variables de design (couleurs, rayon des bordures, poids de texte…) et des tokens de thème. Ces tokens contrôlent l’apparence de chaque composant du site public et de l’interface embarquée.
Introduction
Ce guide vous explique, étape par étape, comment éditer l’identité visuelle de votre site public, utiliser la détection automatique (scraper) pour importer logo et couleurs, et gérer les tickets envoyés depuis le formulaire public. Vous apprendrez aussi comment vos choix sont propagés globalement via des variables de design et des tokens de thème afin d’obtenir un rendu cohérent (couleurs principales, arrière-plan, textes, bordures, etc.).
Avant de commencer
Rassemblez vos actifs (logo en haute qualité, favicon, couleurs hex ou HSL, texte de slogan et liens de pied de page) pour pouvoir remplir tous les champs d’un seul coup. Cela réduit les aller-retours et vous permet de prévisualiser l’ensemble.
Éditer le branding (Paramètres > Site) — workflow détaillé
Étape 1 — Ouvrir la page de branding
Accédez à Paramètres, puis à la section Site (ou Design). Cette page regroupe l’identité, les couleurs, la typographie et les liens du footer.
Étape 2 — Modifier le titre et le slogan
Dans la section Identité, renseignez le nom du site (titre) et le slogan. Ces valeurs apparaîtront dans le header public et dans les métas partagés sur les réseaux sociaux.
Étape 3 — Mettre les images (logo, favicon, OG)
Collez les URL ou téléversez les images pour : le logo principal, le favicon et l’image Open Graph. Vérifiez le rendu sur fond clair et foncé si disponible.
Étape 4 — Choisir les couleurs principales
Saisissez la couleur primaire et, si disponible, les couleurs d’accent, de fond et de texte. Utilisez le sélecteur pour tester la lisibilité. Un aperçu instantané doit montrer le rendu sur un bloc de texte.
Étape 5 — Configurer les liens du footer
Ajoutez autant de liens de pied de page que nécessaire (libellé + URL). Réorganisez-les dans l’ordre souhaité et supprimez ceux obsolètes.
Étape 6 — Ajuster la typographie et le rayon global
Choisissez la police disponible et ajustez le rayon des bordures (bord radius). Ces valeurs deviennent des tokens globaux et affectent boutons, cartes et champs.
Étape 7 — Prévisualiser
Utilisez l’aperçu intégré pour vérifier l’ensemble : header, couleurs, boutons, liens du footer et carte de partage.
Étape 8 — Sauvegarder et attendre la propagation
Cliquez sur Enregistrer. Les changements sont appliqués globalement. Selon la plateforme, la propagation est immédiate ou prend quelques secondes ; rafraîchissez la page publique pour voir le résultat.
Étape 9 — Vérifier sur plusieurs navigateurs et tailles d’écran
Contrôlez rendu et contraste sur mobile, tablette et desktop, ainsi que sur thèmes clair et foncé.
Étape 10 — Itérer si nécessaire
Si un composant ne s’aligne pas parfaitement, ajustez la couleur ou le rayon et répétez la prévisualisation.
Test de contraste rapide
Après avoir choisi les couleurs, lisez leur aperçu « texte sur fond » proposé. Si l’outil propose un indicateur de contraste, visez un ratio accessible (AA ou AAA selon vos besoins).
Scraper branding (Détection automatique depuis une URL) — workflow détaillé
Étape 1 — Ouvrir l’outil de détection
Dans la section Couleurs ou Auto-detect, repérez le champ « Entrer une URL » puis saisissez l’adresse du site dont vous voulez extraire branding (ex. la page d’accueil).
Étape 2 — Lancer l’analyse
Cliquez sur le bouton Détecter / Scrape. L’opération démarre en arrière-plan ; un indicateur doit afficher l’état (analyzing).
Étape 3 — Attendre la complétion
Le scraping est asynchrone. Attendez la fin (quelques secondes à quelques dizaines de secondes selon le site). Si l’opération échoue, un message d’erreur s’affiche.
Étape 4 — Inspecter les résultats proposés
Un aperçu des couleurs, logo et suggestions typographiques est présenté. Comparez avec votre identité existante et sélectionnez ce que vous souhaitez intégrer.
Étape 5 — Intégrer au formulaire
Pour chaque élément (couleur primaire, logo, favicon, police), cliquez sur « Importer » ou « Intégrer » pour remplir automatiquement les champs du formulaire.
Étape 6 — Ajuster manuellement
Corrigez les couleurs si nécessaire (parfois la couleur extraite n’est qu’une teinte dominante). Affinez le contraste et la hiérarchie visuelle.
Étape 7 — Sauvegarder
Enregistrez les modifications. Si le scraping a échoué, réessayez avec une URL différente ou importez manuellement les actifs.
Étape 8 — Gérer les échecs courants
Si le scrape ne retourne rien : le site cible peut bloquer les requêtes automatisées, utiliser des images chargées dynamiquement, ou rediriger. Essayez la page principale, attendez un peu, ou importez manuellement.
Limites du scraping
Le scraping est une opération asynchrone et peut échouer selon le site cible (blocage anti-bot, chargement dynamique, restrictions CORS). Préparez une alternative manuelle si l’import automatique ne fonctionne pas.
Gérer les tickets publics (formulaire de signalement) — workflow détaillé
Étape 1 — Vérifier la configuration des contacts
Dans les paramètres du site, assurez-vous que les contacts destinataires des tickets publics sont correctement renseignés (adresses email et ordre de priorité).
Étape 2 — Vérifier l’état du messenger embarqué
Activez ou copiez le snippet d’intégration pour placer le messenger sur vos pages externes (généralement fourni sous la section d’intégration).
Étape 3 — Tester le formulaire public
Accédez à la page publique (ou intégrez le snippet sur une page de test), remplissez le formulaire de signalement (titre, description, contact optionnel) et soumettez.
Étape 4 — Confirmer la réception côté projet
Le ticket soumis doit être validé et routé vers les contacts configurés. Vérifiez que vous recevez l’email de notification ou que le ticket apparaît dans l’espace de gestion des tickets.
Étape 5 — Surveiller les erreurs
Si l’envoi échoue, vérifiez la validité des adresses email des contacts et la configuration des notifications. Corrigez les destinataires puis retestez.
Étape 6 — Processus post-réception
Traitez le ticket : assignation, réponse au reporter, ou escalade selon votre workflow interne.
Étape 7 — Tester la sécurité et la validation
Assurez-vous que le formulaire public applique des validations (champs obligatoires, limite de longueur) pour éviter le spam et les soumissions malformées.
Étape 8 — Reproduire et documenter
Pour tout problème fréquent signalé, ajoutez une FAQ dans le site public afin de réduire le volume des tickets répétitifs.
Bonnes pratiques pour les tickets publics
- Activez des validations claires (email, description minimale) pour améliorer la qualité des reports. 2) Prévoyez un message automatique indiquant les délais de réponse pour réduire l’anxiété des reporters.
Domains personnalisés et unicité
Un domaine personnalisé doit être validé et unique par projet. Avant d’ajouter un domaine, vérifiez qu’il n’est pas déjà enregistré pour un autre projet et suivez la procédure de validation fournie (ajout d’enregistrements DNS, vérifications).
Utilisez les champs d’interface (couleurs, logo, défauts typographiques). Idéal pour la plupart des besoins : rapide, visuel, sans risque. Les changements s’appliquent immédiatement et alimentent les valeurs globales visibles dans l’aperçu.
Avant : couleurs et logo embarqués directement dans les composants → incohérences possibles et overrides locaux.
Après : valeurs centralisées (tokens) → cohérence visuelle, modifications globales rapides et support natif du mode sombre.
Détails pratiques & cas particuliers
- Variables courantes que vous verrez dans l’interface : couleur primaire, couleur d’accent, couleur de fond, couleur du texte, rayon des bordures, poids de texte. Modifier l’une d’elles met à jour l’apparence globale.
- Si vous fournissez deux versions du logo (clair et sombre), le système choisira automatiquement en fonction du thème affiché.
- Certains éléments tiers (widgets externes) peuvent ne pas hériter automatiquement de vos tokens ; vérifiez les intégrations et appliquez des styles au besoin via les options d’intégration.
- Conservation des anciennes valeurs : les modifications écrasent les valeurs actuelles. Si vous souhaitez revenir en arrière, conservez une copie des valeurs précédentes (ex. capture d’écran ou notes).
Versioning de votre design
Conservez un petit document de « design tokens » (liste de couleurs et valeurs) pour chaque version majeure du site. Cela facilite les retours en arrière et la coordination entre équipes.
Avant / Après : exemples concrets
- Changer la couleur primaire de bleu à violet mettra à jour les boutons, liens importants et accents de navigation.
- Modifier le rayon global rendra tous les boutons et cartes plus ou moins arrondis en une seule opération.
- Ajuster la couleur de fond et la couleur de texte mettra à jour la lisibilité sur l’ensemble des pages.
Frequently Asked Questions
Vérifiez la diffusion des tokens
Après une mise à jour importante des tokens, parcourez les pages critiques (page d’accueil, formulaires, pages de partage) : certains composants ou intégrations externes peuvent nécessiter une correction manuelle.
Résumé & checklist de déploiement
- Préparer : logos, favicon, image OG, couleurs, slogan et liens du footer.
- Tester : aperçu, contraste, mobile/desktop, clair/foncé.
- Intégrer : copier le snippet d’embed du messenger si nécessaire.
- Valider : domaines personnalisés uniques et contacts pour les tickets publics.
- Sauvegarder et documenter les tokens pour la maintenance future.
Prêt à personnaliser votre site ?
Personnalisez votre identité visuelle et testez la propagation sur le site public.