Lorsque vous créez une exécution 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 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 accepte le texte brut et le format Markdown. Voici quelques exemples de code Markdown :
*Italic***Bold**# Title[Link text](Link 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 :
| 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 |
Ancre à suivre lorsque l'utilisateur clique sur l'élément |
anchor.href |
string |
URL de l'ancre |
anchor.target |
string |
Cible de l'ancrage, définie par défaut sur _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"
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"
Le type de réponse "image" est une fiche d'image sur laquelle les utilisateurs peuvent cliquer ou appuyer. Le type de réponse est compatible avec un chip de référence qui permet d'ajouter la source de l'image sous forme de lien d'ancrage, ainsi qu'un court texte descriptif 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'ancrage dans le chip de référence, _blank par défaut |
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 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 chat, ou un lien vers une vidéo.
| Nom | Type | Description |
|---|---|---|
type |
string |
Type de réponse : "vidéo" |
title |
string |
Titre de la vidéo (facultatif) |
source |
object |
Source de la vidéo |
source.type |
string |
Type de source vidéo, link ou raw |
source.anchor |
object |
Ancre à 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'être associée à la page Web du lecteur. Cette fonctionnalité n'est implémentée que pour un ensemble connu de lecteurs et est compatible avec youtube. |
source.thumbnail |
object |
Vignette à afficher pour anchor |
source.thumbnail.rawUrl |
string |
URL de la miniature |
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 | 315 px | Hauteur d'une vidéo intégrée |
df-messenger-video-border |
Facultatif | 1px solid #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 la valeur est définie sur "blocking", la saisie utilisateur est désactivée jusqu'à ce que l'utilisateur clique sur le bouton. |
text |
string |
Texte du bouton |
anchor |
object |
Ancre à suivre lorsque l'utilisateur clique sur l'élément |
anchor.href |
string |
URL de l'ancre |
anchor.target |
string |
Cible de l'ancrage, définie par défaut sur _blank |
event |
object |
Événement Dialogflow CX 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 la police d'un bouton |
df-messenger-button-padding |
Facultatif | 12 px | Marge intérieure d'un bouton |
df-messenger-button-icon-spacing |
Facultatif | 12 px | Espace entre l'icône et le texte du bouton |
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. Les valeurs négatives permettent 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"
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 CX qui se déclenche lorsque l'utilisateur clique sur l'option |
anchor |
object |
Ancre à suivre lorsque l'utilisateur clique sur l'élément |
anchor.href |
string |
URL de l'ancre |
anchor.target |
string |
Cible de l'ancrage, définie par défaut sur _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 | Marge intérieure horizontale 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 les éléments de la liste |
df-messenger-list-border-bottom |
Facultatif | 1 px solid #e0e0e0 | Bordure entre les éléments de la liste |
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 :
| 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"
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 la valeur est définie sur "blocking", la saisie 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, option "Image" |
options[].image.rawUrl |
string |
URL publique de l'option pour l'image |
options[].anchor |
object |
Ancre facultative à suivre lorsque l'utilisateur clique sur l'élément |
options[].anchor.href |
string |
URL de l'ancre |
options[].anchor.target |
string |
Cible de l'ancrage, définie par défaut sur _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 | Espace au-dessus des chips par rapport au message précédent |
df-messenger-chips-border-color |
Facultatif | #e0e0e0 | Couleur de la bordure d'un chip |
df-messenger-chips-border-color-hover |
Facultatif | #e0e0e0 | Couleur de la bordure d'un chip lorsque le curseur le survole |
df-messenger-chips-border-radius |
Facultatif | 999 px | Angle de bordure d'un chip |
df-messenger-chips-background |
Facultatif | blanc | Arrière-plan d'un chip |
df-messenger-chips-background-hover |
Facultatif | rgba(68, 71, 70, 0.08) | Arrière-plan d'un chip au survol |
df-messenger-chips-padding |
Facultatif | 6 px 16 px | Marge intérieure 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 la police d'un chip |
df-messenger-chips-font-weight-hover |
Facultatif | Normal | Épaisseur de la police d'un chip au passage de la souris |
df-messenger-chips-box-shadow |
Facultatif | 0 2px 2px 0 rgba(0, 0, 0, 0.24) | Ombre de la boîte 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 | Utiliser normal pour autoriser les chips multilignes |
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 :
| 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 |
Ancre à suivre lorsque l'utilisateur clique sur l'élément |
citations[].anchor.href |
string |
URL de l'ancre |
citations[].anchor.target |
string |
Cible de l'ancrage, définie par défaut sur _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 Flex des citations. Il est recommandé d'utiliser row (horizontal avec retours à la ligne) ou column (vertical). |
df-messenger-citations-border-color |
Facultatif | #1a73e8 | Couleur de la bordure d'une citation |
df-messeenger-citations-border-color-hover |
Facultatif | #1a73e8 | Couleur de la bordure d'une citation au passage de la souris |
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 | Contexte d'une citation |
df-messenger-citations-background-hover |
Facultatif | rgba(68, 71, 70, 0.08) | Arrière-plan d'une citation au survol |
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 la police d'une citation |
df-messenger-citations-font-weight-hover |
Facultatif | Normal | Épaisseur de la police d'une citation lorsque le curseur la survole |
df-messenger-citations-icon-spacing |
Facultatif | 4 px | Espace entre l'icône et le texte dans une citation |
df-messenger-citations-box-shadow |
Facultatif | aucun | Ombre d'une citation |
Type de réponse "fichiers"
Le type de réponse "Fichiers" affiche une liste d'éléments de fichier contenant un lien de téléchargement.
Le tableau suivant décrit les champs :
| Nom | Type | Description |
|---|---|---|
type |
string |
Type de réponse : "fichiers" |
files |
array<object> |
Tableau d'objets File |
files[].name |
string |
Nom du fichier |
files[].image |
object |
Image du fichier |
files[].image.rawUrl |
string |
URL publique du fichier image |
files[].anchor |
object |
Ancre pour télécharger le fichier |
files[].anchor.href |
string |
URL de l'ancre |
files[].anchor.target |
string |
Cible de l'ancrage, définie par défaut sur _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 Flex des fichiers. Nous vous recommandons d'utiliser row (horizontal avec retours à la ligne) ou column (vertical). |
df-messenger-files-background |
Facultatif | blanc | Arrière-plan d'un fichier |
df-messenger-files-border |
Facultatif | 1px solid #e0e0e0 | Bordure d'un fichier |
df-messenger-files-border-radius |
Facultatif | 999 px | Rayon de bordure d'un fichier |
df-messenger-files-box-shadow |
Facultatif | 0 2px 2px 0 rgba(0, 0, 0, 0.24) | Ombre d'un fichier |
df-messenger-files-padding |
Facultatif | 6 px 16 px | Rembourrage 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 du texte d'un fichier |
df-messenger-files-font-weight |
Facultatif | Normal | Épaisseur de la police d'un fichier |
df-messenger-files-background-hover |
Facultatif | blanc | Arrière-plan d'un fichier lorsque le curseur le survole |
df-messenger-files-border-hover |
Facultatif | 1px solid #e0e0e0 | Bordure d'un fichier lorsque le curseur le survole |
df-messenger-files-font-weight-hover |
Facultatif | Normal | Épaisseur de la police d'un fichier lorsque le curseur le survole |
df-messenger-files-image-offset |
Facultatif | 0 0 0 -8px | Décalage de l'image de gauche |
df-messenger-files-image-size |
Facultatif | 18 px | Taille de l'image de gauche |
df-messenger-files-text-spacing |
Facultatif | 8 px | Distance entre l'image et le texte à gauche, et entre le texte et l'icône à 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
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 textuel du message, compatible avec le HTML |
Balises HTML acceptées :
a: élément d'ancrage (utilisé pour créer des liens hypertextes)b: élément en gras (utilisé pour mettre du texte en gras)i: élément en italique (utilisé pour mettre du texte en italique)u: élément de soulignement (utilisé pour souligner du 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 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 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 tableau (utilisé pour créer un corps dans un tableau)td: données de tableau ou élément de cellule (utilisé pour créer des cellules dans une ligne de tableau)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 d'image (utilisé pour afficher une image, voir aussi Personnalisation HTML)url-allowlistdiv: élément de conteneurspan: élément de conteneur intégré
Exemple :
{
"richContent": [
[
{
"type": "html",
"html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
}
]
]
}
Mise en forme de HTML et 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 de lien |
df-messenger-link-font-color |
Facultatif | #0b57d0 | Couleur de police d'un élément de lien non consulté |
df-messenger-link-visited-font-color |
Facultatif | #0b57d0 | Couleur de police d'un élément de lien visité |
df-messenger-link-hover-font-color |
Facultatif | #0b57d0 | Couleur de la police lorsque vous pointez sur un élément de lien |
df-messenger-link-background |
Facultatif | transparent | Background d'un élément de lien |
df-messenger-link-padding |
Facultatif | 0 | Marge intérieure d'un élément de lien |
df-messenger-link-border |
Facultatif | aucun | Bordure d'un élément de lien |
df-messenger-link-border-radius |
Facultatif | 0 | Angle de bordure d'un élément de lien |
Pour les éléments de tableau (élément HTML table et tableaux 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 d'effondrement des bordures 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 d'un tableau dans une ligne |
df-messenger-table-border-right |
Facultatif | aucun | Bordure droite d'une cellule de tableau |
df-messenger-table-border-right-last |
Facultatif | aucun | Bordure de droite de la dernière cellule d'un tableau sur une ligne |
df-messenger-table-background |
Facultatif | transparent | Arrière-plan d'une ligne de 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 de 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é"
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é dans une carte et est toujours autonome.
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 indiqué dans le 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). Il peut contenir n'importe quel JSON. De plus, dfResponseId est transmis à l'élément.
En utilisant 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 répertoriés dans la section sur le fulfillment :
{
"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",
"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 fiche personnalisée |
df-messenger-card-padding |
Facultatif | 16 px | Marge intérieure des éléments d'une fiche personnalisée |
df-messenger-card-border |
Facultatif | 1px solid #e0e0e0 | Bordure d'une fiche personnalisée |
df-messenger-card-border-radius |
Facultatif | 8 px | Angle de bordure d'une carte personnalisée |
df-messenger-card-border-top-left-radius |
Facultatif | 8 px | Rayon de bordure en haut à gauche d'une carte personnalisée |
df-messenger-card-border-top-right-radius |
Facultatif | 8 px | Rayon de bordure en haut à droite d'une carte personnalisée |
df-messenger-card-border-bottom-left-radius |
Facultatif | 8 px | Rayon de la bordure inférieure gauche d'une carte personnalisée |
df-messenger-card-border-bottom-right-radius |
Facultatif | 8 px | Rayon de bordure en bas à droite d'une carte |
df-messenger-card-stack-border-top-left-radius |
Facultatif | 8 px | Le rayon de bordure en haut à gauche des cartes personnalisées consécutives remplace le rayon en haut à gauche. |
df-messenger-card-stack-border-top-right-radius |
Facultatif | 8 px | Le rayon de bordure en haut à droite des cartes personnalisées consécutives remplace le rayon en haut à droite |
df-messenger-card-stack-border-bottom-left-radius |
Facultatif | 8 px | Le rayon de bordure en bas à gauche des cartes personnalisées consécutives remplace le rayon en bas à gauche |
df-messenger-card-stack-border-bottom-right-radius |
Facultatif | 8 px | Le rayon de bordure inférieur droit des cartes personnalisées consécutives remplace le rayon inférieur droit |
df-messenger-card-box-shadow |
Facultatif | 0 2px 2px 0 rgba(0, 0, 0, 0.24) | Ombre portée d'une fiche personnalisée |
Contenu enrichi provenant d'un outil de playbook
Vous pouvez utiliser les 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 à l'aide d'instructions et d'exemples.
Par exemple, ajoutez une instruction comme celle-ci :
- 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éfinissez 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 indiquant à df-messenger d'afficher le contenu enrichi.
Vous devez également enregistrer cette fonction avec df-messenger, afin qu'il sache l'exécuter 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);