Personnaliser l'apparence du widget¶
Faites correspondre le widget de chat à votre marque en personnalisant les couleurs, icônes et autres éléments visuels. Ce guide vous montre comment personnaliser l'apparence du widget.
Accéder aux paramètres du widget¶
- Cliquez sur Widget dans le menu de gauche
- Vous verrez la page de configuration du widget
- Les modifications s'affichent en temps réel sur le côté droit
Identité du bot¶
Nom du bot¶
Le nom qui apparaît dans l'en-tête du chat.
Comment modifier :
- Trouvez le champ Nom du bot
- Entrez votre nom préféré
- Cliquez sur Enregistrer
Exemples :
- « Assistant Support »
- « Sarah » (un personnage amical)
- « Aide VotreEntreprise »
- « Concierge Virtuel »
Astuce
Choisissez un nom qui semble naturel. Beaucoup d'entreprises utilisent un prénom humain pour rendre le chat plus personnel.
Icône du bot¶
L'image qui apparaît à côté des messages du bot.
Comment modifier :
- Trouvez le champ Icône du bot
- Entrez l'URL de votre image d'icône
- Cliquez sur Enregistrer
Exigences :
- L'image doit être carrée (ex. 100x100 pixels)
- Utilisez le format PNG ou JPG
- Hébergez l'image sur votre site web ou un service d'hébergement d'images
- Utilisez des URL HTTPS
Exemple :
https://votresite.com/images/icone-chat-bot.png
Note
Si vous n'avez pas d'URL d'image, vous pouvez d'abord téléverser une image sur votre site web, puis copier son URL.
Couleur du thème¶
La couleur principale utilisée dans tout le widget.
Définir votre couleur¶
- Trouvez le champ Couleur du thème
- Entrez un code couleur hexadécimal (ex.
#4F46E5) - Ou utilisez le sélecteur de couleur si disponible
- Cliquez sur Enregistrer
Où la couleur du thème apparaît :
- Fond de l'en-tête du chat
- Bouton d'envoi
- Bulles de messages de l'utilisateur
- Liens et boutons
Choisir une bonne couleur¶
- Correspondez à votre marque - Utilisez votre couleur de marque principale
- Assurez le contraste - Le texte doit être lisible sur la couleur
- Testez sur votre site - Assurez-vous que ça a l'air bien en contexte
Couleurs de marque courantes :
| Couleur | Code Hex |
|---|---|
| Bleu | #3B82F6 |
| Violet | #8B5CF6 |
| Vert | #10B981 |
| Rouge | #EF4444 |
| Orange | #F97316 |
| Sarcelle | #14B8A6 |
Avatars¶
Avatar de l'assistant¶
L'image affichée à côté des messages du bot dans la conversation.
Configuration :
- Trouvez URL de l'avatar assistant
- Entrez l'URL de l'image d'avatar
- Cliquez sur Enregistrer
Peut être la même que l'icône du bot ou différente.
Avatar de l'utilisateur¶
Image optionnelle affichée à côté des messages du visiteur.
Configuration :
- Trouvez URL de l'avatar utilisateur
- Entrez l'URL (ou laissez vide pour le défaut)
- Cliquez sur Enregistrer
La plupart des entreprises laissent ceci par défaut puisque les visiteurs ne voient généralement pas leur propre avatar.
Paramètres de taille¶
Hauteur maximale (Ordinateur)¶
Contrôle la hauteur maximale de la fenêtre de chat sur les ordinateurs de bureau.
Configuration :
- Trouvez Hauteur maximale (Ordinateur)
- Entrez une valeur en pixels (ex.
500) - Cliquez sur Enregistrer
Recommandations :
400-500px- Taille standard, fonctionne pour la plupart des sites600px- Plus grand, pour les conversations riches en contenu- Valeurs plus petites pour les sites avec espace vertical limité
Hauteur maximale (Mobile)¶
Contrôle la hauteur de la fenêtre de chat sur les appareils mobiles.
Configuration :
- Trouvez Hauteur maximale (Mobile)
- Entrez une valeur en pixels
- Cliquez sur Enregistrer
Recommandations :
70-80%de la hauteur de l'écran fonctionne généralement bien- Testez sur de vrais appareils mobiles
- Considérez que les claviers prennent de l'espace sur l'écran
Prévisualiser les modifications¶
Au fur et à mesure que vous faites des modifications :
- Regardez le panneau d'aperçu sur la droite
- Les modifications apparaissent en temps réel
- Testez différentes couleurs et paramètres
- Enregistrez quand vous êtes satisfait
Astuce
Ouvrez votre vrai site web dans un autre onglet pour voir comment les modifications apparaissent dans le contexte réel.
Bonnes pratiques¶
Cohérence de marque¶
- Utilisez la couleur principale de votre marque
- Correspondez au ton de votre site web
- Gardez l'icône professionnelle
Lisibilité¶
- Assurez-vous que le texte est lisible sur les fonds colorés
- Testez avec du texte clair et foncé
- Vérifiez les ratios de contraste pour l'accessibilité
Professionnalisme¶
- Utilisez des images de haute qualité pour les icônes
- Évitez les éléments trop ludiques pour le B2B
- Gardez l'apparence propre et simple
Adapté au mobile¶
- Testez l'apparence sur les appareils mobiles
- Assurez-vous que les zones tactiles sont assez grandes
- Ne rendez pas le widget trop grand sur mobile
Dépannage¶
L'icône ne s'affiche pas¶
- Vérifiez que l'URL est correcte et accessible
- Assurez-vous que l'URL utilise HTTPS
- Vérifiez que l'image existe à cette URL
- Essayez d'ouvrir l'URL directement dans un navigateur
La couleur semble différente¶
- Le rendu des navigateurs peut varier légèrement
- Vérifiez que le code hex est correct
- Regardez sur différents appareils
Les modifications n'apparaissent pas¶
- Assurez-vous d'avoir cliqué sur Enregistrer
- Rafraîchissez votre site web
- Videz le cache du navigateur
- Essayez dans une fenêtre incognito/privée
Prochaines étapes¶
- Paramètres de comportement - Configurez comment le widget se comporte
- Installer le widget - Ajoutez le widget à votre site