Personnalisations HTML de Dialogflow CX Messenger

Vous pouvez appliquer de nombreuses personnalisations HTML à une boîte de dialogue de chat.

Options de l'élément de chat HTML

L'élément enfant de l'élément df-messenger peut être l'un des suivants :

  • df-messenger-chat : la boîte de dialogue de l'agent est toujours ouverte.
  • df-messenger-chat-bubble : la boîte de dialogue de l'agent peut être ouverte ou fermée à l'aide d'un bouton d'ouverture ou de fermeture de la bulle.

Personnalisations HTML pour df-messenger

L'élément HTML df-messenger comporte les attributs suivants :

Attribut Règle d'entrée Valeur
agent-id Obligatoire ID d'agent associé à l'agent Dialogflow CX.
allow-feedback Facultatif Définissez cette option sur all pour permettre aux utilisateurs finaux de fournir des commentaires sur les réponses de l'agent.
language-code Obligatoire Code de langue par défaut.
project-id Obligatoire ID du projet de l'agent.
location Facultatif Région de l'agent. La valeur par défaut est global.
intent Facultatif Un événement personnalisé appelé lorsque la boîte de dialogue de chat est ouverte. Si le chat est ouvert initialement (comme avec df-messenger-chat ou expanded/minimized df-messenger-chat-bubble), cet événement se déclenche au chargement de la page. Vous pouvez utiliser un gestionnaire d'événements qui est appelé pour cet événement et qui génère le premier message de l'agent.
oauth-client-id Facultatif Obligatoire pour l'authentification OAuth. La valeur par défaut est "null". Si vous ne fournissez pas cette valeur et que vous activez l'accès non authentifié à Dialogflow CX Messenger, les utilisateurs non authentifiés peuvent interagir avec l'agent. Si vous fournissez cette valeur, la boîte de dialogue de l'agent affiche une superposition "Demander l'authentification" qui oblige les utilisateurs à se connecter avant de pouvoir utiliser l'agent (vous pouvez contrôler le texte à l'aide de l'attribut request-auth-text).
storage-option Facultatif Spécifie l'espace de stockage local pour les messages de conversation. Utilisez none si les messages ne doivent pas être stockés. L'utilisation de none efface tous les messages lorsque la page est actualisée ou actualisée. La valeur par défaut est sessionStorage.
session-ttl Facultatif Définissez une durée en secondes pour maintenir la session. Elle doit être strictement inférieure à 86 400 (1 jour) et est définie par défaut sur 1 800 (30 minutes).
url-allowlist Facultatif Permet de charger 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 listé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

Barre latérale Dialogflow CX Messenger

L'élément HTML df-messenger-chat comporte les attributs suivants :

Attribut Règle d'entrée Valeur
chat-title Facultatif Titre de la boîte de discussion. Il s'affiche en haut de la boîte de discussion.
chat-subtitle Facultatif Sous-titre de la boîte de discussion. Affiché sous chat-title.
chat-title-icon Facultatif Icône affichée dans le titre de la boîte de discussion. S'affiche au-dessus de la zone de chat, à gauche de l'icône chat-title par défaut.
bot-writing-text Facultatif Texte affiché pendant que l'agent écrit.
bot-writing-image Facultatif Image affichée pendant que l'agent écrit. Prévaut sur bot-writing-text.
request-auth-text Facultatif Texte du bouton si l'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 d'image à utiliser pour l'image de l'acteur de l'agent. S'affiche sur chaque groupe de réponses de l'agent.
user-actor-image Facultatif Source d'image à utiliser pour l'image de l'acteur de l'utilisateur. S'affiche sur chaque message utilisateur.

Personnalisations HTML pour df-messenger-chat-bubble

Bulle de chat Dialogflow CX Messenger

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 d'entrée Valeur
expanded Facultatif Valeur booléenne qui détermine si le chat est initialement ouvert. Si cette option n'est pas définie, le chat mémorise son dernier état.
chat-icon Facultatif Icône de la bulle de chat. Il doit s'agir d'un URI accessible au public.
chat-close-icon Facultatif Icône de fermeture de la bulle de chat. Il doit s'agir d'un URI accessible au public.
chat-collapse-icon Facultatif Icône du bouton de réduction dans la barre de titre. Il doit s'agir d'un URI accessible au public.
anchor Facultatif Définit l'emplacement de la boîte de dialogue de chat par rapport à la bulle d'ouverture ou de fermeture. La valeur est composée de deux mots de direction (top, bottom, left, right) délimités par -. La valeur par défaut est top-left. La première direction définit le point d'ancrage, et la seconde définit la direction d'expansion principale à partir de la bulle. Par exemple, top-left est placé au-dessus de la bulle et s'étend 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 la valeur est définie sur always, l'application s'ouvre en plein écran pour toutes les tailles d'écran. Si la valeur est définie sur small, l'application 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. S'il est spécifié, cet attribut est prioritaire sur expanded. Cela déclenche également le intent initial lors du chargement.