CSS & JavaScript personnalisés dans Eddy AI Chatbot vous permet d’ajouter votre propre code pour personnaliser davantage l’apparence ou le comportement du chatbot, au-delà de ce que fournissent les paramètres d’apparence standards. Vous pouvez injecter des styles personnalisés pour remplacer le design visuel par défaut du chatbot, et ajouter du JavaScript pour introduire une interactivité personnalisée ou une gestion d’événements. Les modifications ne sont appliquées au chatbot en direct qu’après avoir cliqué sur Publier.
Quand utiliser du CSS et JavaScript personnalisés
- Utilisez le CSS personnalisé lorsque vous avez besoin de changements de style non disponibles dans l’onglet Apparence — par exemple, modifier la taille de la police, le rayon de bordure, les styles de boutons ou les couleurs des bulles de chat.
- Utilisez JavaScript personnalisé lorsque vous devez déclencher des événements personnalisés, intégrer le chatbot avec des outils tiers, ou ajouter des comportements qui répondent aux actions des utilisateurs au sein du chatbot.
Avant que tu commences
- Vous avez dû créer un chatbot Eddy AI avec au moins une source connectée.
- Examinez les paramètres d’apparence standards avant d’écrire un CSS personnalisé — de nombreuses personnalisations visuelles courantes (couleur, icône, position, espacement) peuvent être réalisées sans code.
- Un code personnalisé est appliqué globalement au chatbot. Testez les modifications en profondeur dans le Playground avant de les publier.
Comment ajouter du CSS et du JavaScript personnalisés
- Naviguez vers Chatbot IA (
) dans la barre de navigation de gauche et cliquez sur Personnaliser. - Naviguez vers l’onglet CSS & JavaScript personnalisé ().

- Entrez votre code CSS dans le champ CSS personnalisé pour modifier le style du chatbot.
- Saisissez votre code JavaScript dans le champ JavaScript personnalisé pour ajouter une interactivité personnalisée.
- Cliquez sur Enregistrer pour sauvegarder votre code.
- Cliquez sur Publier pour appliquer les modifications à votre chatbot en direct.
Le chatbot sur votre site web reflète désormais votre code personnalisé.
Meilleures pratiques
- Effectuez un changement à la fois — ajoutez et testez un seul changement CSS ou JavaScript avant d’ajouter le suivant. Cela facilite l’isolement des problèmes si quelque chose casse.
- Utilisez le Playground pour prévisualiser avant de publier — enregistrez d’abord vos modifications, puis vérifiez le Playground pour confirmer que le chatbot se comporte comme prévu avant de le mettre en ligne.
- Évaluez soigneusement vos sélecteurs CSS — utilisez des sélecteurs spécifiques pour cibler précisément les éléments du chatbot et éviter de déroger accidentellement d’autres styles sur votre page web.
- Limitez JavaScript — utilisez JavaScript uniquement pour des comportements qui ne peuvent pas être atteints via les paramètres d’apparence ou la configuration standard d’un chatbot. Un excès de JavaScript peut affecter le temps de chargement du chatbot.
- Commentez votre code personnalisé — ajoutez des commentaires à votre CSS et JavaScript afin que votre équipe puisse comprendre et maintenir les personnalisations au fil du temps.