Fulfillment Dialogflow CX Messenger

Lorsque vous créez un traitement de carte personnalisée, 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 l'agent en texte brut et en Markdown, 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.

Réponse textuelle

La réponse textuelle est compatible avec le texte brut et Markdown. Voici quelques exemples de code Markdown:

• *Italic*
• **Bold**
• # Title
• [Link text](Link URL)

• ![](Image URL)

• Tables:

  Header 1 | Header 2
  -------- | --------
  Cell 1   | Cell 2
  

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.

Le tableau suivant décrit les champs :

Exemple :

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Info item title",
        "subtitle": "Info item subtitle",
        "image": {
          "rawUrl": "https://example.com/images/logo.png"
        },
        "anchor": {
          "href": "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.

Le tableau suivant décrit les champs :

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. Le type de réponse accepte un chip de référence qui permet d'ajouter la source de l'image en tant que lien d'ancrage, ainsi qu'un court texte descriptif et une icône.

Le tableau suivant décrit les champs :

Exemple :

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo",
        "reference": {
          "text": "Logo",
          "anchor": {
            "href": "https://example.com/images/logo.png"
          },
          "image": {
            "rawUrl": "https://example.com/images/logo_small.png"
          }
        }
      }
    ]
  ]
}

Les variables CSS suivantes peuvent être fournies :

Type de réponse vidéo

Le type de réponse vidéo affiche un élément vidéo qui peut être une vidéo directe à partir d'une URL, lue directement dans le messager ou un lien vers une vidéo.

Exemple :

{
  "richContent": [
    [
      {
        "type": "video",
        "source": {
          "type": "link",
          "anchor": {
            "href": "https://www.youtube.com/watch?v=cNfINi5CNbY"
          }
        }
      }
    ]
  ]
}

Les variables CSS suivantes peuvent être fournies :

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.

Le tableau suivant décrit les champs :

Exemple :

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "mode": "blocking",
        "text": "Button text",
        "anchor": {
          "href": "https://example.com"
        },
        "event": {
          "event": ""
        }
      }
    ]
  ]
}

Les variables CSS suivantes peuvent être fournies :

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.

La réponse contient un tableau de types de réponses list et divider. Le tableau suivant décrit le type list :

Le tableau suivant décrit le type divider :

Exemple :

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

Les variables CSS suivantes peuvent être fournies :

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.

Le tableau suivant décrit les champs :

Exemple :

{
  "richContent": [
    [
      {
        "type": "accordion",
        "title": "Accordion title",
        "subtitle": "Accordion subtitle",
        "image": {
          "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.

Le tableau suivant décrit les champs :

Exemple :

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

Les variables CSS suivantes peuvent être fournies :

Type de réponse "citations"

Le type de réponse "citations" fournit à l'utilisateur final une liste de liens de citation cliquables.

Le tableau suivant décrit les champs :

Exemple :

{
  "richContent": [
    [
      {
        "type": "match_citations",
        "citations": [
          {
            "title": "Source 1",
            "subtitle": "",
            "anchor": {
              "href": "https://example.com/1"
            }
          },
          {
            "title": "Source 2",
            "subtitle": "",
            "anchor": {
              "href": "https://example.com/2"
            }
          }
        ]
      }
    ]
  ]
}

Les variables CSS suivantes peuvent être fournies :

Type de réponse "fichiers"

Le type de réponse "files" affiche une liste d'éléments de fichier contenant un lien téléchargeable.

Le tableau suivant décrit les champs :

Exemple :

{
  "richContent": [
    [
      {
        "type": "files",
        "files": [
          {
            "name": "instructions.pdf",
            "image": {
              "rawUrl":
                  "https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/cloud_download/default/24px.svg"
            },
            "anchor": {
              "href": "https://example.com/instructions.pdf"
            }
          },
          {
            "name": "data.csv",
            "image": {
              "rawUrl":
                  "https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/csv/default/24px.svg"
            },
            "anchor": {
              "href": "https://example.com/data.csv"
            }
          }
        ]
      }
    ]
  ]
}

Les variables CSS suivantes peuvent être fournies :

Type de réponse HTML

Le type de réponse HTML fournit à l'utilisateur final un message HTML.

Le tableau suivant décrit les champs :

Balises HTML compatibles:

• a : élément d'ancrage (utilisé pour créer des liens hypertextes)
• b : élément en gras (utilisé pour mettre le texte en gras)
• i : élément italique (utilisé pour mettre du texte en italique)
• u : élément de soulignement (utilisé pour souligner le texte)
• h1 : élément de titre 1 (utilisé pour le titre principal d'une page)
• h2 : élément de titre 2 (utilisé pour les sous-titres)
• h3 : élément de titre 3 (utilisé pour les sous-sous-titres)
• p : élément Paragraph (utilisé pour créer des paragraphes de texte)
• br : élément de saut de ligne (utilisé pour créer des sauts de ligne dans un paragraphe)
• table : élément de table (utilisé pour créer des tables)
• tr : élément de ligne de tableau (utilisé pour créer des lignes dans un tableau)
• thead : élément d'en-tête de tableau (utilisé pour créer un en-tête dans un tableau)
• th : données d'en-tête de tableau ou élément de cellule (utilisé pour créer des cellules dans une ligne d'en-tête de tableau)
• tbody : élément de corps de table (utilisé pour créer un corps dans une table)
• td : données de table ou élément de cellule (utilisé pour créer des cellules dans une ligne de table)
• ul : élément de liste non ordonnée (utilisé pour créer des listes à puces)
• ol : élément de liste ordonnée (utilisé pour créer des listes numérotées)
• li : élément d'élément de liste (utilisé pour créer des éléments dans une liste)
• img : élément Image (utilisé pour afficher une image. Voir également url-allowlist Personnalisation HTML)
• div : élément de conteneur
• span : élément de conteneur intégré

Exemple :

{
  "richContent": [
    [
      {
        "type": "html",
        "html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
      }
    ]
  ]
}

Mettre en forme le code HTML et Markdown

Pour les éléments d'ancrage (élément HTML a et lien Markdown), les variables CSS suivantes peuvent être fournies:

Pour les éléments de tableau (élément HTML table et tableaux Markdown), les variables CSS suivantes peuvent être fournies:

Type de réponse du modèle personnalisé

Le type de réponse de modèle personnalisé affiche un élément personnalisé défini sur le site Web du client. L'élément n'est pas placé dans une fiche et se tient toujours seul.

Le tableau suivant décrit les champs :

Exemple :

{
  "richContent": [
    [
      {
        "type": "custom_template",
        "name": "custom-element-example",
        "payload": {
          "text": "Hello World"
        }
      }
    ]
  ]
}

Sur votre site Web, l'élément personnalisé doit être enregistré sous le nom exact du champ name de la réponse. Le champ payload est transmis à l'élément personnalisé en tant que dfPayload après la création (mais avant connectedCallback). Le champ peut contenir du JSON arbitraire. De plus, dfResponseId est transmis à l'élément.

À l'aide de la réponse de l'exemple, voici un exemple d'implémentation d'un élément personnalisé:

class CustomElementExample extends HTMLElement {
  constructor() {
    super();
    // The `dfPayload` field will be provided before `connectedCallback` is
    // being called.
    this.dfPayload = null;
    // The `dfResponseId` field will be provided before `connectedCallback` is
    // being called.
    this.dfResponseId = null;
    // It is not strictly required but recommended to contain the custom
    // element in a shadow root.
    // https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
    this.renderRoot = this.attachShadow({mode: 'open'});
  }

  /** Web component Lifecycle method. */
  connectedCallback() {
    const div = document.createElement('div');

    // The `.text` must match the payload's structure in `richContent.payload`.
    div.innerText = this.dfPayload.text;

    this.renderRoot.appendChild(div);
  }
}

(function() {
  // Registers the element. This name must match the name in
  // `richContent.payload`.
  customElements.define('custom-element-example', CustomElementExample);
})();

Combiner des types de réponses

Les différents éléments de message enrichi de Dialogflow CX 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 listés dans la section "Traitement" :

{
  "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",
        "anchor": {
          "href": "https://cloud.google.com/dialogflow/docs"
        }
      },
      {
        "type": "chips",
        "options": [
          {
            "text": "Case Studies",
            "anchor": {
              "href": "https://cloud.google.com/dialogflow/case-studies"
            }
          },
          {
            "text": "Docs",
            "anchor": {
              "href": "https://cloud.google.com/dialogflow/docs"
            }
          }
        ]
      }
    ]
  ]
}

Les variables CSS suivantes peuvent être fournies :

Contenu enrichi à partir d'un outil de playbook

Vous pouvez utiliser des outils de playbook pour envoyer du contenu enrichi à Dialogflow CX Messenger.

Étape 1: Créez un outil addRichContent dans votre agent

Créez un outil de fonction appelé addRichContent avec les données suivantes:

Entrée de l'outil:

properties: {}
type: object

Résultat de l'outil:

properties:
  status:
    type: string
  reason:
    type: string
type: object

Étape 2: Indiquez à votre agent comment utiliser cet outil

Indiquez à votre agent comment utiliser l'outil en lui fournissant des instructions et des exemples.

Par exemple, ajoutez quelque chose comme ce qui suit à vos instructions:

-  Greet  the  user
-  Ask  the  user  what  their  favorite  color  is.
   At  the  same  time  run  ${TOOL:  addRichContent}  to  display  buttons
   for  blue,  red,  yellow,  and  green.
-  Thank  the  user

Par exemple, créez un exemple comme suit:

Notez que la syntaxe du contenu enrichi est la même que celle que vous utiliseriez si vous deviez renvoyer une charge utile personnalisée dans un agent virtuel basé sur un flux.

Étape 3: Définir le code JavaScript

Dans le code de la page qui héberge df-messenger, vous devez créer du code JavaScript qui définit une fonction qui indique à df-messenger d'afficher le contenu enrichi. Vous devez également enregistrer cette fonction auprès de df-messenger pour qu'elle sache exécuter la fonction lorsque l'agent virtuel en a besoin.

Assurez-vous que la variable dfMessenger est déclarée et pointe vers votre instance de df-messenger.

Voici un exemple de code que vous pouvez utiliser à cette fin:

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

function  addRichContent(customPayload)  {
  dfMessenger.renderCustomCard(customPayload.richContent);

  // add error handling

  return  Promise.resolve({  status:  "OK",  reason:  null  });
}

// substitute your own tool id

const  toolId  =  'projects/PROJECT_ID/locations/LOCATION/agents/AGENT_ID/tools/TOOL_ID'
dfMessenger.registerClientSideFunction(toolId,  addRichContent.name,  addRichContent);