Votre widget de base de connaissances est souvent le premier point de contact qu’un utilisateur a avec votre contenu de support. Un widget qui correspond à l’identité visuelle de votre produit paraît natif et digne de confiance — un widget qui ne correspond pas à un simple détail tiers. Cet article traite de tous les paramètres visuels disponibles pour le widget et explique quand et pourquoi vous utiliseriez chacun d’eux.
Référence des réglages de style
| Cadre | Ce qu’il contrôle |
|---|---|
| Couleur du widget | Le thème et la couleur de fond des icônes |
| Icône widget | Le graphique du bouton qui ouvre le widget |
| Position du widget | Côté gauche ou droit de l’écran, avec contrôle de l’espacement |
| Message de bienvenue | Une courte invite s’affiche au-dessus de l’icône avant que l’utilisateur ne clique |
| Masquer le widget | Supprimer l’icône flottante (utilisée lors du déclenchement via un bouton personnalisé) |
| Masquer les articles les plus recherchés | Supprime les articles tendance affichés à l’ouverture du widget |
Comment ouvrir les paramètres de style des widgets
- Dans la barre de navigation de gauche, allez dans Connexions () > widget de la base de connaissances.
- Surcassez le widget souhaité et cliquez sur l’icône Modifier ().
- Dans l’onglet Configurer & connecter , développez l’accordéon du widget Style .
Les modifications sont sauvegardées automatiquement au fur et à mesure que vous naviguez entre les onglets. Cliquez sur Enregistrer pour appliquer explicitement avant de quitter la page.
Quand configurer le style des widgets
- Lors de la configuration initiale, pour aligner le widget avec les couleurs et l’icône de la marque de votre produit.
- Lors du repositionnement pour éviter le chevauchement avec un widget de chat en direct ou une bannière de cookies.
- Lorsque vous utilisez un bouton de déclenchement personnalisé et que vous souhaitez cacher l’icône flottante par défaut.
- Lors de l’ajout d’un message de bienvenue à l’intégration pour les nouveaux utilisateurs.
Avant que tu commences
Vous devez avoir un rôle de chef de projet ou d’administratif .
Couleur du widget
Pourquoi c’est important : Associer la couleur d’accent de votre widget à la couleur principale de la marque de votre produit donne l’impression d’une partie conçue de votre interface, et non d’un outil intégré. C’est particulièrement important pour les produits SaaS où la cohérence de la marque affecte la qualité perçue.
Comment la régler :
- Cliquez sur Changer de couleur. La palette de couleurs s’ouvre.
- Sélectionnez une couleur depuis le sélecteur, ou entrez directement une valeur hexadécimale, RGB ou HSL.
- Cliquez sur Enregistrer.
Résultat : L’icône du widget et sa barre d’en-tête se mettent à jour immédiatement dans l’aperçu et sur votre site en direct après le chargement de la page suivante.
Exemple : Si votre produit utilise
#0057FFcomme bleu principal, entrer cette valeur hexadécimale fera correspondre parfaitement l’icône du widget à votre barre de navigation et aux boutons CTA.
Icône widget
Pourquoi c’est important : L’icône par défaut est une bulle d’aide générique. Le remplacer par votre logo ou une icône personnalisée indique aux utilisateurs que ce widget appartient à votre produit, et non à un outil tiers — ce qui augmente le taux de clics.
Comment la régler :
- Cliquez sur icône Changer.
- Choisissez dans l’onglet Ensemble d’icônes pour choisir une icône pré-assemblée, ou cliquez sur Insérer une image pour utiliser une image personnalisée :
- Extrait de l’URL : Collez le lien de l’image et cliquez sur Insérer.
- Extrait de l’appareil : Cliquez sur Télécharger une image et sélectionnez votre fichier.
- Cliquez sur Enregistrer.
- Pour revenir en arrière, cliquez sur Default.
Conseil : Utilisez une image carrée avec un fond transparent (PNG, recommandé 64×64px ou plus) pour obtenir un résultat le plus propre à toutes les tailles d’écran.
Position du widget
Pourquoi c’est important : La position par défaut en bas à droite fonctionne pour la plupart des sites, mais certains layouts ont des barres de navigation fixes, des bannières de cookies ou des widgets de discussion dans ce coin. Le repositionnement évite les chevauchements et garantit que le widget est toujours visible et accessible.
Comment la régler :
- Sélectionnez Gauche ou Droite pour choisir de quel côté de l’écran apparaît le widget.
- Saisissez les valeurs dans l’espacement latéral (distance horizontale depuis le bord) et l’espacement inférieur (distance verticale par rapport au bas) en pixels.
- Cliquez sur Enregistrer.
Exemple : Si votre widget de chat en direct est situé en bas à droite avec une marge de 20px, placez votre widget de la Base de connaissances à gauche, au même espacement inférieur, de sorte que les deux soient accessibles sans chevauchement.
Message de bienvenue
Pourquoi c’est important : La plupart des utilisateurs ne remarqueront pas une icône flottante à moins que quelque chose attire leur attention. Un message de bienvenue apparaît sous forme de bulle de discussion au-dessus de l’icône et agit comme un petit coup de pouce — particulièrement utile lors des flux d’intégration ou après le lancement d’une nouvelle fonctionnalité.
Comment la régler :
- Saisissez votre message dans le champ Message de bienvenue (maximum 50 caractères).
- Cliquez sur Enregistrer.
Exemples de messages de bienvenue efficaces :
- « Besoin d’aide ? Commence ici. »
- « Nouveau dans cette fonction ? Nous avons des guides. »
- « Fouillez notre base de connaissances. »
Quand passer à côté : Si votre widget est intégré dans une interface utilisateur très axée sur les tâches (comme un flux de paiement), un message de bienvenue peut sembler intrusif. Laissez-le vide dans ces contextes.
Masquer le widget
Pourquoi c’est important : Si vous déclenchez le widget via un bouton personnalisé (par exemple un lien « Aide » dans votre barre de navigation), vous ne voulez pas que l’icône flottante par défaut apparaisse aussi — cela crée deux points d’entrée et un encombrement visuel. Cacher l’icône du widget vous permet de contrôler exactement où et comment le widget est lancé.
Comment la régler :
- Activez le bouton de Masquer le widget .
- Cliquez sur Enregistrer.
Si vous avez assigné le widget à un bouton personnalisé mais que l’icône flottante apparaît toujours, vérifiez que ce bouton est activé.
Masquer les articles les plus recherchés
Pourquoi c’est important : La section « les plus recherchés » affiche les articles tendance lors de l’ouverture du widget. C’est utile pour les bases de connaissances polyvalentes. Cependant, si votre widget est orienté vers un domaine de produit ou un flux de travail spécifique, afficher des articles populaires sans rapport peut dérouter les utilisateurs.
Comment la régler :
- Activez le bouton « Masquer les articles les plus recherchés ».
- Cliquez sur Enregistrer.
Activer ce basculement désactive également le mappage de liste basé sur l’URL pour le widget. Si vous comptez sur le mappage d’URL vers des listes de catégories de surface sur des pages spécifiques, gardez ce paramètre désactivé.
Meilleures pratiques
- Associez la couleur du widget à la couleur principale du CTA de votre produit pour une sensation native.
- Si un autre widget (par exemple un chat en direct) occupe le coin inférieur droit, déplacez le widget de la base de connaissances vers la gauche avec un espacement inférieur correspondant.
- Utilisez une icône personnalisée avec un fond PNG transparent pour des résultats cohérents avec la marque.
- Laissez le message de bienvenue vide sur les pages à forte intention (payer, soumettre des formulaires) où les distractions nuisent à la conversion.