Personnalisations CSS de Dialogflow CX Messenger

Vous pouvez personnaliser le style de votre boîte de dialogue de chat en définissant des variables CSS.

Style général

Les variables CSS suivantes fournissent des options de style générales :

Propriétés Règle de saisie Valeur par défaut Description
df-messenger-font-family Facultatif "Google Sans", "Helvetica Neue", sans-serif Famille de polices à utiliser dans le widget
df-messenger-font-size Facultatif 14 px Taille du texte à utiliser dans le widget
df-messenger-font-color Facultatif #1f1f1f Couleur du texte à utiliser dans tout le widget
df-messenger-primary-color Facultatif #0b57d0 Couleur principale des éléments dans l'ensemble du widget (arrière-plan de la barre de titre, arrière-plan du bouton d'action, etc.)
df-messenger-focus-color Facultatif #1e88e5 Couleur de l'anneau de mise au point autour des éléments
df-messenger-focus-color-contrast Facultatif blanc Couleur de l'anneau de focus autour des éléments lorsqu'il se trouve dans un parent avec une couleur d'arrière-plan (comme la barre de titre)
df-messenger-chat-border Facultatif aucun Bordure de la boîte de dialogue
df-messenger-chat-border-radius Facultatif 0 Angle de bordure de la boîte de dialogue

Styling for df-messenger-chat-bubble

Lorsque vous utilisez l'élément df-messenger-chat-bubble, vous pouvez fournir les variables CSS suivantes :

Propriétés Règle de saisie Valeur par défaut Description
df-messenger-chat-window-height Facultatif 480px Hauteur de la fenêtre de chat
df-messenger-chat-window-width Facultatif 320px Largeur de la fenêtre de chat
df-messenger-chat-window-offset Facultatif 16 px Distance entre la bulle de chat et la fenêtre de chat
df-messenger-chat-window-box-shadow Facultatif aucun Ombre de la fenêtre de chat
df-messenger-chat-collapse-icon-size Facultatif non défini Taille de l'icône du bouton "Réduire" dans la barre de titre
df-messenger-chat-bubble-icon-size Facultatif 36 px Taille de l'icône de la bulle de chat
df-messenger-chat-bubble-close-icon-size Facultatif 24 px Taille de l'icône de fermeture de la bulle de chat
df-messenger-chat-bubble-close-icon-transform-rotate Facultatif -90deg Rotation de l'icône de fermeture de la bulle de chat, pivote à 0 degré à la fermeture du chat
df-messenger-chat-bubble-icon-color Facultatif blanc Couleur de l'icône et de l'icône de fermeture de la bulle de chat
df-messenger-chat-bubble-size Facultatif 64 px Taille de la bulle de chat
df-messenger-chat-bubble-background Facultatif #0b57d0 Arrière-plan de la bulle de discussion
df-messenger-chat-bubble-border-radius Facultatif 32 px Rayon de la bordure de la bulle de chat
df-messenger-chat-bubble-border Facultatif aucun Bordure de la bulle de chat
df-messenger-chat-border-minimized Facultatif aucun Bordure du chat en mode réduit
df-messenger-chat-border-radius-minimized Facultatif 0 Rayon de la bordure du chat sous forme réduite

Style de la barre de titre

Les variables CSS suivantes peuvent être fournies pour la barre de titre:

Propriétés Règle de saisie Valeur par défaut Description
df-messenger-titlebar-background Facultatif #0b57d0 Arrière-plan de la barre de titre
df-messenger-titlebar-padding Facultatif 0 15px Marge intérieure de la barre de titre
df-messenger-titlebar-border Facultatif aucun Bordure de la barre de titre
df-messenger-titlebar-border-bottom Facultatif aucun Bordure inférieure de la barre de titre
df-messenger-titlebar-title-align Facultatif start Alignement du ou des titres dans la barre de titre. Les valeurs autorisées sont start, center ou end.
df-messenger-titlebar-font-color Facultatif blanc Couleur du texte dans la barre de titre
df-messenger-titlebar-letter-spacing Facultatif Normal Espacement entre les lettres du texte dans la barre de titre
df-messenger-titlebar-title-font-size Facultatif 18 px Taille du texte du titre dans la barre de titre
df-messenger-titlebar-title-font-family Facultatif "Google Sans", "Helvetica Neue", sans serif Famille de polices du texte du titre dans la barre de titre
df-messenger-titlebar-title-font-weight Facultatif 400 Épaisseur de police du texte du titre dans la barre de titre
df-messenger-titlebar-title-line-height Facultatif Normal Hauteur de la ligne du texte du titre dans la barre de titre
df-messenger-titlebar-title-letter-spacing Facultatif Normal Espacement des lettres entre le texte du titre dans la barre de titre
df-messenger-titlebar-subtitle-font-color Facultatif blanc Couleur du texte des sous-titres dans la barre de titre
df-messenger-titlebar-subtitle-font-size Facultatif 18 px Taille du texte du sous-titre dans la barre de titre
df-messenger-titlebar-subtitle-font-family Facultatif "Google Sans", "Helvetica Neue", sans-serif Famille de polices du texte des sous-titres dans la barre de titre
df-messenger-titlebar-subtitle-font-weight Facultatif 400 Épaisseur de police du texte du sous-titre dans la barre de titre
df-messenger-titlebar-subtitle-line-height Facultatif Normal Hauteur de ligne du texte des sous-titres dans la barre de titre
df-messenger-titlebar-subtitle-letter-spacing Facultatif Normal Espacement entre les lettres du texte du sous-titre dans la barre de titre
df-messenger-titlebar-title-order Facultatif ligne Classez les éléments dans la barre de titre. Les valeurs autorisées sont row ou row-reverse. Cette valeur n'est effective que si l'attribut chat-title-icon a été spécifié.
df-messenger-titlebar-icon-width Facultatif 18 px Largeur de l'icône dans la barre de titre. Cette valeur n'est appliquée que si chat-title-icon a été spécifié.
df-messenger-titlebar-icon-height Facultatif 18 px Hauteur de l'icône dans la barre de titre. Cette valeur n'est appliquée que si chat-title-icon a été spécifié.
df-messenger-titlebar-icon-padding Facultatif 0 12px 0 0 Marge intérieure autour de l'icône dans la barre de titre. Cette valeur n'est appliquée que si chat-title-icon a été spécifié.

Style de la fenêtre de chat

Pour la fenêtre de chat, les variables CSS suivantes peuvent être fournies :

Propriétés Règle de saisie Valeur par défaut Description
df-messenger-chat-background Facultatif #fafafa Arrière-plan de la boîte de dialogue de l'agent dans laquelle les messages s'affichent
df-messenger-chat-padding Facultatif 10 px Marge intérieure de la boîte de dialogue de l'agent dans laquelle les messages s'affichent
df-messenger-messagelist-border Facultatif aucun Bordure de la liste des messages
df-messenger-message-border Facultatif aucun Bordure des messages de boîte de dialogue de l'agent
df-messenger-message-font-size Facultatif 14 px Taille du texte des messages de boîte de dialogue de l'agent
df-messenger-message-font-family Facultatif "Google Sans", "Helvetica Neue", sans-serif Famille de polices des messages de boîte de dialogue de l'agent
df-messenger-message-font-weight Facultatif Normal Épaisseur de police des messages de boîte de dialogue de l'agent
df-messenger-message-bot-background Facultatif #ecf3fe Contexte des messages envoyés par l'agent
df-messenger-message-bot-border Facultatif aucun Bordure des messages envoyés par l'agent
df-messenger-message-bot-font-color Facultatif #1f1f1f Couleur du texte des messages envoyés par l'agent
df-messenger-message-bot-font-weight Facultatif Normal Épaisseur de police des messages envoyés par l'agent
df-messenger-message-user-background Facultatif #e1e3e1 Arrière-plan des messages envoyés par l'utilisateur
df-messenger-message-user-border Facultatif aucun Bordure des messages envoyés par l'utilisateur
df-messenger-message-user-font-color Facultatif #1f1f1f Couleur du texte des messages envoyés par l'utilisateur
df-messenger-message-user-font-weight Facultatif Normal Épaisseur de police des messages envoyés par l'utilisateur
df-messenger-message-spacing Facultatif 10 px Espace entre deux messages
df-messenger-message-border-radius Facultatif 8 px Angle de bordure pour les messages (s'applique à tous les angles)
df-messenger-message-bot-border-top-left-radius Facultatif 8 px Rayon de la bordure en haut à gauche pour les messages des agents, remplace le rayon générique
df-messenger-message-bot-border-top-right-radius Facultatif 8 px Rayon de la bordure en haut à droite pour les messages de l'agent, remplace le rayon générique
df-messenger-message-bot-border-bottom-left-radius Facultatif 8 px Angle de bordure en bas à gauche pour les messages de l'agent (remplace le rayon générique)
df-messenger-message-bot-border-bottom-right-radius Facultatif 8 px Rayon de la bordure en bas à droite pour les messages de l'agent, remplace le rayon générique
df-messenger-message-user-border-top-left-radius Facultatif 8 px Angle de bordure en haut à gauche pour les messages destinés aux utilisateurs (remplace le rayon générique)
df-messenger-message-user-border-top-right-radius Facultatif 8 px Angle de bordure en haut à droite pour les messages destinés aux utilisateurs (remplace le rayon générique)
df-messenger-message-user-border-bottom-left-radius Facultatif 8 px Rayon de bordure en bas à gauche pour les messages de l'utilisateur, remplace le rayon générique
df-messenger-message-user-border-bottom-right-radius Facultatif 8 px Rayon de la bordure en bas à droite pour les messages des utilisateurs, remplace le rayon générique
df-messenger-message-stack-spacing Facultatif 10 px Espace entre deux messages consécutifs
df-messenger-message-bot-stack-border-top-left-radius Facultatif 8 px Le rayon de la bordure en haut à gauche pour les messages d'agent consécutifs remplace le rayon de l'agent en haut à gauche.
df-messenger-message-bot-stack-border-top-right-radius Facultatif 8 px Rayon de bordure en haut à droite pour les messages consécutifs de l'agent, remplaçant celui de l'angle supérieur droit de l'agent
df-messenger-message-bot-stack-border-bottom-left-radius Facultatif 8 px Rayon de bordure en bas à gauche pour les messages consécutifs de l'agent. Remplace celui en bas à gauche de l'agent.
df-messenger-message-bot-stack-border-bottom-right-radius Facultatif 8 px Le rayon de la bordure en bas à droite pour les messages d'agent consécutifs remplace le rayon de l'agent en bas à droite.
df-messenger-message-user-stack-border-top-left-radius Facultatif 8 px Angle de bordure en haut à gauche pour les messages utilisateur consécutifs. Remplace le rayon en haut à gauche de l'utilisateur.
df-messenger-message-user-stack-border-top-right-radius Facultatif 8 px Le rayon de la bordure en haut à droite pour les messages d'utilisateurs consécutifs remplace le rayon de l'utilisateur en haut à droite.
df-messenger-message-user-stack-border-bottom-left-radius Facultatif 8 px Angle de bordure en bas à gauche pour les messages utilisateur consécutifs. Remplace celui en bas à gauche de l'utilisateur.
df-messenger-message-user-stack-border-bottom-right-radius Facultatif 8 px Angle de bordure en bas à droite pour les messages utilisateur consécutifs, remplace celui en bas à droite de l'utilisateur
df-messenger-message-user-writing-image-width Facultatif 24 px Largeur de l'image affichée lorsque l'agent écrit. Cette valeur n'est active que si bot-writing-image est défini.
df-messenger-message-bot-writing-image-height Facultatif 24 px Hauteur de l'image affichée pendant l'écriture de l'agent (active uniquement si bot-writing-image est défini)
df-messenger-message-bot-writing-font-color Facultatif #1f1f1f Couleur du texte affiché lorsque l'agent écrit
df-messenger-message-bot-writing-font-weight Facultatif Normal Épaisseur de police du texte affiché pendant l'écriture de l'agent
df-messenger-message-bot-writing-font-size Facultatif 14 px Taille du texte affiché lorsque l'agent écrit
df-messenger-message-bot-writing-border Facultatif aucun Bordure du message affiché lorsque l'agent écrit
df-messenger-message-bot-writing-background Facultatif #ecf3fe Arrière-plan du message affiché pendant l'écriture de l'agent
df-messenger-message-bot-writing-padding Facultatif 12 px Marge du message affiché lorsque l'agent écrit
df-messenger-message-bot-writing-spacing Facultatif 10 px Espace entre le message affiché pendant la rédaction de l'agent et le message précédent
df-messenger-chat-scroll-button-enabled-display Facultatif aucun Définit l'affichage du bouton "Aller en bas". Définissez la valeur sur flex pour activer le bouton.
df-messenger-chat-scroll-button-align Facultatif centre Alignement du bouton "Aller au bas" bouton. Les valeurs autorisées sont flex-start, center et flex-end.
df-messenger-chat-scroll-button-container-padding Facultatif 8 px Marge intérieure du conteneur autour de la zone "Aller au bas" bouton
df-messenger-chat-scroll-button-text-display Facultatif intégrée Affichage du texte à côté de l'icône du bouton "Accéder à la fin". Utilisez none pour masquer le texte.
df-messenger-chat-scroll-button-font-size Facultatif 14 px Taille du texte de la section "Aller au bas" bouton
df-messenger-chat-scroll-button-font-color Facultatif blanc Couleur du texte de l'option "Aller en bas" bouton
df-messenger-chat-scroll-button-background Facultatif #0b57d0 Arrière-plan du bouton "Aller en bas"
df-messenger-chat-scroll-button-border-radius Facultatif 999 px Angle de bordure de la zone "Aller en bas" bouton
df-messenger-chat-messagelist-scroll-shadow-background Facultatif dégradé radial(côté le plus large à 50% 100%, rgba(0,0,0,.2), transparent) en bas Ombre affichée en bas de la liste des messages lorsque la liste n'est pas défilée jusqu'en bas. Définissez la valeur sur none pour la désactiver.

Style des images d'acteurs

Les images de l'acteur sont celles qui s'affichent à côté des messages du bot ou de l'acteur. Pour ces images d'acteurs, les variables CSS suivantes peuvent être fournies:

Propriétés Règle de saisie Valeur par défaut Description
df-messenger-message-actor-spacing Facultatif 16 px Distance entre l'image de l'acteur et les messages
df-messenger-message-bot-actor-order Facultatif ligne Ordre des images et des messages de l'acteur. Utilisez row pour placer l'image de l'acteur à gauche et les messages à droite, ou row-reverse pour placer l'image de l'acteur à droite et les messages à gauche.
df-messenger-message-user-actor-order Facultatif row-reverse Ordre des images et des messages de l'acteur. Utilisez row-reverse pour placer l'image de l'acteur à droite et les messages à gauche, ou row pour placer l'image de l'acteur à gauche et les messages à droite.
df-messenger-message-actor-direction Facultatif colonne Doit être l'opposé de df-messenger-message-bot-actor-order et df-messenger-message-user-actor-order. Utilisez column lorsque ces éléments sont basés sur row ou row lorsqu'ils sont basés sur column.
df-messenger-message-actor-align Facultatif flex-start Alignement de l'acteur par rapport aux messages Utilisez flex-start pour que l'image de l'acteur apparaisse en haut, center pour qu'elle soit centrée ou flex-end pour qu'elle apparaisse en bas.
df-messenger-message-actor-border-radius Facultatif 999px Angle de bordure de l'image de l'acteur
df-messenger-message-actor-padding Facultatif 8 px Marge intérieure de l'image de l'acteur
df-messenger-message-actor-image-size Facultatif 24 px Taille de l'image de l'acteur
df-messenger-message-bot-actor-background Facultatif blanc Arrière-plan de l'image de l'acteur de l'agent
df-messenger-message-bot-actor-border Facultatif aucun Bordure de l'image de l'acteur de l'agent
df-messenger-message-bot-actor-offset Facultatif 0 Décalage pour déplacer l'image de l'acteur de l'agent
df-messenger-message-user-actor-background Facultatif blanc Arrière-plan de l'image de l'acteur de l'utilisateur
df-messenger-message-user-actor-border Facultatif aucun Bordure de l'image de l'acteur de l'utilisateur
df-messenger-message-user-actor-offset Facultatif 0 Décalage pour déplacer l'image de l'acteur de l'utilisateur

Mise en forme des entrées utilisateur

Pour l'entrée utilisateur, les variables CSS suivantes peuvent être fournies:

Propriétés Règle de saisie Valeur par défaut Description
df-messenger-send-icon-color Facultatif #0b57d0 Couleur de l'icône "Envoyer" dans la saisie utilisateur
df-messenger-send-icon-color-hover Facultatif #0b57d0 Couleur de l'option "Envoyer" s'affiche dans l'entrée utilisateur lorsque l'utilisateur pointe dessus
df-messenger-send-icon-color-active Facultatif #0b57d0 Couleur de l'option "Envoyer" icône dans l'entrée utilisateur lorsque le texte peut être envoyé
df-messenger-send-icon-offset-x Facultatif 0 Décalage vertical de l'élément "envoi" icône dans l'entrée utilisateur
df-messenger-send-icon-offset-y Facultatif -4 px Décalage horizontal de la valeur "send" icône dans l'entrée utilisateur
df-messenger-input-background Facultatif blanc Contexte de l'entrée utilisateur
df-messenger-input-padding Facultatif 8 px Marge intérieure globale entre le champ de saisie de l'utilisateur (y compris le bouton d'envoi du message) et le conteneur.
df-messenger-input-inner-padding Facultatif 0px 48px 0px 0 Marge intérieure intérieure située entre le champ de saisie de l'utilisateur (à l'exclusion du bouton d'envoi de message) et le conteneur.
df-messenger-input-border Facultatif aucun Bordure de la saisie utilisateur
df-messenger-input-border-top Facultatif 1 px, #e0e0e0 Bordure supérieure de la saisie utilisateur
df-messenger-input-border-bottom Facultatif aucun Bordure inférieure du champ de texte de l'entrée utilisateur
df-messenger-input-font-family Facultatif "Google Sans", "Helvetica Neue", sans serif Famille de polices de l'entrée utilisateur
df-messenger-input-font-color Facultatif #1f1f1f Couleur du texte de l'entrée utilisateur
df-messenger-input-font-size Facultatif 14 px Taille du texte de l'entrée utilisateur
df-messenger-input-font-weight Facultatif Normal Épaisseur de police de l'entrée utilisateur
df-messenger-input-box-border Facultatif aucun Bordure de la zone de saisie de l'utilisateur
df-messenger-input-box-focus-border Facultatif aucun Bordure de la zone de saisie de l'utilisateur lorsque l'élément est sélectionné
df-messenger-input-box-border-radius Facultatif 0 Angle de bordure de la zone de saisie de l'utilisateur
df-messenger-input-box-padding Facultatif 12px 0 Marge intérieure du champ de saisie de l'utilisateur
df-messenger-input-box-focus-padding Facultatif 12px 0 Marge intérieure du champ de saisie de l'utilisateur lorsqu'il est sélectionné
df-messenger-input-gutter Facultatif stable Gouttière de la barre de défilement de l'entrée utilisateur
df-messenger-input-info-font-size Facultatif 14 px Taille du texte des messages d'information dans l'entrée utilisateur
df-messenger-input-info-font-weight Facultatif Normal Épaisseur de la police des messages d'information dans la saisie utilisateur
df-messenger-input-info-padding Facultatif 14px 16px Mise en forme des messages d'information dans la saisie utilisateur
df-messenger-input-info-line-height Facultatif 20 px Hauteur des messages d'information dans l'entrée utilisateur
df-messenger-input-long-text-warning-display Facultatif aucun Si la valeur est block, un message d'avertissement s'affiche lorsque la saisie dépasse 256 caractères. Actif uniquement si l'attribut max-query-length est supérieur (par exemple, désactivé). Documentation supplémentaire
df-messenger-input-warning-background Facultatif #fef7e0 Arrière-plan du message d'avertissement dans la saisie utilisateur
df-messenger-input-warning-color Facultatif #410e0b Couleur du texte du message d'avertissement dans la saisie utilisateur
df-messenger-input-warning-icon-color Facultatif #e37400 Couleur de l'icône dans le message d'avertissement dans la saisie utilisateur
df-messenger-input-error-background Facultatif #f9dedc Arrière-plan du message d'erreur dans l'entrée utilisateur
df-messenger-input-error-color Facultatif #410e0b Couleur du texte du message d'erreur dans l'entrée utilisateur
df-messenger-input-error-icon-color Facultatif #b3261e Couleur de l'icône dans le message d'avertissement dans la saisie utilisateur

Style de la superposition d'authentification

Lorsque vous utilisez une configuration authentifiée, vous pouvez fournir les variables CSS suivantes pour la superposition :

Propriétés Règle de saisie Valeur par défaut Description
df-messenger-auth-background Facultatif rvba(204, 204, 204, 0,8) Arrière-plan de la boîte de dialogue de l'agent lorsque l'authentification est affichée
df-messenger-auth-button-background Facultatif #0b57d0 Arrière-plan du bouton d'authentification
df-messenger-auth-button-font-family Facultatif "Google Sans", "Helvetica Neue", sans serif Famille de polices du bouton d'authentification
df-messenger-auth-button-font-color Facultatif blanc Couleur du texte du bouton d'authentification
df-messenger-auth-button-font-size Facultatif 14 px Taille du texte du bouton d'authentification
df-messenger-auth-button-border Facultatif aucun Bordure du bouton d'authentification
df-messenger-auth-button-border-radius Facultatif 8 px Rayon de la bordure du bouton d'authentification

Style des commentaires

Lorsque la fonctionnalité de retour sur les réponses est activée, les variables CSS suivantes peuvent être fournies pour les commandes de retour.

Propriétés Règle de saisie Valeur par défaut Description
df-messenger-message-feedback-icon-distance Facultatif 8 px Distance entre les boutons "Pouce vers le haut" et "Pouce vers le bas"
df-messenger-message-feedback-icon-font-color Facultatif #444746 Couleur des boutons "J'aime" et "Je n'aime pas"
df-messenger-message-feedback-icon-font-color-active Facultatif #444746 Couleur des boutons "J'aime" et "Je n'aime pas" lorsqu'ils sont actifs
df-messenger-message-feedback-icon-border Facultatif aucun Bordure des boutons "J'aime" et "Je n'aime pas"
df-messenger-message-feedback-icon-border-radius Facultatif 0 Angle de bordure des boutons "J'aime" et "Je n'aime pas"
df-messenger-message-feedback-icon-background Facultatif aucun Arrière-plan des boutons "J'aime" et "Je n'aime pas"
df-messenger-message-feedback-icon-background-hover Facultatif aucun Arrière-plan des boutons "Pouce vers le haut" et "Pouce vers le bas" lorsque l'utilisateur pointe dessus
df-messenger-message-feedback-icon-padding Facultatif 0 Marge intérieure des boutons "J'aime" et "Je n'aime pas"
df-messenger-message-rich-feedback-spacing Facultatif 10 px Espacement des éléments dans les commentaires enrichis
df-messenger-message-rich-feedback-padding Facultatif 0 Marge intérieure des commentaires enrichis
df-messenger-message-rich-feedback-background Facultatif aucun Contexte des commentaires détaillés
df-messenger-message-rich-feedback-border-radius Facultatif 0 Angle de bordure des commentaires enrichis
df-messenger-message-rich-feedback-border Facultatif aucun Bordure des commentaires enrichis
df-messenger-rich-feedback-offset-left Facultatif 0 Décalage à gauche