Cette page a été traduite par l'API Cloud Translation.

Fulfillment Dialogflow Messenger

Lors de la création d'un traitement de carte personnalisé, vous pouvez créer des réponses textuelles et des charges utiles personnalisées. Les réponses textuelles sont utilisées pour le texte brut et les réponses de l'agent Markdown, tandis que 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",
        ...
      }
    ]
  ]
}

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

Capture d'écran d'un texte Dialogflow Messenger

La réponse textuelle prend en charge le texte brut et Markdown. Voici quelques exemples Markdown:

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

Remarque :Pour activer les images dans Markdown, l'attribut url-allowlist doit être spécifié en conséquence.

Tables:

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

Type de réponse "info"

Capture d'écran du type d'informations Dialogflow Messenger

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 :

Nom	Type	Description
`type`	`string`	Type de réponse : "info"
`title`	`string`	Le titre de la fiche
`subtitle`	`string`	Le sous-titre de la fiche
`image`	`object`	Image
`image.rawUrl`	`string`	URL publique de l'image
`anchor`	`object`	Ancrer à suivre lorsque l'utilisateur clique sur l'élément
`anchor.href`	`string`	URL de l'ancre
`anchor.target`	`string`	Cible de l'ancre, valeur par défaut : `_blank`

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"

Capture d'écran du type de description Dialogflow Messenger

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

Le tableau suivant décrit les champs :

Nom	Type	Description
`type`	`string`	Type de réponse : "description"
`title`	`string`	Le titre de la fiche
`text`	`array<string>`	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"

Capture d'écran du type d'image Dialogflow Messenger

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, avec un texte descriptif court et une icône.

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
`reference.text`	`string`	Texte à afficher dans le chip de référence
`reference.anchor.href`	`string`	URL du chip de référence
`reference.anchor.target`	`string`	Cible de l'ancre dans le chip de référence. Valeur par défaut : `_blank`
`reference.image.rawUrl`	`string`	Image à afficher dans le chip de référence

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 :

Propriétés	Règle de saisie	Valeur par défaut	Description
`df-messenger-image-border-radius`	Facultatif	8 px	Angle de bordure de l'image

Type de commentaire vidéo

Capture d'écran du type de vidéo Dialogflow Messenger

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 l'application de messagerie ou un lien vers une vidéo.

Nom	Type	Description
`type`	`string`	Type de réponse: "vidéo"
`title`	`string`	Titre de vidéo facultatif
`source`	`object`	Source de la vidéo
`source.type`	`string`	Type de source vidéo (`link` ou `raw`)
`source.anchor`	`object`	Ancrer à suivre lorsque l'utilisateur clique sur l'élément
`source.embeddedPlayer`	`string`	Une vidéo de type `link` peut être intégrée au lieu d'un lien vers la page Web du lecteur. Ceci n'est implémenté que pour un ensemble connu de joueurs, compatible avec `youtube`.
`source.thumbnail`	`object`	Vignette à afficher pour "`anchor`"
`source.thumbnail.rawUrl`	`string`	URL de la vignette
`source.rawUrl`	`string`	URL d'une vidéo de type `raw`

Exemple :

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

Les variables CSS suivantes peuvent être fournies :

Propriétés	Règle de saisie	Valeur par défaut	Description
`df-messenger-video-width`	Facultatif	auto	Largeur d'une vidéo (limitée par `max-width\: 100%`)
`df-messenger-video-height`	Facultatif	auto	Hauteur d'une vidéo
`df-messenger-video-embed-width`	Facultatif	560px	Largeur d'une vidéo intégrée (limitée par `max-width\: 100%`)
`df-messenger-video-embed-height`	Facultatif	315px	Hauteur d'une vidéo intégrée
`df-messenger-video-border`	Facultatif	Ligne continue de 1 px #e0e0e0	Bordure de la vidéo
`df-messenger-video-border-radius`	Facultatif	8 px	Angle de bordure de la vidéo

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 :

Nom	Type	Description
`type`	`string`	Type de réponse : "bouton"
`icon`	`object`	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
`image`	`object`	Image du bouton, prioritaire sur `icon`
`image.rawUrl`	`string`	URL publique de l'image
`mode`	`string`	Facultatif, si défini sur "Blocking", l'entrée utilisateur est désactivée jusqu'à ce que l'utilisateur clique sur le bouton
`text`	`string`	Texte du bouton
`anchor`	`object`	Ancrer à suivre lorsque l'utilisateur clique sur l'élément
`anchor.href`	`string`	URL de l'ancre
`anchor.target`	`string`	Cible de l'ancre, valeur par défaut : `_blank`
`event`	`object`	Événement Dialogflow qui se déclenche lorsque l'utilisateur clique sur le bouton.

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 :

Propriétés	Règle de saisie	Valeur par défaut	Description
`df-messenger-button-border`	Facultatif	aucun	Bordure d'un bouton
`df-messenger-button-border-radius`	Facultatif	8 px	Angle de bordure d'un bouton
`df-messenger-button-font-color`	Facultatif	#1f1f1f	Couleur du texte d'un bouton
`df-messenger-button-font-family`	Facultatif	"Google Sans", "Helvetica Neue", sans-serif	Famille de polices d'un bouton
`df-messenger-button-font-size`	Facultatif	14 px	Taille de police d'un bouton
`df-messenger-button-padding`	Facultatif	12 px	Remplissage d'un bouton
`df-messenger-button-icon-spacing`	Facultatif	12 px	Espace entre l'icône du bouton et le texte
`df-messenger-button-icon-font-size`	Facultatif	24 px	Taille de l'icône du bouton
`df-messenger-button-image-size`	Facultatif	24 px	Taille de l'image du bouton
`df-messenger-button-image-offset`	Facultatif	0	Décalage de l'image du bouton ; permet aux valeurs négatives de décaler la marge intérieure
`df-messenger-button-text-align`	Facultatif	centre	Alignement du texte d'un bouton
`df-messenger-button-text-wrap`	Facultatif	Normal	Utiliser `nowrap` pour interdire les boutons multilignes

Type de réponse "liste"

Capture d'écran du type de liste Dialogflow Messenger

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 :

Nom	Type	Description
`type`	`string`	Type de réponse : "liste"
`title`	`string`	Titre de l'option
`subtitle`	`string`	Sous-titre de l'option
`event`	`object`	Événement Dialogflow qui se déclenche lorsque l'utilisateur clique sur l'option
`anchor`	`object`	Ancrer à suivre lorsque l'utilisateur clique sur l'élément
`anchor.href`	`string`	URL de l'ancre
`anchor.target`	`string`	Cible de l'ancre, valeur par défaut : `_blank`
`image`	`object`	Image
`image.rawUrl`	`string`	URL publique de l'image

Le tableau suivant décrit le type divider :

Nom	Type	Description
`type`	`string`	Type de réponse : "diviseur"

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 :

Propriétés	Règle de saisie	Valeur par défaut	Description
`df-messenger-list-padding`	Facultatif	16 px	Marge intérieure d'un élément de liste
`df-messenger-list-inset`	Facultatif	0	"Encart" horizontal supplémentaire de l'élément de liste (en plus de la marge intérieure), pour contrôler l'expansion de la bordure entre les éléments
`df-messenger-list-spacing`	Facultatif	10 px	Espace vertical entre des éléments de liste
`df-messenger-list-border-bottom`	Facultatif	Ligne continue de 1 px #e0e0e0	Bordure entre les éléments de liste

Type de réponse "accordéon"

Capture d'écran du type accordéon Dialogflow Messenger

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 :

Nom	Type	Description
`type`	`string`	Type de réponse : "accordéon"
`title`	`string`	Titre de l'accordéon
`subtitle`	`string`	Sous-titre de l'accordéon
`image`	`object`	Image
`image.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": {
          "rawUrl": "https://example.com/images/logo.png"
        },
        "text": "Accordion text"
      }
    ]
  ]
}

Type de réponse "chip de suggestion"

Capture d'écran du type de chips Dialogflow Messenger

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 :

Nom	Type	Description
`type`	`string`	Type de réponse "chip"
`options`	`array<object>`	Tableau des objets "Option"
`options[].mode`	`string`	Facultatif, si défini sur "Blocking", l'entrée utilisateur est désactivée jusqu'à ce que l'utilisateur clique sur le chip
`options[].text`	`string`	Texte de l'option
`options[].image`	`object`	Facultatif, image de l'option
`options[].image.rawUrl`	`string`	URL publique de l'option pour l'image
`options[].anchor`	`object`	Facultatif, Ancrer à suivre lorsque l'utilisateur clique sur l'élément
`options[].anchor.href`	`string`	URL de l'ancre
`options[].anchor.target`	`string`	Cible de l'ancre, valeur par défaut : `_blank`

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 :

Propriétés	Règle de saisie	Valeur par défaut	Description
`df-messenger-chips-spacing`	Facultatif	10 px	Au-dessus des chips, un espace avant le message précédent
`df-messenger-chips-border-color`	Facultatif	#e0e0e0	Couleur de bordure d'un chip
`df-messenger-chips-border-color-hover`	Facultatif	#e0e0e0	Couleur de bordure d'un chip lorsque l'utilisateur pointe dessus
`df-messenger-chips-border-radius`	Facultatif	999px	Angle de bordure d'un chip
`df-messenger-chips-background`	Facultatif	blanc	Arrière-plan d'un chip
`df-messenger-chips-background-hover`	Facultatif	rvba(68, 71, 70, 0,08)	Arrière-plan d'un chip lorsqu'il est pointé
`df-messenger-chips-padding`	Facultatif	6px 16px	Remplissage d'un chip
`df-messenger-chips-font-color`	Facultatif	noir	Couleur du texte d'un chip
`df-messenger-chips-font-family`	Facultatif	"Google Sans", "Helvetica Neue", sans-serif	Famille de polices d'un chip
`df-messenger-chips-font-size`	Facultatif	14 px	Taille du texte d'un chip
`df-messenger-chips-font-weight`	Facultatif	Normal	Épaisseur de police d'un chip
`df-messenger-chips-font-weight-hover`	Facultatif	Normal	Épaisseur de la police d'un chip lorsque l'utilisateur pointe dessus
`df-messenger-chips-box-shadow`	Facultatif	0 2px 2px 0 rgba(0, 0, 0, 0,24)	Ombre d'une case d'un chip
`df-messenger-chips-content-align`	Facultatif	flex-start	Alignement vertical du contenu (par exemple, l'image) dans un chip
`df-messenger-chips-text-wrap`	Facultatif	nowrap	Utilisez `normal` pour autoriser les chips multilignes

Type de réponse "Citations"

Capture d'écran du type de citations Dialogflow Messenger

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

Le tableau suivant décrit les champs :

Nom	Type	Description
`type`	`string`	Type de réponse: "match_citations"
`citations`	`array<object>`	Tableau d'objets Citation
`citations[].title`	`string`	Titre de la citation
`citations[].subtitle`	`string`	Sous-titre de la citation (actuellement ignoré)
`citations[].anchor`	`object`	Ancrer à suivre lorsque l'utilisateur clique sur l'élément
`citations[].anchor.href`	`string`	URL de l'ancre
`citations[].anchor.target`	`string`	Cible de l'ancre, valeur par défaut : `_blank`

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 :

Propriétés	Règle de saisie	Valeur par défaut	Description
`df-messenger-citations-spacing`	Facultatif	10 px	Espace au-dessus des citations du message précédent
`df-messenger-citations-message-display`	Facultatif	bloc	Définit l'affichage de la note au-dessus des citations. Les valeurs autorisées sont `block` ou `none`.
`df-messenger-citations-message-font-color`	Facultatif	#041e49	Couleur du texte de la note au-dessus des citations
`df-messenger-citations-message-font-size`	Facultatif	12 px	Taille du texte de la note au-dessus des citations
`df-messenger-citations-flex-direction`	Facultatif	ligne	Propriété de direction de la flexibilité des citations. Nous vous recommandons d'utiliser `row` (horizontalement avec des sauts de ligne) ou `column` (vertical)
`df-messenger-citations-border-color`	Facultatif	#1a73e8	Couleur de bordure d'une citation
`df-messeenger-citations-border-color-hover`	Facultatif	#1a73e8	Couleur de bordure d'une citation lorsque l'utilisateur pointe dessus
`df-messenger-citations-border-radius`	Facultatif	4 px	Angle de bordure d'une citation
`df-messenger-citations-padding`	Facultatif	8 px	Marge intérieure d'une citation
`df-messenger-citations-background`	Facultatif	blanc	Arrière-plan d'une citation
`df-messenger-citations-background-hover`	Facultatif	rvba(68, 71, 70, 0,08)	Arrière-plan d'une citation lorsque l'utilisateur pointe dessus
`df-messenger-citations-font-color`	Facultatif	#1a73e8	Couleur du texte d'une citation
`df-messenger-citations-font-family`	Facultatif	"Google Sans", "Helvetica Neue", sans-serif	Famille de polices d'une citation
`df-messenger-citations-font-size`	Facultatif	11 px	Taille du texte d'une citation
`df-messenger-citations-icon-font-size`	Facultatif	14 px	Taille du texte de l'icône d'une citation
`df-messenger-citations-font-weight`	Facultatif	Normal	Épaisseur de police d'une citation
`df-messenger-citations-font-weight-hover`	Facultatif	Normal	Épaisseur de police d'une citation lorsque l'utilisateur pointe dessus
`df-messenger-citations-icon-spacing`	Facultatif	4 px	Espace entre une icône et un texte dans une citation
`df-messenger-citations-box-shadow`	Facultatif	aucun	Ombre d'une case d'une citation

Type de réponse "Fichiers"

Capture d'écran des types de fichiers Dialogflow Messenger

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 :

Nom	Type	Description
`type`	`string`	Type de réponse: "files"
`files`	`array<object>`	Tableau d'objets File
`files[].name`	`string`	Nom de fichier
`files[].image`	`object`	Fichier image
`files[].image.rawUrl`	`string`	URL publique du fichier pour l'image
`files[].anchor`	`object`	Ancrer pour télécharger le fichier
`files[].anchor.href`	`string`	URL de l'ancre
`files[].anchor.target`	`string`	Cible de l'ancre, valeur par défaut : `_blank`

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

Propriétés	Règle de saisie	Valeur par défaut	Description
`df-messenger-files-spacing`	Facultatif	10 px	Espace au-dessus du fichier par rapport au message précédent
`df-messenger-files-distance`	Facultatif	8 px	Distance entre les fichiers de la liste
`df-messenger-files-flex-direction`	Facultatif	ligne	Propriété de direction de la flexibilité des fichiers. Nous vous recommandons d'utiliser `row` (horizontalement avec sauts de ligne) ou `column` (vertical)
`df-messenger-files-background`	Facultatif	blanc	Arrière-plan d'un fichier
`df-messenger-files-border`	Facultatif	Ligne continue de 1 px #e0e0e0	Bordure d'un fichier
`df-messenger-files-border-radius`	Facultatif	999px	Angle de bordure d'un fichier
`df-messenger-files-box-shadow`	Facultatif	0 2px 2px 0 rgba(0, 0, 0, 0,24)	Ombre d'une case d'un fichier
`df-messenger-files-padding`	Facultatif	6px 16px	Marge intérieure d'un fichier
`df-messenger-files-font-color`	Facultatif	#1f1f1f	Couleur du texte d'un fichier
`df-messenger-files-font-family`	Facultatif	"Google Sans", "Helvetica Neue", sans-serif	Famille de polices d'un fichier
`df-messenger-files-font-size`	Facultatif	14 px	Taille texte d'un fichier
`df-messenger-files-font-weight`	Facultatif	Normal	Épaisseur de police d'un fichier
`df-messenger-files-background-hover`	Facultatif	blanc	Arrière-plan d'un fichier lorsque l'utilisateur pointe dessus
`df-messenger-files-border-hover`	Facultatif	Ligne continue de 1 px #e0e0e0	Bordure d'un fichier lorsque l'utilisateur pointe dessus
`df-messenger-files-font-weight-hover`	Facultatif	Normal	Épaisseur de police d'un fichier lorsque l'utilisateur pointe dessus
`df-messenger-files-image-offset`	Facultatif	0 0 0 -8px	Décalage de l'image, à gauche
`df-messenger-files-image-size`	Facultatif	18 px	Taille de l'image à gauche
`df-messenger-files-text-spacing`	Facultatif	8 px	Distance entre le texte de l'image à gauche et l'icône texte à droite
`df-messenger-files-icon-offset`	Facultatif	0 -8px 0 0	Décalage de l'icône de téléchargement à droite
`df-messenger-files-icon-size`	Facultatif	18 px	Taille de l'icône de téléchargement à droite
`df-messenger-files-icon-font-color`	Facultatif	#444746	Couleur de l'icône de téléchargement à droite

Type de réponse HTML

Capture d'écran du type HTML de Dialogflow Messenger

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

Le tableau suivant décrit les champs :

Nom	Type	Description
`type`	`string`	Type de réponse: "html"
`html`	`string`	Contenu texte du message, compatible HTML

Balises HTML compatibles:

a : élément ancré (utilisé pour créer des liens hypertexte)
b : élément en gras (utilisé pour mettre du texte en gras)
i : élément en italique (utilisé pour mettre le texte en italique)
u : élément souligné (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-titres)
p : élément de paragraphe (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 tableau (utilisé pour créer des tableaux)
tr : élément de ligne du tableau (utilisé pour créer des lignes dans un tableau)
thead : élément d'en-tête du tableau (utilisé pour créer un en-tête dans un tableau)
th : données d'en-tête du tableau ou élément de cellule (utilisé pour créer des cellules dans une ligne d'en-tête du tableau)
tbody : élément "body" (utilisé pour créer un corps dans un tableau)
td : données ou élément de cellule d'un tableau (utilisé pour créer des cellules dans une ligne du tableau)
ul : élément de liste non ordonné (utilisé pour créer des listes à puces)
ol : élément de liste numéroté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 aussi url-allowlist Personnalisation HTML)
div : élément du 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>"
      }
    ]
  ]
}

Appliquer un style au code HTML et au Markdown

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

Propriétés	Règle de saisie	Valeur par défaut	Description
`df-messenger-link-decoration`	Facultatif	souligné	Décoration d'un élément link
`df-messenger-link-font-color`	Facultatif	#0b57d0	Couleur de police d'un élément lien non consulté
`df-messenger-link-visited-font-color`	Facultatif	#0b57d0	Couleur de police d'un élément de lien consulté
`df-messenger-link-hover-font-color`	Facultatif	#0b57d0	Couleur de police lors du survol d'un élément de lien
`df-messenger-link-background`	Facultatif	transparent	Arrière-plan d'un élément lien
`df-messenger-link-padding`	Facultatif	0	Marge intérieure d'un élément lien
`df-messenger-link-border`	Facultatif	aucun	Bordure d'un élément lien
`df-messenger-link-border-radius`	Facultatif	0	Angle de bordure d'un élément lien

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

Propriétés	Règle de saisie	Valeur par défaut	Description
`df-messenger-table-font-size`	Facultatif	14 px	Taille du texte dans un élément de tableau
`df-messenger-table-font-color`	Facultatif	#1f1f1f	Couleur du texte dans un élément de tableau
`df-messenger-table-align`	Facultatif	à gauche	Alignement du texte dans une cellule de tableau
`df-messenger-table-padding`	Facultatif	0	Marge intérieure dans une cellule de tableau
`df-messenger-table-border-collapse`	Facultatif	séparer	Mode réduction de la bordure d'un tableau. Utilisez `separate` pour activer `border-radius`.
`df-messenger-table-border-radius`	Facultatif	0	Angle de bordure d'un tableau
`df-messenger-table-header-border-radius`	Facultatif	0	Angle de bordure de l'en-tête du tableau
`df-messenger-table-border-top`	Facultatif	aucun	Bordure supérieure d'une ligne de tableau
`df-messenger-table-border-top-first`	Facultatif	aucun	Bordure supérieure de la première ligne du tableau
`df-messenger-table-border-bottom`	Facultatif	aucun	Bordure inférieure d'une ligne de tableau
`df-messenger-table-border-bottom-last`	Facultatif	aucun	Bordure inférieure de la dernière ligne du tableau
`df-messenger-table-border-left`	Facultatif	aucun	Bordure gauche d'une cellule de tableau
`df-messenger-table-border-left-first`	Facultatif	aucun	Bordure à gauche de la première cellule du tableau d'affilée
`df-messenger-table-border-right`	Facultatif	aucun	Bordure droite d'une cellule de tableau
`df-messenger-table-border-right-last`	Facultatif	aucun	Bordure droite de la dernière cellule du tableau d'affilée
`df-messenger-table-background`	Facultatif	transparent	Arrière-plan d'une ligne d'un tableau
`df-messenger-table-even-background`	Facultatif	transparent	Arrière-plan des lignes de tableau paires
`df-messenger-table-odd-background`	Facultatif	transparent	Arrière-plan des lignes de tableau impaires
`df-messenger-table-header-font-size`	Facultatif	14 px	Taille du texte dans un élément d'en-tête de tableau
`df-messenger-table-header-font-weight`	Facultatif	gras	Épaisseur de la police dans un élément d'en-tête de tableau
`df-messenger-table-header-font-color`	Facultatif	#1f1f1f	Couleur du texte dans un élément d'en-tête de tableau
`df-messenger-table-header-align`	Facultatif	à gauche	Alignement du texte dans une cellule d'en-tête de tableau
`df-messenger-table-header-padding`	Facultatif	0	Marge intérieure dans une cellule d'en-tête de tableau
`df-messenger-table-header-border-top`	Facultatif	aucun	Bordure supérieure de la ligne d'en-tête du tableau
`df-messenger-table-header-border-bottom`	Facultatif	aucun	Bordure inférieure de la ligne d'en-tête du tableau
`df-messenger-table-header-border-left`	Facultatif	aucun	Bordure gauche d'une cellule dans la ligne d'en-tête du tableau
`df-messenger-table-header-border-left-first`	Facultatif	aucun	Bordure à gauche de la première cellule dans la ligne d'en-tête du tableau
`df-messenger-table-header-border-right`	Facultatif	aucun	Bordure droite d'une cellule dans la ligne d'en-tête du tableau
`df-messenger-table-header-border-right-last`	Facultatif	aucun	Bordure droite de la dernière cellule d'une ligne d'en-tête de tableau
`df-messenger-table-header-background`	Facultatif	transparent	Arrière-plan de la ligne d'en-tête du tableau

Type de réponse "Modèle personnalisé"

Capture d'écran d'un type de modèle personnalisé Dialogflow Messenger

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

Le tableau suivant décrit les champs :

Nom	Type	Description
`type`	`string`	Type de réponse: "custom_template"
`name`	`string`	Nom de l'élément personnalisé
`payload`	`Object`	Charge utile à transmettre à l'élément personnalisé

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 construction (mais avant connectedCallback). Le champ peut contenir du code JSON arbitraire. En outre, 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

Capture d'écran d'une fiche personnalisée Dialogflow Messenger

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 utilisant certains des éléments répertoriés dans la section fulfillment:

{
  "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 :

Propriétés	Règle de saisie	Valeur par défaut	Description
`df-messenger-card-background`	Facultatif	blanc	Arrière-plan d'une carte personnalisée
`df-messenger-card-padding`	Facultatif	16 px	Marge intérieure des éléments dans une fiche personnalisée
`df-messenger-card-border`	Facultatif	Ligne continue de 1 px #e0e0e0	Bordure d'une carte personnalisée
`df-messenger-card-border-radius`	Facultatif	8 px	Angle de bordure d'une fiche personnalisée
`df-messenger-card-border-top-left-radius`	Facultatif	8 px	Angle de bordure en haut à gauche d'une fiche personnalisée
`df-messenger-card-border-top-right-radius`	Facultatif	8 px	Angle de bordure en haut à droite d'une fiche personnalisée
`df-messenger-card-border-bottom-left-radius`	Facultatif	8 px	Angle de bordure en bas à gauche d'une fiche personnalisée
`df-messenger-card-border-bottom-right-radius`	Facultatif	8 px	Angle de bordure en bas à droite d'une fiche
`df-messenger-card-stack-border-top-left-radius`	Facultatif	8 px	L'arrondi de bordure en haut à gauche des fiches personnalisées consécutives remplace celui de l'angle supérieur gauche.
`df-messenger-card-stack-border-top-right-radius`	Facultatif	8 px	L'arrondi de la bordure en haut à droite des fiches personnalisées consécutives remplace celui de l'angle supérieur droit.
`df-messenger-card-stack-border-bottom-left-radius`	Facultatif	8 px	L'arrondi en bas à gauche des fiches personnalisées consécutives remplace celui en bas à gauche.
`df-messenger-card-stack-border-bottom-right-radius`	Facultatif	8 px	L'arrondi en bas à droite des fiches personnalisées consécutives remplace celui en bas à droite.
`df-messenger-card-box-shadow`	Facultatif	0 2px 2px 0 rgba(0, 0, 0, 0,24)	Ombre d'une fiche personnalisée