Aller au contenu

Identité Visuelle & Médias

Chemin : /dashboard/settings (onglet Branding) · Permission : Module Paramètres

Personnalisez l'identité visuelle de votre assistant IA pour qu'elle corresponde à votre marque. L'identité visuelle s'applique à la fois au tableau de bord et au widget que voient vos utilisateurs.

Paramètres d'identité visuelle Paramètres d'identité visuelle

Votre logo apparaît dans l'en-tête du tableau de bord et, en option, dans le widget.

Spécification Détails
Largeur minimale 200px
Taille d'affichage max Redimensionné automatiquement à 350px de large
Format recommandé PNG avec fond transparent
Méthode d'envoi Glisser-déposer ou sélecteur de fichier

Conseils :

  • Utilisez un PNG transparent pour un alignement propre sur les fonds clairs et sombres.
  • Téléchargez une image à 2x la taille d'affichage souhaitée pour un rendu net sur les écrans Retina.
  • Évitez les logos très hauts — les formats larges/horizontaux fonctionnent mieux dans l'en-tête.

Favicon

Le favicon apparaît dans les onglets du navigateur et les favoris.

Spécification Détails
Taille minimale 16x16 pixels
Traitement Recadré en carré, redimensionné à 48x48 max
Format recommandé PNG ou SVG

Conseils :

  • Utilisez une icône simple, une lettre ou un symbole — les images complexes deviennent illisibles à petite taille.
  • Si votre logo est détaillé, créez une version simplifiée du favicon (par exemple, juste la première lettre ou le symbole de l'icône).

Couleurs

Paramètre Ce qu'il contrôle Exemple
Couleur primaire Couleur principale du thème — en-tête du widget, boutons, états actifs, surbrillance de la barre latérale #3b82f6 (bleu), #10b981 (vert)
Couleur secondaire Couleur d'accentuation — états de survol, liens, boutons secondaires #6366f1 (indigo), #f59e0b (ambre)

Saisissez directement les codes couleur hexadécimaux ou utilisez le sélecteur de couleurs intégré. L'aperçu des changements est immédiat dans le tableau de bord.

Conseils sur les couleurs

  • Respectez votre marque — Utilisez la couleur de marque principale de votre entreprise pour une cohérence entre votre site web et le widget.
  • Assurez le contraste — Les couleurs sombres fonctionnent mieux pour les en-têtes et les boutons. Évitez les couleurs très claires qui ne seront pas lisibles sur des fonds blancs.
  • Testez sur le widget — Après avoir modifié les couleurs, ouvrez le widget sur votre site web pour vérifier la lisibilité et la cohérence visuelle.

Typographie

Choisissez parmi des familles de polices premium. Le sélecteur de polices est sensible à la langue — il affiche automatiquement les polices qui supportent les jeux de caractères de vos langues activées.

Langue Exemples de polices
Anglais / Latin Inter, Poppins, Open Sans, Roboto, Montserrat
Hébreu Heebo, Assistant, Rubik, Open Sans Hebrew
Arabe Cairo, Tajawal, IBM Plex Arabic
CJK Noto Sans CJK (sélectionné auto)

La police sélectionnée s'applique à la fois au tableau de bord et au widget, garantissant une expérience de marque cohérente pour votre équipe et vos utilisateurs.

Avatars du widget

L'avatar est l'image de profil que les utilisateurs voient à l'intérieur du widget de chat. Il définit le ton de la conversation — amical, professionnel ou institutionnel.

Option Détails Idéal pour
Galerie Choisissez parmi un ensemble d'avatars pré-conçus avec de larges fiches d'aperçu Configuration rapide, aspect professionnel
Upload Téléchargez votre propre image — automatiquement recadrée et optimisée en PNG 100x100 Mascotte de marque, photo d'équipe, icône personnalisée
URL Collez l'URL d'une image externe Avatars dynamiques depuis un CDN (note : dépend de la disponibilité de l'hôte externe)

Conseils pour l'avatar

  • Utilisez un visage amical ou une icône — Les avatars avec un visage (humain ou illustré) augmentent l'engagement de 15 à 25 %.
  • Match avec votre marque — Si vous avez une mascotte ou une icône de logo, utilisez-la pour une reconnaissance immédiate de la marque.
  • Évitez les images chargées en texte — À 100x100 pixels, le texte devient illisible.

CSS Personnalisé

Pour une personnalisation avancée, ajoutez du CSS personnalisé qui remplace les styles par défaut du tableau de bord. C'est utile pour :

  • Respecter des chartes graphiques d'entreprise spécifiques au-delà des couleurs primaire/secondaire
  • Ajuster l'espacement, les bordures ou les nuances de couleurs
  • Masquer ou repositionner des éléments de l'interface utilisateur pour des déploiements spécialisés

Exemple : Style de bouton personnalisé

.btn-primary {
    border-radius: 8px !important;
    font-weight: 700 !important;
}

À utiliser avec prudence

Les remplacements CSS personnalisés peuvent perturber la mise en page du tableau de bord si les sélecteurs changent lors des mises à jour. Limitez les modifications au strict minimum, documentez vos changements et testez après chaque mise à jour du système.

FAQ

Q : Pourquoi mon logo paraît-il flou ?

  • Téléchargez une image source plus grande (au moins 2x la taille d'affichage souhaitée) et laissez le système la réduire. Une image de 700px de large sera nette à une taille d'affichage de 350px.

Q : Puis-je utiliser une URL au lieu de télécharger le fichier ?

  • Oui, pour les logos et les avatars. Mais les URL externes peuvent ne plus fonctionner si l'hôte modifie les chemins ou passe hors ligne. Le téléchargement direct est plus fiable.

Q : Les changements d'identité visuelle affectent-ils le widget immédiatement ?

  • Oui. Les modifications (couleurs, logo, avatar) prennent effet immédiatement pour les nouvelles sessions du widget. Les sessions déjà ouvertes peuvent nécessiter un rafraîchissement de la page pour voir les mises à jour.

Q : L'identité visuelle est-elle par bot ou globale ?

  • L'identité visuelle est définie par bot. Chaque bot dans une configuration multi-bot peut avoir ses propres couleurs, logo et avatar.