Lors de la création d'une carte personnalisée fulfillment, 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, et 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 les caractéristiques de base suivantes : structure:
{
"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 de Markdown exemples:
*Italic*
**Bold**
# Title
[Link text](Link URL)
![](Image URL)
Tables:
Header 1 | Header 2 -------- | -------- Cell 1 | Cell 2
Type de réponse "info"
Le type de réponse "info" correspond à une simple fiche de titre sur laquelle les utilisateurs peuvent cliquer ou appuyer.
Le tableau suivant décrit les champs :
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"
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. La Le type de réponse est compatible avec un chip de référence qui permet d'ajouter la source de l'image comme 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
Le type de réponse vidéo affiche un élément vidéo qui peut être vidéo à partir d'une URL, lue directement dans Chat + ou sous forme de 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 elle 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 |
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"
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"
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 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"
Le type de réponse "citations" fournit à l'utilisateur final une liste de les liens vers les citations.
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 la 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"
Le type de réponse "files" 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 : "files" |
files |
array<object> |
Tableau d'objets File |
files[].name |
string |
Nom du 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 l'élément Flex 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
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 aussiurl-allowlist
Personnalisation HTML)div
: élément du 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 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 | transparente | 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 tableaux Markdown), le code CSS suivant
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 | transparente | Arrière-plan d'une ligne d'un tableau |
df-messenger-table-even-background |
Facultatif | transparente | Arrière-plan des lignes de tableau paires |
df-messenger-table-odd-background |
Facultatif | transparente | 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 | transparente | 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 élément personnalisé définies 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
à partir du champ name
de la réponse. Le champ payload
est transmis à
l'élément personnalisé comme dfPayload
après la construction (mais avant connectedCallback
). Le champ peut contenir du code JSON arbitraire. De plus, dfResponseId
est
transmis à l'élément.
En reprenant la réponse de l'exemple, voici un exemple d'implémentation d'une é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 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 |