Personnalisations de CSS pour Dialogflow 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 offrent des options générales de style:

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 focus 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

Style de df-messenger-chat-bubble

Lorsque vous utilisez l'élément df-messenger-chat-bubble, les variables CSS suivantes peuvent être fournies:

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 chat
df-messenger-chat-bubble-border-radius Facultatif 32 px Angle de 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 réduite
df-messenger-chat-border-radius-minimized Facultatif 0 Rayon de courbure 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 Départ Alignement du ou des textes du titre dans la barre de titre. Les valeurs autorisées sont start, center ou end.
df-messenger-titlebar-font-color Facultatif blanc Couleur du texte de 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 la 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 du sous-titre 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 sous-titre 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 la ligne du texte du sous-titre 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 efficace 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 sont affichés
df-messenger-chat-padding Facultatif 10 px Marge intérieure de la boîte de dialogue de l'agent dans laquelle les messages sont affichés
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 Arrière-plan 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 Angle de bordure en haut à gauche pour les messages de l'agent (remplace le rayon générique)
df-messenger-message-bot-border-top-right-radius Facultatif 8 px Angle de 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 Angle de 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 Angle de bordure en bas à gauche pour les messages destinés aux utilisateurs (remplace le rayon générique)
df-messenger-message-user-border-bottom-right-radius Facultatif 8 px Angle de bordure en bas à droite pour les messages destinés aux 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 Rayon de bordure en haut à gauche pour les messages consécutifs de l'agent, remplaçant celui de l'angle supérieur gauche de l'agent
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 Angle de bordure en bas à droite pour les messages consécutifs de l'agent, remplace celui en bas à droite de l'agent
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 Angle de bordure en haut à droite pour les messages utilisateur consécutifs, remplace celui en haut à droite de l'utilisateur
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 pendant l'écriture de l'agent, uniquement active 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é pendant que 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é pendant que l'agent écrit
df-messenger-message-bot-writing-border Facultatif aucun Bordure du message qui s'affiche pendant que l'agent écrit.
df-messenger-message-bot-writing-background Facultatif #ecf3fe Arrière-plan du message qui s'affiche pendant l'écriture de l'agent
df-messenger-message-bot-writing-padding Facultatif 12 px Marge intérieure du message affiché pendant l'écriture de l'agent
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 "Jump to Bottom" (Aller en bas), défini sur flex pour activer le bouton
df-messenger-chat-scroll-button-align Facultatif centre Alignement du bouton "Jump to Bottom" (Aller en bas), valeurs autorisées : flex-start, center et flex-end
df-messenger-chat-scroll-button-container-padding Facultatif 8 px Marge intérieure du conteneur autour du bouton "Aller au bas"
df-messenger-chat-scroll-button-text-display Facultatif intégrée Affichage du texte à côté de l'icône du bouton "Aller en bas", utilisez none pour le masquer
df-messenger-chat-scroll-button-font-size Facultatif 14 px Taille du texte du bouton "Aller au bas"
df-messenger-chat-scroll-button-font-color Facultatif blanc Couleur du texte du bouton "Aller en bas"
df-messenger-chat-scroll-button-background Facultatif #0b57d0 Arrière-plan du bouton "Aller au bas"
df-messenger-chat-scroll-button-border-radius Facultatif 999px Angle de bordure du bouton "Aller en bas"
df-messenger-chat-messagelist-scroll-shadow-background Facultatif dégradé radial(côté le plus éloigné à 50% 100%, rgba(0,0,0,.2), transparent) en bas Ombre qui s'affiche en bas de la liste des messages lorsque vous ne faites pas défiler la liste jusqu'en bas. Définissez ce paramètre 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 afficher l'image de l'acteur à gauche et les messages à droite, ou row-reverse pour afficher l'image de l'acteur à droite et les messages à gauche.
df-messenger-message-user-actor-order Facultatif inverser les lignes Ordre des images et des messages de l'acteur. Utilisez row-reverse pour afficher l'image de l'acteur à droite et les messages à gauche, ou row pour afficher l'image de l'acteur à gauche et les messages à droite.
df-messenger-message-actor-direction Facultatif facultative Doit être l'opposé de df-messenger-message-bot-actor-order et df-messenger-message-user-actor-order, utilisez column lorsqu'ils 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

Style 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 d'envoi dans l'entrée utilisateur
df-messenger-send-icon-color-hover Facultatif #0b57d0 Couleur de l'icône d'envoi dans l'entrée utilisateur lorsque l'utilisateur pointe dessus
df-messenger-send-icon-color-active Facultatif #0b57d0 Couleur de l'icône d'envoi dans l'entrée utilisateur lorsque le texte peut être envoyé
df-messenger-send-icon-offset-x Facultatif 0 Décalage vertical de l'icône d'envoi dans l'entrée utilisateur
df-messenger-send-icon-offset-y Facultatif -4px Décalage horizontal de l'icône d'envoi dans l'entrée utilisateur
df-messenger-input-background Facultatif blanc Arrière-plan 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 de 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 l'entrée utilisateur
df-messenger-input-border-top Facultatif Ligne continue de 1 px #e0e0e0 Bordure supérieure de l'entrée 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 de la zone de saisie de l'utilisateur
df-messenger-input-box-focus-padding Facultatif 12px 0 Marge intérieure de la zone de saisie de l'utilisateur lorsqu'elle est sélectionnée
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 police des messages d'information dans l'entrée utilisateur
df-messenger-input-info-padding Facultatif 14px 16px Marge intérieure des messages d'information dans l'entrée 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 définie sur block, un message d'avertissement s'affiche dès que la saisie dépasse 256 caractères. N'est actif que si la valeur de l'attribut max-query-length est supérieure (par exemple, "désactivé"). Documentation supplémentaire
df-messenger-input-warning-background Facultatif #fef7e0 Arrière-plan du message d'avertissement dans l'entrée utilisateur
df-messenger-input-warning-color Facultatif #410e0b Couleur du texte du message d'avertissement dans l'entrée utilisateur
df-messenger-input-warning-icon-color Facultatif #e37400 Couleur de l'icône dans le message d'avertissement dans l'entrée 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 l'entrée utilisateur

Style de la superposition d'authentification

Lorsque vous utilisez une configuration authentifiée, les variables CSS suivantes peuvent être fournies 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 Angle de bordure du bouton d'authentification

Style des commentaires

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

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 J'aime et Je n'aime pas
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 "J'aime" et "Je n'aime pas" lorsque l'utilisateur pointe dessus
df-messenger-message-feedback-icon-padding Facultatif 0 Rembourrage 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 détaillés
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