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 → Apparence et contenu → Bouton de chat, directement sous Effet de bulle
• 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.

Préréglages d'effet de bulle

Le widget flottant propose Aucun effet, Pulsation, Flottement, Oscillation et Lueur au-dessus de l'éditeur. La sélection ajoute un bloc géré clairement identifié. Un changement remplace uniquement ce bloc ; Aucun effet le supprime. Les règles manuelles et les images importées restent intactes, et la limite de 20 000 caractères est vérifiée avant l'insertion.

Les effets bénéficient du même accès à partir du forfait Standard que le CSS personnalisé et incluent une solution prefers-reduced-motion pour afficher un bouton statique lorsque le visiteur réduit les animations.

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

Créer l'anneau extensible de l'effet Pulsation :

@keyframes wca-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bubble-color, #2563eb) 70%, transparent);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 15px color-mix(in srgb, var(--bubble-color, #2563eb) 0%, transparent);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bubble-color, #2563eb) 0%, transparent);
  }
}

.wca-bubble {
  animation: wca-pulse 2s infinite ease-in-out;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.wca-speech-bubble {
  border-radius: 16px !important;
}

.wca-speech-bubble::before,
.wca-speech-bubble::after {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .wca-bubble {
    animation: none !important;
  }
}

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