Style CSS personnalisé du Widget de chat

CSS personnalisé

Si les paramètres intégrés de couleur et de thème ne suffisent pas, vous pouvez modifier le style des deux widgets avec votre propre CSS. Le CSS est injecté directement dans le widget, ce qui lui permet de fonctionner même si le widget s'exécute dans un Shadow DOM inaccessible aux feuilles de style de votre page.

Disponible sur les forfaits Standard et supérieurs, aussi bien pour le widget flottant que pour le Widget intégré, chacun disposant de son propre champ CSS.

Où le trouver

• Widget flottant : Tableau de bord → votre assistant → Canaux → Widget de chat → Advanced
• Widget intégré : Tableau de bord → votre assistant → Canaux → Chat intégré → Advanced

L'aperçu en direct situé à côté de l'éditeur applique votre CSS en temps réel pendant votre saisie. Le champ accepte jusqu'à 20 000 caractères.

Sélecteurs stables

Votre CSS cible les éléments du widget via ces classes documentées. Elles constituent un contrat stable : elles continuent de fonctionner au fil des mises à jour du widget.

Warning: Seuls ces sélecteurs sont stables. Tous les autres noms de classes internes peuvent changer sans préavis lors d'une mise à jour du widget et risquent d'altérer vos styles. Vérifiez votre mise en page après les mises à jour du widget.

!important n'est pas nécessaire

Votre CSS remplace automatiquement les styles intégrés du widget, de simples sélecteurs suffisent :

.wca-header {
  background: #0f172a;
}
.wca-message--bot {
  border-radius: 4px;
}

D'un point de vue technique, le widget déplace ses styles intégrés dans un cascade layer CSS dès lors qu'un CSS personnalisé est présent, de sorte que vos règles (hors layer) l'emportent toujours, quelle que soit la spécificité des sélecteurs.

Exemples

Modifier le style du bouton de chat avec une animation :

@keyframes wca-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.wca-bubble {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: wca-pulse 2s ease-in-out infinite;
}

Bulles de message carrées avec une taille de police personnalisée :

.wca-message--bot,
.wca-message--user {
  border-radius: 4px;
  font-size: 15px;
}

Style personnalisé pour le champ de saisie :

.wca-input {
  border: 2px solid #0f172a;
  border-radius: 8px;
}
.wca-input::placeholder {
  color: #94a3b8;
}

Limites

• La position et la taille du widget flottant (décalages, largeur, hauteur) sont contrôlées par les paramètres du tableau de bord et non par le CSS, car elles sont appliquées sous forme de styles inline
• Les autres classes internes en dehors des sélecteurs .wca-* documentés ne sont pas stables
• Les directives @import et les références url() externes sont autorisées, mais elles sont comptabilisées dans la limite de caractères et augmentent le temps de chargement

Bonnes pratiques

• Privilégiez les paramètres intégrés pour les couleurs, les polices et les images, et utilisez le CSS personnalisé uniquement pour ce que les paramètres ne permettent pas de faire
• Tenez-vous-en aux sélecteurs documentés afin que les mises à jour du widget ne cassent pas votre mise en page
• Vérifiez votre site en production après les mises à jour du widget, en particulier si vous avez appliqué des styles au-delà des sélecteurs stables
• Restez concis, une poignée de règles ciblées est plus facile à maintenir qu'une refonte complète du thème