Aller au contenu principal

Style avancé de chat

Les paramètres d'apparence intégrés — couleurs, rayons, ombres, diviseurs, espacement — couvrent la plupart des besoins de marque. CSS personnalisé champ dans les paramètres globaux de l'application d'administration. Tout ce qui y va est injecté dans un <style> bloc sur chaque page de magasin; il n'y a pas de page ou de version de bloc de celui-ci.

Propriétés personnalisées CSS que vous pouvez surcharger​

Le widget définit sa propre apparence à travers des propriétés CSS personnalisées sur :root, et sur ses propres conteneurs aussi, donc ils fonctionnent toujours à l'intérieur des thèmes qui utilisent Shadow DOM. Surpasser l'un de ces directement au lieu de lutter contre la spécificité:

:root {
  --user-bg-color: #2C9AB4;
  --user-text-color: #FFFFFF;
  --bot-bg-color: #FFFFFF;
  --bot-text-color: #1A1E23;
  --chat-bubble-radius: 10px;
  --input-button-radius: 10px;
  --outer-radius: 20px;
  --container-padding: 20px;
  --chat-input-spacing: 20px;
  --divider-spacing: 15px;
  --divider-thickness: 1px;
  --divider-color: rgba(0,0,0,0.1);
  --container-border-color: #2C9AB4;
  --container-border-width: 2px;
  --container-border-radius: 20px;
  --container-background-color: #FAFAFA;
  --shadow-offset-x: 8px;
  --shadow-offset-y: 8px;
  --shadow-blur: 24px;
  --shadow-opacity: 0.1;
  --profile-image-size: 40px;
  --bubble-size: 60px;
  --chat-container-width: 980px;
  --chat-container-padding: 20px;
  --chat-container-margin: 20px;
  --chat-max-height-desktop: 35vh;
  --chat-max-height-mobile: 50vh;
}

La plupart de ces derniers ont déjà un champ correspondant sur la Page d'apparence — atteindre pour CSS personnalisé principalement pour les choses que l'interface utilisateur de paramètres ne expose pas.

De vrais sélecteurs qui valent la peine d'être connus​

SélecteurQu'est-ce que c'est ?
#main-chat-containerLe panneau principal de discussion
.AIchatbotCours sur le panneau de discussion principal
[data-style-template="classic"] / .classic-stylePrésent lorsque Classic est le modèle de style actif
[data-style-template="bubbly"] / .bubbly-stylePrésent lorsque Bubbly Glow est actif
[data-style-template="floaty"]Présent lorsque Floaty est actif
#ai-ambient-wrapperEnveloppe extérieure pour les blobs lumineux ambiants Floaty et Bubbly Glow
.chat-anchor-bubble-wrapperEnveloppe de position fixe autour de la bulle de lanceur flottant
.chat-anchor-bubbleLa bulle du lanceur circulaire lui-même
.desktop-headingEn-tête du chat
.chat-login-buttonLe bouton d'invite de connexion invité
.show-border / .show-shadowAppliquée à #main-chat-container lorsque ces paramètres sont activés

Un petit exemple — serrez l'ombre de la bulle et donnez à l'en-tête un accent personnalisé, sans toucher à aucun autre réglage:

.chat-anchor-bubble {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.desktop-heading {
  border-bottom: 2px solid var(--user-bg-color);
}

Quelques choses à garder à l'esprit​

La bulle flottante est toujours position: fixed, ancrée en bas à gauche ou en bas à droite selon le réglage Position de bulle (voir Position & mise en page du chat). Vous pouvez la remodeler avec le CSS personnalisé, mais le déplacer hors d'un coin fixe n'est pas pris en charge et se brisera probablement sur mobile.

Le CSS personnalisé est global — un champ, appliqué au widget sur chaque page et chaque bloc du magasin, puisqu'il vit dans le même métafield que le reste de vos paramètres. Gardez les sélecteurs globulés dans les propres classes et ID du widget au-dessus, plutôt que les sélecteurs de tags larges, donc rien ne fuit dans le reste de votre thème. Et si vous ajoutez vos propres animations ou surpassez les couleurs du texte, respectez prefers-reduced-motion et gardez le contraste lisible — le widget ne fait pas appliquer l'un ou l'autre de ceux pour vous sur CSS personnalisé.

Prochaines étapes​