Vous pouvez appliquer de nombreuses personnalisations HTML à une boîte de dialogue de chat.
Options des éléments de chat HTML
L'élément enfant de l'élément df-messenger
peut être l'un des éléments suivants:
df-messenger-chat
: la boîte de dialogue de l'agent est toujours ouvertedf-messenger-chat-bubble
: la boîte de dialogue de l'agent peut être ouverte ou fermée à l'aide d'un bouton en forme d'info-bulle.
Personnalisations HTML pour df-messenger
L'élément HTML df-messenger
comporte les attributs suivants :
Attribut | Règle de saisie | Value (Valeur) |
---|---|---|
agent-id |
Valeur | ID associé à l'agent Dialogflow. |
allow-feedback |
Facultatif | Définissez la valeur sur all pour permettre aux utilisateurs finaux de fournir des commentaires sur les réponses de l'agent. |
language-code |
Requis | Code de langue par défaut. |
project-id |
Requis | ID du projet de l'agent. |
location |
Facultatif | Région de l'agent. La valeur par défaut est global . |
intent |
Facultatif | Événement personnalisé qui est appelé lorsque la boîte de dialogue de chat est ouverte. Vous pouvez utiliser un gestionnaire d'événements qui sera appelé pour cet événement et qui générera le premier message de l'agent. |
oauth-client-id |
Facultatif | Requis pour l'authentification OAuth. La valeur par défaut est "null". Si la valeur n'est pas fournie et que l'accès non authentifié à Dialogflow Messenger est activé, les utilisateurs non authentifiés peuvent interagir avec l'agent. Si la valeur est fournie, la boîte de dialogue de l'agent est superposée à une mention "Demander une authentification" (le texte peut être contrôlé. Consultez la notification request-auth-text , qui oblige l'utilisateur à se connecter pour pouvoir utiliser l'agent). |
storage-option |
Facultatif | Spécifie le stockage local des messages de conversation. Utilisez none si les messages ne doivent pas être stockés. Si vous utilisez none , tous les messages seront effacés lors de l'actualisation de la page. La valeur par défaut est sessionStorage. |
session-ttl |
Facultatif | La durée doit être définie en secondes pour maintenir la session. Elle doit être strictement inférieure à 86 400 (1 j) et la valeur par défaut est de 1 800 (30 min). |
url-allowlist |
Facultatif | Active le chargement des images à partir d'une liste de préfixes d'URL séparés par une virgule. Les URL d'image utilisées dans les réponses HTML ou Markdown doivent commencer par l'un des préfixes répertoriés. Utilisez * pour autoriser toutes les URL. |
max-query-length |
Facultatif | Définit la longueur maximale d'une requête textuelle. Si la valeur est négative, la longueur est illimitée. La valeur par défaut est 256. Documentation supplémentaire. |
Personnalisations HTML pour df-messenger-chat
L'élément HTML df-messenger-chat
comporte les attributs suivants :
Attribut | Règle de saisie | Value (Valeur) |
---|---|---|
chat-title |
Facultatif | Titre de la zone de chat, affiché au-dessus. |
chat-subtitle |
Facultatif | Sous-titre de la fenêtre de chat, affiché au-dessus, sous chat-title |
chat-title-icon |
Facultatif | Icône figurant dans le titre de la zone de chat, indiquée au-dessus, à gauche de la chat-title par défaut |
bot-writing-text |
Facultatif | Texte affiché pendant que l'agent écrit |
bot-writing-image |
Facultatif | Image qui s'affiche pendant que l'agent écrit. Prévaut sur bot-writing-text . |
request-auth-text |
Facultatif | Texte du bouton si une authentification est requise. |
placeholder-text |
Facultatif | Texte à afficher dans le champ de saisie lorsqu'il est vide. La valeur par défaut est "Posez une question...". |
bot-actor-image |
Facultatif | Source de l'image à utiliser pour l'image de l'acteur de l'agent. S'affichera dans chaque groupe de réponses de l'agent. |
user-actor-image |
Facultatif | Source de l'image à utiliser pour l'image de l'acteur de l'utilisateur. S'affichera dans chaque message utilisateur. |
Personnalisations HTML pour df-messenger-chat-bubble
L'élément HTML df-messenger-chat-bubble
possède les mêmes attributs que df-messenger-chat
, ainsi que les attributs supplémentaires suivants:
Attribut | Règle de saisie | Value (Valeur) |
---|---|---|
expanded |
Facultatif | Booléen qui détermine si le chat est initialement ouvert. Si cette règle n'est pas configurée, le dernier état est mémorisé. |
chat-icon |
Facultatif | Icône de la bulle de chat. Doit être un URI accessible au public. |
chat-close-icon |
Facultatif | Icône de fermeture de la bulle de chat. Doit être un URI accessible au public. |
chat-collapse-icon |
Facultatif | Icône du bouton "Réduire" dans la barre de titre. Doit être un URI accessible au public. |
anchor |
Facultatif | Définit l'emplacement de la boîte de dialogue de chat par rapport à la bulle ouverte ou fermée. La valeur est constituée de deux mots directionnels (top , bottom , left , right ) séparés par un - . La valeur par défaut est top-left . La première définit le point d'ancrage, et la seconde définit la direction d'expansion principale qui s'éloigne de la bulle. Par exemple, top-left est placé au-dessus de la bulle et se développe vers la gauche et vers le haut (en s'éloignant de la bulle). |
chat-width |
Facultatif | Définit la largeur de la fenêtre de chat. Valeurs numériques (en pixels). La valeur par défaut est 320 px. |
chat-height |
Facultatif | Définit la hauteur de la fenêtre de chat. Valeurs numériques (en pixels). La valeur par défaut est 480 px. |
allow-fullscreen |
Facultatif | Définit si la fenêtre de chat peut s'ouvrir en plein écran. Si elle est définie sur always , s'ouvre en plein écran pour toutes les tailles d'écran. Si elle est définie sur small , elle s'ouvre en plein écran pour les tailles d'écran inférieures à 500 px. Sinon, elle s'ouvre dans une fenêtre normale. Peut remplacer chat-width , chat-height et anchor s'ils sont définis. |
minimized |
Facultatif | Détermine si le chat est initialement ouvert sous forme réduite. Utilise la même logique que anchor . Exécute le premier intent lors du chargement, si spécifié. |