Ancien Dialogflow CX Messenger

L'ancienne intégration Dialogflow CX Messenger fournit une boîte de dialogue de chat personnalisable pour votre agent, que vous pouvez intégrer à votre site Web. Les utilisateurs peuvent ouvrir et fermer la boîte de dialogue de chat sous forme de fenêtre. Lorsqu'un utilisateur ouvre la boîte de dialogue de chat, elle s'affiche au-dessus de votre contenu, en bas à droite de l'écran.

Migrer vers la dernière version de Dialogflow CX Messenger

La dernière version de Dialogflow CX Messenger fournit une authentification pour contrôler l'accès aux requêtes de l'agent et d'autres options de configuration de l'interface utilisateur. Nous vous recommandons de migrer de l'ancienne version vers la nouvelle.

Si vous avez activé l'intégration de Dialogflow CX Messenger avant le 29 août 2023, vous utilisez peut-être l'ancienne version. Pour déterminer si vous utilisez l'ancienne version, examinez le code HTML de Messenger intégré à votre site Web. Si vous voyez le script suivant, vous utilisez l'ancienne version :

https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1

Pour migrer vers la nouvelle version, procédez comme suit :

  1. Supprimez tout le code HTML, CSS et JavaScript de Messenger de votre site Web.
  2. Suivez les instructions pour la dernière intégration de Dialogflow CX Messenger.

Personnalisations HTML

Vous pouvez personnaliser différents aspects de l'apparence et du comportement de la boîte de dialogue de chat.

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. Cet attribut est prérempli avec votre ID d'agent.
chat-icon Facultatif Icône utilisée pour le bouton d'ouverture de la boîte de dialogue de chat. L'icône Dialogflow CX est l'icône par défaut. Ce champ doit être une URL publique. La taille de l'icône doit être de 36 x 36 pixels.
chat-title Valeur Titre affiché en haut de la boîte de dialogue de chat. Il est prérempli avec le nom de votre agent.
df-cx Obligatoire Indique que l'interaction doit s'effectuer avec un agent CX. Utilisez la valeur "true".
expand Facultatif Attribut booléen qui définit l'ouverture de la boîte de dialogue de chat lors du chargement de la page. Par défaut, la boîte de dialogue de chat est fermée lors du chargement de la page.
intent Facultatif Un événement personnalisé appelé lorsque la boîte de dialogue de chat est ouverte. 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.
language-code Obligatoire Code de langue par défaut pour le premier intent. Il est prérempli avec la langue par défaut de l'agent.
location Obligatoire Région de l'agent.
session-id Facultatif ID de session. Si vous ne fournissez pas d'ID, l'intégration générera un identifiant unique pour chaque boîte de dialogue de chat.
user-id Facultatif Permet de suivre un utilisateur d'une session à l'autre. Vous pouvez transmettre la valeur à Dialogflow CX via le champ queryParams.payload.userId dans une requête de détection d'intent, et Dialogflow CX vous fournit cette valeur via le champ WebhookRequest.payload.userId.
wait-open Facultatif Attribut booléen qui retarde l'événement personnalisé défini dans l'attribut intent jusqu'à ce que la boîte de dialogue soit réellement ouverte.

Personnalisations CSS

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

Les variables CSS suivantes peuvent être fournies :

Variable CSS Établissement concerné
df-messenger-bot-message Couleur d'arrière-plan de l'info-bulle pour les messages de l'agent.
df-messenger-button-titlebar-color Couleur du bouton flottant et de la barre de titre de la boîte de dialogue de chat.
df-messenger-button-titlebar-font-color Couleur de police du titre dans la barre de titre.
df-messenger-chat-background-color Couleur de l'arrière-plan de la boîte de dialogue de chat.
df-messenger-font-color Couleur de police des messages.
df-messenger-input-box-color Couleur d'arrière-plan de la zone de saisie de texte.
df-messenger-input-font-color Couleur de police de la zone de saisie de texte.
df-messenger-input-placeholder-font-color Couleur de police du texte d'espace réservé dans la zone de saisie de texte.
df-messenger-minimized-chat-close-icon-color Couleur de l'icône Fermer dans la vue de chat fermé.
df-messenger-send-icon Couleur de l'icône d'envoi dans la zone de saisie de texte.
df-messenger-user-message Couleur d'arrière-plan de l'info-bulle pour les messages de l'utilisateur.

Exemple de code :

<style>
  df-messenger {
   --df-messenger-bot-message: #878fac;
   --df-messenger-button-titlebar-color: #df9b56;
   --df-messenger-chat-background-color: #fafafa;
   --df-messenger-font-color: white;
   --df-messenger-send-icon: #878fac;
   --df-messenger-user-message: #479b3d;
  }
</style>

Ces paramètres entraîneront les résultats suivants :

Une boîte de dialogue de chat

Événements JavaScript

Dialogflow Messenger déclenche divers événements pour lesquels vous pouvez créer des écouteurs d'événements.

La cible de ces événements est l'élément df-messenger.

Pour ajouter un écouteur d'événements pour l'élément df-messenger, ajoutez le code JavaScript suivant, où event-type est l'un des noms d'événement décrits ci-dessous :

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('event-type', function (event) {
  // Handle event
  ...
});

Les types d'événements suivants sont acceptés :

df-accordion-clicked

Cet événement se produit lorsqu'un utilisateur clique sur un élément d'accordéon. La structure de l'événement se présente comme suit :

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl: string}
  },
  text: string
}

df-button-clicked

Cet événement se produit lorsqu'un utilisateur clique sur un élément de bouton. La structure de l'événement se présente comme suit :

element: {
  icon: {
    type: string,
    color: string
  },
  text: string,
  link: string,
  event: EventInput,
  payload: {}
}

df-chip-clicked

Cet événement se produit lorsqu'un utilisateur sélectionne un élément de suggestion. La structure de l'événement se présente comme suit :

query: string // Text of the suggestion chip that was selected.

df-info-card-clicked

Cet événement se produit lorsque l'utilisateur final clique sur l'élément d'information dans la barre de titre. La structure de l'événement se présente comme suit :

element: {
  title: string,
  image: {
    src: {rawUrl: string}
  },
  actionLink: string
}

df-list-element-clicked

Cet événement se produit lorsqu'un utilisateur clique sur un élément d'une liste. La structure de l'événement se présente comme suit :

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl}
  },
  event: {
    name: string
  },
  payload: {}
}

df-messenger-error

Cet événement se produit lorsque l'API Dialogflow envoie un code d'état d'erreur. La structure de l'événement se présente comme suit :

error: {
  "error": {
    "code": <error_code>,
    "message": <error_message>,
    "status": <error_status>
  }
}

df-messenger-loaded

Cet événement est déclenché lorsque l'élément df-messenger est entièrement chargé et initialisé.

df-request-sent

Cet événement se produit lorsqu'une requête est envoyée à l'API Dialogflow. Il peut être utilisé, ainsi que df-response-received, pour surveiller la latence des requêtes. La structure de l'événement se présente comme suit :

requestBody: {
  "queryParams": {
    object(QueryParameters)
  },
  "queryInput": {
    object(QueryInput)
  },
  "inputAudio": string
}

df-response-received

Cet événement se produit lorsqu'une réponse est reçue de l'API Dialogflow. La structure de l'événement se présente comme suit :

response: detectIntentResponse

df-user-input-entered

Cet événement se produit lorsque l'utilisateur final entre une requête. La structure de l'événement se présente comme suit :

input: string // Text entered by user

Fonctions JavaScript

Vous pouvez appeler les fonctions fournies par l'élément df-messenger pour modifier son comportement.

renderCustomText

Cette fonction affiche un message, comme s'il provenait de Dialogflow CX en tant que réponse textuelle.

Exemple :

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text');

renderCustomCard

Cette fonction affiche une fiche personnalisée, comme si elle provenait d'un fulfillment Dialogflow CX. Le format de la réponse de charge utile personnalisée est défini dans la section Fulfillment.

Exemple :

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "src": {
        "rawUrl": "https://example.com/images/logo.png"
      }
    },
    "actionLink": "https://example.com"
  }];
dfMessenger.renderCustomCard(payload);

showMinChat

Cette fonction affiche une version minimale des listes de messages.

Exemple :

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.showMinChat();

Fulfillment

Lorsque vous créez un fulfillment, vous pouvez créer des réponses textuelles et des charges utiles personnalisées. Les réponses textuelles sont utilisées pour les réponses de base de l'agent, et les charges utiles personnalisées sont utilisées pour les réponses enrichies. Le format de charge utile personnalisée pour tous les types de réponses présente la structure de base suivante :

{
  "richContent": [
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ],
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ]
  ]
}

La valeur richContent autorise un tableau externe et plusieurs tableaux internes. Les réponses d'un tableau interne sont liées entre elles dans une seule carte visuelle. Lorsque le tableau externe contient plusieurs tableaux internes, plusieurs fiches sont affichées, une pour chaque tableau interne.

Les sous-sections suivantes décrivent les différents types de réponses que vous pouvez configurer pour une charge utile personnalisée.

Type de réponse "info"

Le type de réponse "Info" est une image statique de démarrage sur laquelle vous pouvez appuyer ou cliquer.

Une fiche d'élément d'information

Le tableau suivant décrit les champs :

Nom Type Description
type string Type de réponse : "info".
title string Titre de la fiche.
subtitle string Sous-titre de la fiche.
image objet Image.
image.src objet Source de l'image.
image.src.rawUrl string URL publique de l'image.
actionLink string URL à suivre lorsque l'utilisateur clique sur la fiche.

Exemple :

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Info item title",
        "subtitle": "Info item subtitle",
        "image": {
          "src": {
            "rawUrl": "https://example.com/images/logo.png"
          }
        },
        "actionLink": "https://example.com"
      }
    ]
  ]
}

Type de réponse "description"

Le type de réponse "description" est une fiche informative pouvant comporter plusieurs lignes de texte.

Une fiche de description

Le tableau suivant décrit les champs :

Nom Type Description
type string Type de réponse : "description".
title string Titre de la fiche.
text tableau de chaînes Tableau de chaînes, où chaque chaîne est affichée sur une nouvelle ligne.

Exemple :

{
  "richContent": [
    [
      {
        "type": "description",
        "title": "Description title",
        "text": [
          "This is text line 1.",
          "This is text line 2."
        ]
      }
    ]
  ]
}

Type de réponse "image"

Le type de réponse "image" est une fiche d'image sur laquelle les utilisateurs peuvent cliquer ou appuyer.

Une carte d'image

Le tableau suivant décrit les champs :

Nom Type Description
type string Type de réponse : "image".
rawUrl string URL publique de l'image.
accessibilityText string Texte alternatif de l'image.

Exemple :

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo"
      }
    ]
  ]
}

Type de réponse "bouton"

Le type de réponse "bouton" est un petit bouton avec une icône et un libellé de texte sur lequel vous pouvez cliquer ou appuyer.

Un petit bouton

Le tableau suivant décrit les champs :

Nom Type Description
type string Type de réponse : "button".
icon objet Icône du bouton.
icon.type string Icône de la bibliothèque d'icône Material. L'icône par défaut est une flèche.
icon.color string Code hexadécimal de couleur.
text string Texte du bouton.
link string URL à suivre lorsque l'utilisateur clique sur le bouton.
event objet Événement Dialogflow CX déclenché lorsque l'utilisateur clique sur le bouton.

Exemple :

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "text": "Button text",
        "link": "https://example.com",
        "event": {
          "name": ""
        }
      }
    ]
  ]
}

Type de réponse "liste"

Le type de réponse "liste" est une fiche comportant plusieurs options parmi lesquelles les utilisateurs peuvent effectuer leur sélection.

Une fiche d'élément de liste

La réponse contient un tableau de types de réponses list et divider.

Le tableau suivant décrit le type list :

Nom Type Description
type string Type de réponse : "list".
title string Titre de l'option.
subtitle string Sous-titre de l'option.
event objet Événement Dialogflow CX déclenché lorsque l'utilisateur clique sur l'option.

Le tableau suivant décrit le type divider :

Nom Type Description
type string Type de réponse : "divider".

Exemple :

{
  "richContent": [
    [
      {
        "type": "list",
        "title": "List item 1 title",
        "subtitle": "List item 1 subtitle",
        "event": {
          "name": ""
        }
      },
      {
        "type": "divider"
      },
      {
        "type": "list",
        "title": "List item 2 title",
        "subtitle": "List item 2 subtitle",
        "event": {
          "name": ""
        }
      }
    ]
  ]
}

Type de réponse "accordéon"

Le type de réponse en accordéon est une petite fiche sur laquelle vous pouvez cliquer ou appuyer pour la développer et afficher plus de texte.

Une fiche en accordéon

Le tableau suivant décrit les champs :

Nom Type Description
type string Type de réponse : "accordion".
title string Titre de l'accordéon.
subtitle string Sous-titre de l'accordéon.
image objet Image.
image.src objet Source de l'image.
image.src.rawUrl string URL publique de l'image.
text string Texte de l'accordéon.

Exemple :

{
  "richContent": [
    [
      {
        "type": "accordion",
        "title": "Accordion title",
        "subtitle": "Accordion subtitle",
        "image": {
          "src": {
            "rawUrl": "https://example.com/images/logo.png"
          }
        },
        "text": "Accordion text"
      }
    ]
  ]
}

Type de réponse "chip de suggestion"

Le type de réponse "chip de suggestion" fournit à l'utilisateur final une liste de chips de suggestion cliquables.

Une fiche de chip de suggestion

Le tableau suivant décrit les champs :

Nom Type Description
type string Type de réponse : "chips".
options Tableau d'objets Tableau d'objets d'option.
options[].text string Texte de l'option.
options[].image objet Image de l'option.
options[].image.src objet Source de l'image de l'option.
options[].image.src.rawUrl string URL publique de l'image (facultatif).
options[].link string URL du lien de l'option.

Exemple :

{
  "richContent": [
    [
      {
        "type": "chips",
        "options": [
          {
            "text": "Chip 1",
            "image": {
              "src": {
                "rawUrl": "https://example.com/images/logo.png"
              }
            },
            "link": "https://example.com"
          },
          {
            "text": "Chip 2",
            "image": {
              "src": {
                "rawUrl": "https://example.com/images/logo.png"
              }
            },
            "link": "https://example.com"
          }
        ]
      }
    ]
  ]
}

Combiner des types de réponses

Vous pouvez utiliser les éléments de message enrichi individuels pour Dialogflow CX Messenger afin de créer une fiche personnalisée adaptée à vos besoins.

Voici un exemple utilisant certains des éléments listés précédemment :

Une fiche personnalisée

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow CX across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow CX",
        "subtitle": "Build natural and rich conversational experiences",
        "actionLink": "https://cloud.google.com/dialogflow/docs"
      },
      {
        "type": "chips",
        "options": [
          {
            "text": "Case Studies",
            "link": "https://cloud.google.com/dialogflow/case-studies"
          },
          {
            "text": "Docs",
            "link": "https://cloud.google.com/dialogflow/docs"
          }
        ]
      }
    ]
  ]
}

Débogage

Pour tester votre agent localement avec Dialogflow CX Messenger :

  • Intégrez l'élément Dialogflow CX Messenger dans une page, comme décrit dans la section Personnalisations HTML.
  • Démarrez un serveur HTTP local pour cette page avec un port spécifique.
  • Accédez à http://localhost:port_number pour accéder à cette page.