Comment utiliser du CSS personnalisé pour styliser le chat web

Objectif de cet article

Comment utiliser du CSS personnalisé pour modifier l’apparence du chat web de Klaviyo — le lanceur, la fenêtre de chat, les bulles de message et le Composer de messages. Vous découvrirez quelles variables de thème et quels noms de classe peuvent être ciblés en toute sécurité, et lesquels seront endommagés lorsque Klaviyo déploiera une mise à jour.

Cet article s’applique que vous utilisiez le chat web seul ou dans le cadre de Klaviyo Customer Hub. L’interface de chat est la même dans les deux cas, le même CSS fonctionne donc pour les deux.

Avant de commencer

Vous aurez besoin de :

• Un rôle de propriétaire, administrateur ou gestionnaire
• Maîtrise des sélecteurs CSS et des propriétés personnalisées (variables CSS)

Avant d’écrire du CSS personnalisé, vérifiez si les paramètres de conception intégrés font déjà ce dont vous avez besoin. Les couleurs, les polices, la forme des boutons et la position du lanceur sont tous configurables sans code, et ces paramètres survivent aux mises à jour de Klaviyo. N’utilisez du CSS personnalisé que pour ce que les paramètres de conception ne couvrent pas.

Où ajouter votre CSS personnalisé

L’emplacement de l’éditeur CSS personnalisé dépend de votre configuration.

Si vous utilisez Klaviyo Customer Hub

1. Accédez à Klaviyo Customer Hub > Design.
2. Faites défiler jusqu’à la section Personnalisé en bas des paramètres de style.
3. Cliquez sur Ajouter du CSS personnalisé, ou modifiez le CSS déjà présent.
4. Cliquez sur Enregistrer.

Si vous utilisez le chat web autonome

1. Accédez à Paramètres > chat web > Design.
2. Faites défiler jusqu’à la section Personnalisé en bas des paramètres de style.
3. Cliquez sur Ajouter du CSS personnalisé, ou modifiez le CSS déjà présent.
4. Cliquez sur Enregistrer.

Comment le CSS personnalisé est appliqué

Votre CSS est ajouté à un tag de style sur votre vitrine, après les styles propres à Klaviyo. Deux conséquences en découlent :

• Votre CSS l’emporte. Comme il se charge en dernier, vos règles remplacent les valeurs par défaut de Klaviyo, sans nécessiter !important dans la plupart des cas.
• Votre CSS n’est pas limitée au chat. Elle s’applique à l’ensemble de votre page. Limitez toujours vos sélecteurs à un élément de chat plutôt que d’écrire des règles génériques comme button { … }, ce qui affecterait l’intégralité de votre vitrine en ligne.

Commencez par les variables de thème

La manière la plus fiable de redéfinir le style du chat web consiste à remplacer les variables de thème de Klaviyo dans un bloc :root. Elles sont stables, elles se répercutent correctement dans l’ensemble de l’interface, et elles ont beaucoup moins de chances de se casser que le ciblage d’éléments individuels.

:root {
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-message-border-radius: 4px;
}

Variables de message de chat

Les messages Shopper (sortants) réutilisent intentionnellement les couleurs de votre marque : la bulle utilise --atlas-button-primary et le texte utilise --atlas-text-primary-inverse, que vous définissez tous les deux dans les paramètres de design.

Variables de couleur et de surface

Variables de forme et d’espacement

Variables typographiques

Plusieurs d’entre eux sont déjà rédigés à partir de vos paramètres de design. Il est préférable de définir les polices et les couleurs dans l’interface utilisateur des paramètres de design ; utilisez les variables pour les valeurs que l’interface utilisateur n’expose pas.

Cibler les éléments avec des hooks de classe

Lorsqu’une variable de thème ne suffit pas, ciblez directement les éléments. Klaviyo garantit les noms de classe ci-dessous.

Éléments de chat

La fenêtre de chat porte également une classe qui nomme l’écran actuel — .kl-hub-route-chat pour le chat lui-même. Dans le chat web autonome, il s’agit toujours de .kl-hub-route-chat. Dans Klaviyo Customer Hub, cela change au fil de la navigation de l’acheteur (.kl-hub-route-home, .kl-hub-route-orders, etc.), ce qui vous permet de limiter la portée du CSS à un seul écran.

Le bouton Envoyer ne possède aucune classe dédiée. Ciblez-le via le Composer :

.kl-hub-chat-input-wrapper .kl-hub-button-primary {
  background: #2f4f4f;
}

Éléments partagés

Mettre en forme l’agent et les messages d’achat différemment

Il s’agit de la demande la plus courante, et elle nécessite une approche spécifique. Les bulles de l’agent et du client partagent l’unique .kl-hub-message classe — il n’existe aucune classe stable permettant de les distinguer, vous ne pouvez donc pas en sélectionner une directement.

À la place, utilisez les variables de thème, qui traitent déjà les deux différemment :

:root {
  /* Agent messages */
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-chat-bubble-text-primary: #2b2b2b;

  /* Shopper messages */
  --atlas-button-primary: #1f3a3d;
  --atlas-text-primary-inverse: #ffffff;
}

Exemples

Mettre des angles droits partout

:root {
  --atlas-drawer-inset-border-radius: 0;
  --atlas-message-border-radius: 0;
  --atlas-button-border-radius: 0;
  --atlas-input-border-radius-normal: 0;
}

Titres et boutons en majuscules

.kl-hub-heading,
.kl-hub-button {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Agrandir le launcher avec une ombre personnalisée

.kl-hub-launcher {
  width: 72px !important;
  height: 72px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

Le lanceur définit plusieurs propriétés directement sur l’élément. Les règles du lanceur doivent donc inclure !important pour être appliquées. C’est le seul cas où c’est systématiquement nécessaire.

Élargissez la fenêtre de chat sur ordinateur

@media (min-width: 900px) {
  .kl-hub-drawer {
    width: 480px;
  }
}

Si votre CSS ne s’enregistre pas

Lorsque vous enregistrez, Klaviyo vérifie que votre CSS peut être analysé. Si ce n’est pas le cas, vous verrez CSS non valide. Veuillez vérifier votre syntaxe. et vos modifications ne seront pas enregistrées.

Une feuille de style n’est rejetée d’emblée que lorsqu’elle ne produit aucune règle, ce qui signifie généralement que ce que vous avez collé n’est pas du CSS. Causes courantes :

• Coller du texte brut, du HTML ou un tag style plutôt que des règles CSS
• Coller une partie d’une déclaration plutôt qu’une règle complète
• Une feuille de style dans laquelle chaque règle comporte une erreur de syntaxe

Ce que les feuilles de style CSS personnalisées ne peuvent pas faire

• Modifier le texte. Le CSS personnalisé ne peut pas modifier le libellé. Utilisez plutôt les paramètres de conception et de contenu pour cela.
• Réorganiser ou repositionner des éléments au-delà de ce que permet la mise en page CSS. La structure du chat n’est pas personnalisable.
• Ciblez séparément les bulles d’agent et d’acheteur par classe. Utilisez les variables de thème, comme décrit ci-dessus.
• Résistez automatiquement aux refontes. Les hooks de classe et les variables sont stables au fil des mises à jour normales, mais une refonte majeure peut nécessiter de revoir votre CSS. Effectuez de nouveaux tests après les versions majeures.

Ressources supplémentaires