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
La réponse textuelle prend en charge le texte brut et Markdown. Voici quelques exemples 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 |
Images |
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'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"
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 accepte un chip de référence qui permet d'ajouter la source de l'image en tant que lien d'ancrage avec 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'ancre dans le chip de référence, définie par défaut sur _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 | Rayon de la bordure de l'image |
Type de commentaire vidéo
Le type de réponse vidéo affiche un élément vidéo qui peut être soit 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 vidéo facultatif |
source |
object |
Source de la vidéo |
source.type |
string |
Un 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 à un lien vers la page Web du lecteur. Cette fonctionnalité n'est implémentée que pour un ensemble connu de joueurs et est 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 | 1 px plein #e0e0e0 | Bordure de la vidéo |
df-messenger-video-border-radius |
Facultatif | 8 px | Arrondi de la 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 |
L'image du bouton est prioritaire sur icon |
image.rawUrl |
string |
URL publique de l'image |
mode |
string |
Facultatif, si elle est définie sur "blocage", l'entrée 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'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 | Arrondi de la 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 | Marge intérieure 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 ; autorise les valeurs négatives à 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 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'ancre (valeur par défaut : _blank) |
image |
object |
Images |
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 les éléments de liste |
df-messenger-list-border-bottom |
Facultatif | 1 px plein #e0e0e0 | Bordure entre les éléments de 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 |
Images |
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 elle est définie sur "blocage", 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, Ancre à 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 | Espace au-dessus des chips du 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 | Arrondi de la 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 lorsque l'utilisateur pointe dessus |
df-messenger-chips-padding |
Facultatif | 6px 16px | 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 police d'un chip |
df-messenger-chips-font-weight-hover |
Facultatif | Normal | Épaisseur de 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 case d'un chip |
df-messenger-chips-content-align |
Facultatif | CANNOT TRANSLATE | Alignement vertical du contenu (image, par exemple) 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'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 remarque ci-dessus. 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 flexible des citations : il est recommandé d'utiliser row (horizontal 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 la bordure d'une citation lorsque l'utilisateur pointe dessus |
df-messenger-citations-border-radius |
Facultatif | 4 px | Arrondi de bordure d'une citation |
df-messenger-citations-padding |
Facultatif | 8 px | Ajouter une marge intérieure à une citation |
df-messenger-citations-background |
Facultatif | blanc | Contexte d'une citation |
df-messenger-citations-background-hover |
Facultatif | rgba(68, 71, 70, 0,08) | Contexte d'une citation au passage de la souris |
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 au passage de la souris |
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 de la case d'une citation |
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 format HTML |
Balises HTML compatibles:
a: élément d'ancrage (utilisé pour créer des liens hypertexte)b: élément en gras (utilisé pour mettre le texte en gras)i: élément en italique (utilisé pour mettre du texte en italique)u: élément souligné (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-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 de 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és pour créer des cellules dans une ligne d'en-tête du tableau)tbody: élément du corps de tableau (utilisé pour créer un corps dans un tableau)td: données du tableau ou élément de cellule (utilisés pour créer des cellules dans une ligne du tableau)ul: élément de liste à puces (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 aussiurl-allowlistPersonnalisation HTML)div– É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>"
}
]
]
}
Appliquer des styles aux fichiers 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 "Lien" |
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 passage de la souris sur un élément 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 de lien |
df-messenger-link-border |
Facultatif | aucun | Bordure d'un élément "Lien" |
df-messenger-link-border-radius |
Facultatif | 0 | Rayon de bordure d'un élément de lien |
Pour les éléments de table (é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 d'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 de réduction des bordures d'un tableau : utilisez separate pour activer border-radius |
df-messenger-table-border-radius |
Facultatif | 0 | Arrondi de la bordure d'un tableau |
df-messenger-table-header-border-radius |
Facultatif | 0 | Arrondi de la 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 d'un 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'une ligne |
df-messenger-table-border-right |
Facultatif | aucun | Bordure droite d'une cellule d'un tableau |
df-messenger-table-border-right-last |
Facultatif | aucun | Bordure droite de la dernière cellule du tableau d'une ligne |
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 à numérotation |
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 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 du 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 "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 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 JSON arbitraire. De plus, dfResponseId est transmis à l'élément.
À partir 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 Messenger peuvent être utilisés pour créer une fiche personnalisée adaptée à vos besoins.
Voici un exemple utilisant certains des éléments listé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 d'éléments dans une fiche personnalisée |
df-messenger-card-border |
Facultatif | 1 px plein #e0e0e0 | Bordure d'une carte personnalisée |
df-messenger-card-border-radius |
Facultatif | 8 px | Arrondi de la bordure d'une fiche personnalisée |
df-messenger-card-border-top-left-radius |
Facultatif | 8 px | Arrondi de la bordure en haut à gauche d'une fiche personnalisée |
df-messenger-card-border-top-right-radius |
Facultatif | 8 px | Arrondi de la bordure en haut à droite d'une fiche personnalisée |
df-messenger-card-border-bottom-left-radius |
Facultatif | 8 px | Arrondi de la bordure en bas à gauche d'une fiche personnalisée |
df-messenger-card-border-bottom-right-radius |
Facultatif | 8 px | Arrondi de la bordure en bas à droite d'une fiche |
df-messenger-card-stack-border-top-left-radius |
Facultatif | 8 px | L'arrondi de bordure supérieur gauche pour les fiches personnalisées consécutives remplace le rayon supérieur gauche. |
df-messenger-card-stack-border-top-right-radius |
Facultatif | 8 px | L'arrondi de bordure supérieur droit pour les fiches personnalisées consécutives remplace le rayon supérieur droit |
df-messenger-card-stack-border-bottom-left-radius |
Facultatif | 8 px | L'arrondi de bordure inférieur gauche pour les fiches personnalisées consécutives remplace le rayon inférieur gauche. |
df-messenger-card-stack-border-bottom-right-radius |
Facultatif | 8 px | L'arrondi de bordure en bas à droite pour les fiches 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 de la case d'une carte personnalisée |