Les réponses enrichies ajoutent des éléments visuels pour améliorer les interactions des utilisateurs avec votre action. Vous pouvez utiliser les types de réponses enrichies suivants dans une invite :
- Carte de base
- Fiche illustrée
- Fiche de tableau
Lorsque vous définissez une réponse enrichie, utilisez une candidat avec la capacité de surface RICH_RESPONSE, afin que l'Assistant Google ne renvoie la réponse enrichie que sur les appareils compatibles. Vous ne pouvez utiliser qu'une seule réponse enrichie par objet content dans une invite.
Carte de base
Les fiches de base sont conçues pour être concises, présenter des informations clés (ou récapitulatifs) aux utilisateurs et leur permettre d'en savoir plus si vous le souhaitez (à l'aide d'un lien Web).
Utilisez les fiches de base principalement à des fins d'affichage, car elles ne permettent pas d'interagir sans bouton. Pour associer un bouton au Web, une surface doit également être dotée de la fonctionnalité WEB_LINK.
Propriétés
Le type de réponse de carte de base possède les propriétés suivantes:
| Propriété | Type | Exigence | Description |
|---|---|---|---|
title |
chaîne | Facultative | Titre en texte brut de la fiche. Les titres ont une police et une taille fixes, et les caractères au-delà de la première ligne sont tronqués. La hauteur de la fiche se réduit si aucun titre n'est spécifié. |
subtitle |
chaîne | Facultative | Sous-titre en texte brut de la fiche. Les titres ont une police et une taille fixes, et les caractères au-delà de la première ligne sont tronqués. La hauteur de la fiche se réduit si aucun sous-titre n'est spécifié. |
text |
chaîne | Conditionnel |
Contenu de la fiche en texte brut. Les mots trop longs sont tronqués à la dernière coupure par des points de suspension. Cette propriété est obligatoire, sauf si Cette propriété est soumise aux restrictions suivantes:
Un sous-ensemble limité de Markdown est compatible:
|
image |
Image |
Facultative | Image affichée sur la fiche. Les images peuvent être au format JPG, PNG ou GIF (animé ou non). |
image_fill |
ImageFill |
Facultative | Bordure entre la carte et le conteneur d'images à utiliser lorsque les proportions de l'image ne correspondent pas à celles du conteneur. |
button |
Link |
Facultative | Bouton qui redirige l'utilisateur vers une URL lorsqu'il appuie. Le bouton doit avoir une propriété name contenant le texte du bouton et une propriété url contenant l'URL du lien. Le texte du bouton ne doit pas être trompeur. Il est vérifié pendant le processus d'examen. |
Exemple de code
YAML
candidates:
- first_simple:
variants:
- speech: This is a card.
text: This is a card.
content:
card:
title: Card Title
subtitle: Card Subtitle
text: Card Content
image:
url: 'https://developers.google.com/assistant/assistant_96.png'
alt: Google Assistant logo
JSON
{
"candidates": [
{
"first_simple": {
"variants": [
{
"speech": "This is a card.",
"text": "This is a card."
}
]
},
"content": {
"card": {
"title": "Card Title",
"subtitle": "Card Subtitle",
"text": "Card Content",
"image": {
"url": "https://developers.google.com/assistant/assistant_96.png",
"alt": "Google Assistant logo"
}
}
}
}
]
}
Node.js
app.handle('Card', conv => {
conv.add('This is a card.');
conv.add(new Card({
"title": "Card Title",
"subtitle": "Card Subtitle",
"text": "Card Content",
"image": new Image({
url: 'https://developers.google.com/assistant/assistant_96.png',
alt: 'Google Assistant logo'
})
}));
});
JSON
{
"responseJson": {
"session": {
"id": "session_id",
"params": {}
},
"prompt": {
"override": false,
"content": {
"card": {
"title": "Card Title",
"subtitle": "Card Subtitle",
"text": "Card Content",
"image": {
"alt": "Google Assistant logo",
"height": 0,
"url": "https://developers.google.com/assistant/assistant_96.png",
"width": 0
}
}
},
"firstSimple": {
"speech": "This is a card.",
"text": "This is a card."
}
}
}
}
Fiches illustrées
Les fiches d'images sont conçues pour être une alternative plus simple qu'une fiche de base qui contient également une image. Utilisez une fiche d'image lorsque vous souhaitez présenter une image, et que vous n'avez pas besoin d'accepter du texte ou des composants interactifs.
Propriétés
Le type de réponse "carte d'image" possède les propriétés suivantes:
| Propriété | Type | Exigence | Description |
|---|---|---|---|
url |
chaîne | Obligatoire | URL source de l'image. Les images peuvent être au format JPG, PNG ou GIF (animé ou non). |
alt |
chaîne | Obligatoire | Description textuelle de l'image à utiliser pour l'accessibilité. |
height |
int32 | Facultative | Hauteur de l'image en pixels. |
width |
int32 | Facultative | Largeur de l'image en pixels. |
Exemple de code
YAML
candidates:
- first_simple:
variants:
- speech: This is an image prompt.
text: This is an image prompt.
content:
image:
alt: Google Assistant logo
url: 'https://developers.google.com/assistant/assistant_96.png'
JSON
{
"candidates": [
{
"first_simple": {
"variants": [
{
"speech": "This is an image prompt.",
"text": "This is an image prompt."
}
]
},
"content": {
"image": {
"alt": "Google Assistant logo",
"url": "https://developers.google.com/assistant/assistant_96.png"
}
}
}
]
}
Node.js
app.handle('Image', conv => {
conv.add("This is an image prompt!");
conv.add(new Image({
url: 'https://developers.google.com/assistant/assistant_96.png',
alt: 'Google Assistant logo'
}));
});
JSON
{
"responseJson": {
"session": {
"id": "session_id",
"params": {}
},
"prompt": {
"override": false,
"content": {
"image": {
"alt": "Google Assistant logo",
"height": 0,
"url": "https://developers.google.com/assistant/assistant_96.png",
"width": 0
}
},
"firstSimple": {
"speech": "This is an image prompt.",
"text": "This is an image prompt."
}
}
}
}
Fiches
Les fiches du tableau vous permettent d'afficher des données tabulaires dans votre réponse (par exemple, des résultats sportifs, des résultats d'élections et des vols). Vous pouvez définir des colonnes et des lignes (jusqu'à trois) que l'Assistant affichera dans votre fiche. Vous pouvez également définir des colonnes et des lignes supplémentaires, ainsi que leur priorité.
Les tableaux affichent des données statiques et ne peuvent pas être interagis. Pour les réponses de sélection interactives, utilisez plutôt une réponse de sélection visuelle.
Propriétés
Le type de réponse "fiche de table" possède les propriétés suivantes:
| Propriété | Type | Exigence | Description |
|---|---|---|---|
title |
chaîne | Conditionnel | Titre en texte brut du tableau. Cette propriété est obligatoire si subtitle est défini. |
subtitle |
chaîne | Facultative | Sous-titre en texte brut du tableau. La personnalisation des thèmes n'a pas d'incidence sur les sous-titres dans les fiches. |
columns |
tableau de TableColumn |
Obligatoire | En-têtes et alignement des colonnes. Chaque objet TableColumn décrit l'en-tête et l'alignement d'une colonne différente dans la même table. |
rows |
tableau de TableRow |
Obligatoire |
Données de ligne du tableau. L'affichage des trois premières lignes est garanti, mais il est possible que d'autres n'apparaissent pas sur certaines surfaces. Le simulateur vous permet de voir quelles lignes sont affichées pour une surface donnée. Chaque objet |
image |
Image |
Facultative | Image associée au tableau. |
button |
Link |
Facultative | Bouton qui redirige l'utilisateur vers une URL lorsqu'il appuie. Le bouton doit être une propriété name contenant le texte du bouton et une propriété url contenant l'URL du lien. Le texte du bouton ne doit pas être trompeur. Il est vérifié pendant le processus d'examen.
|
Exemple de code
Les extraits suivants montrent comment implémenter une fiche de table:
YAML
candidates:
- first_simple:
variants:
- speech: This is a table.
text: This is a table.
content:
table:
title: Table Title
subtitle: Table Subtitle
columns:
- header: Column A
- header: Column B
- header: Column C
rows:
- cells:
- text: A1
- text: B1
- text: C1
- cells:
- text: A2
- text: B2
- text: C2
- cells:
- text: A3
- text: B3
- text: C3
image:
alt: Google Assistant logo
url: 'https://developers.google.com/assistant/assistant_96.png'
JSON
{
"candidates": [
{
"first_simple": {
"variants": [
{
"speech": "This is a table.",
"text": "This is a table."
}
]
},
"content": {
"table": {
"title": "Table Title",
"subtitle": "Table Subtitle",
"columns": [
{
"header": "Column A"
},
{
"header": "Column B"
},
{
"header": "Column C"
}
],
"rows": [
{
"cells": [
{
"text": "A1"
},
{
"text": "B1"
},
{
"text": "C1"
}
]
},
{
"cells": [
{
"text": "A2"
},
{
"text": "B2"
},
{
"text": "C2"
}
]
},
{
"cells": [
{
"text": "A3"
},
{
"text": "B3"
},
{
"text": "C3"
}
]
}
],
"image": {
"alt": "Google Assistant logo",
"url": "https://developers.google.com/assistant/assistant_96.png"
}
}
}
}
]
}
Node.js
app.handle('Table', conv => {
conv.add('This is a table.');
conv.add(new Table({
"title": "Table Title",
"subtitle": "Table Subtitle",
"image": new Image({
url: 'https://developers.google.com/assistant/assistant_96.png',
alt: 'Google Assistant logo'
}),
"columns": [{
"header": "Column A"
}, {
"header": "Column B"
}, {
"header": "Column C"
}],
"rows": [{
"cells": [{
"text": "A1"
}, {
"text": "B1"
}, {
"text": "C1"
}]
}, {
"cells": [{
"text": "A2"
}, {
"text": "B2"
}, {
"text": "C2"
}]
}, {
"cells": [{
"text": "A3"
}, {
"text": "B3"
}, {
"text": "C3"
}]
}]
}));
});
JSON
{
"responseJson": {
"session": {
"id": "session_id",
"params": {}
},
"prompt": {
"override": false,
"content": {
"table": {
"button": {},
"columns": [
{
"header": "Column A"
},
{
"header": "Column B"
},
{
"header": "Column C"
}
],
"image": {
"alt": "Google Assistant logo",
"height": 0,
"url": "https://developers.google.com/assistant/assistant_96.png",
"width": 0
},
"rows": [
{
"cells": [
{
"text": "A1"
},
{
"text": "B1"
},
{
"text": "C1"
}
]
},
{
"cells": [
{
"text": "A2"
},
{
"text": "B2"
},
{
"text": "C2"
}
]
},
{
"cells": [
{
"text": "A3"
},
{
"text": "B3"
},
{
"text": "C3"
}
]
}
],
"subtitle": "Table Subtitle",
"title": "Table Title"
}
},
"firstSimple": {
"speech": "This is a table.",
"text": "This is a table."
}
}
}
}
Personnaliser vos réponses
Vous pouvez modifier l'apparence de vos réponses enrichies en créant un thème personnalisé pour votre projet Actions. Cette personnalisation peut être utile pour définir un aspect unique à la conversation lorsque les utilisateurs appellent vos actions sur une surface avec un écran.
Pour définir un thème de réponse personnalisé, procédez comme suit:
- Dans la console Actions, accédez à Développer > Personnalisation du thème.
- Définissez tout ou partie des paramètres suivants :
- Couleur d'arrière-plan: utilisée comme arrière-plan. En général, utilisez une couleur claire pour l'arrière-plan afin de faciliter la lecture du contenu de la carte.
- Couleur principale: couleur principale des textes d'en-tête et des éléments d'interface de vos cartes. En règle générale, utilisez une couleur primaire plus foncée pour mieux contraster avec la couleur d'arrière-plan.
- Famille de polices : décrit le type de police utilisé pour les titres et les autres éléments de texte importants.
- Style d'angle d'image: modifie l'apparence des angles de vos cartes.
- Image de fond : image personnalisée à utiliser à la place de la couleur d'arrière-plan. Fournissez deux images différentes lorsque l'appareil de surface est en mode paysage ou portrait. Si vous utilisez une image de fond, la couleur principale est le blanc.
- Cliquez sur Enregistrer.
