Ancien Dialogflow Messenger

L'ancienne intégration de Dialogflow Messenger fournit une boîte de dialogue de chat personnalisable pour votre agent, qui peut être intégrée à votre site Web. La boîte de dialogue de chat est mise en œuvre en tant que fenêtre de dialogue qui peut être ouverte et fermée par l'utilisateur final. Lorsqu'elle est ouverte, la boîte de dialogue de chat apparaît au-dessus de votre contenu dans l'angle inférieur droit de l'écran.

Migrer vers le nouveau Dialogflow Messenger

Nouvelle version de Dialogflow Messenger Fournit une authentification pour contrôler l'accès aux requêtes d'agent et d'autres options de configuration de l'interface utilisateur. Nous recommandons à tous les utilisateurs de l'ancienne version migrer vers la nouvelle version.

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

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

Pour migrer vers la nouvelle version:

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

Personnalisations HTML

Vous pouvez personnaliser divers aspects de l'affichage et du comportement de la boîte de dialogue de chat. L'élément HTML df-messenger comporte les attributs suivants :

Attribut Règle de saisie Value
agent-id Valeur ID associé à l'agent Dialogflow. 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 est utilisée 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é 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.
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. S'il n'est pas indiqué, l'intégration génère un ID unique pour chaque boîte de dialogue de chat.
user-id Facultatif Peut être utilisé pour suivre un utilisateur d'une session à une autre. Vous pouvez transmettre la valeur à Dialogflow via le champ queryParams.payload.userId dans une requête de détection d'intent, et Dialogflow 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 s'ouvre.

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 Propriété concernée
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 de fermeture dans la vue de chat fermée.
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>

Les paramètres ci-dessus entraîneront :

Capture d&#39;écran de Messenger

Événements JavaScript

Dialogflow Messenger déclenche une variété d'événements que vous pouvez créer écouteurs d'événements .

La cible d'événement pour 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

L'élément df-messenger fournit des fonctions que vous pouvez appeler pour affecter son comportement.

renderCustomText

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

Exemple :

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

renderCustomCard

Cette fonction affiche une fiche personnalisée, comme si elle provenait du traitement Dialogflow. Le format de la réponse de charge utile personnalisée est défini dans Traitement .

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

Lors de la création fulfillment, vous pouvez créer des réponses textuelles et des charges utiles personnalisées pour en savoir plus. 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 la charge utile personnalisée pour tous les types de réponses a la structure de base suivante :

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

Notez que la valeur richContent autorise un tableau externe et plusieurs tableaux internes. Les réponses dans un tableau interne sont liées dans une seule fiche visuelle. Lorsque le tableau externe contient plusieurs tableaux internes, plusieurs fiches sont affichées (une pour chaque tableau interne).

Les autres sous-sections 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" correspond à une simple fiche de titre sur laquelle les utilisateurs peuvent cliquer ou appuyer.

Capture d&#39;écran de Messenger

Le tableau suivant décrit les champs :

Nom Type Description
type chaîne Type de réponse : "info"
title chaîne Le titre de la fiche
subtitle chaîne Le sous-titre de la fiche
image objet Image
image.src objet Source de l'image
image.src.rawUrl chaîne URL publique de l'image
actionLink chaîne 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 qui peut comporter plusieurs lignes de texte.

Capture d&#39;écran de Messenger

Le tableau suivant décrit les champs :

Nom Type Description
type chaîne Type de réponse : "description"
title chaîne Le 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.

Capture d&#39;écran de Messenger

Le tableau suivant décrit les champs :

Nom Type Description
type chaîne Type de réponse : "image"
rawUrl chaîne URL publique de l'image
accessibilityText chaîne 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 sur laquelle les utilisateurs peuvent cliquer ou appuyer.

Capture d&#39;écran de Messenger

Le tableau suivant décrit les champs :

Nom Type Description
type chaîne Type de réponse : "bouton"
icon objet Icône du bouton
icon.type chaîne Icône de la bibliothèque d'icône Material. L'icône par défaut est une flèche
icon.color chaîne Code hexadécimal de couleur
text chaîne Texte du bouton
link chaîne URL à suivre lorsque l'utilisateur clique sur le bouton
event objet Événement Dialogflow qui se déclenche 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.

Capture d&#39;écran de Messenger

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 chaîne Type de réponse : "liste"
title chaîne Titre de l'option
subtitle chaîne Sous-titre de l'option
event objet Événement Dialogflow qui se déclenche lorsque l'utilisateur clique sur l'option

Le tableau suivant décrit le type divider :

Nom Type Description
type chaîne Type de réponse : "diviseur"

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 "accordéon" est une petite fiche sur laquelle un utilisateur peut cliquer ou appuyer pour développer et afficher davantage de texte.

Capture d&#39;écran de Messenger

Le tableau suivant décrit les champs :

Nom Type Description
type chaîne Type de réponse : "accordéon"
title chaîne Titre de l'accordéon
subtitle chaîne Sous-titre de l'accordéon
image objet Image
image.src objet Source de l'image
image.src.rawUrl chaîne URL publique de l'image
text chaîne 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 "élément de suggestion" fournit à l'utilisateur final une liste de chips de suggestion cliquables.

Capture d&#39;écran de Messenger

Le tableau suivant décrit les champs :

Nom Type Description
type chaîne Type de réponse "chip"
options Tableau d'objets Tableau des objets "Option"
options[].text chaîne 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 chaîne URL publique de l'option pour l'image
options[].link chaîne Lien vers 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

Les différents éléments de message enrichi de Dialogflow Messenger peuvent être utilisés pour créer une fiche personnalisée adaptée à vos besoins. Voici un exemple d'utilisation de certains des éléments répertoriés ci-dessus :

Capture d&#39;écran de Messenger

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow",
        "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 avec Dialogflow Messenger en local, procédez comme suit :

  • Intégrez l'élément Dialogflow Messenger dans une page, comme décrit ci-dessus.
  • Démarrez un serveur HTTP local pour cette page avec un port spécifique.
  • Accédez à cette page à l'adresse http://localhost:port_number.