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 d'image
- Fiche de tableau
Lorsque vous définissez une réponse enrichie, utilisez un candidat avec la fonctionnalité 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 requête.
Carte de base
Les fiches de base sont conçues pour être concises, pour présenter des informations clés (ou récapitulatives) aux utilisateurs et pour permettre aux utilisateurs d'en savoir plus (à l'aide d'un lien Web) si vous le souhaitez.
Utilisez des fiches de base principalement à des fins d'affichage, car elles n'ont aucune fonctionnalité d'interaction sans bouton. Pour associer un bouton au Web, une surface doit également disposer de la fonctionnalité WEB_LINK.
Propriétés
Le type de réponse "Fiche de base" présente les propriétés suivantes:
| Propriété | Type | Obligatoire ? | Description |
|---|---|---|---|
title |
chaîne | Facultatif | Titre en texte brut de la carte. Les titres sont d'une police et d'une taille fixes, et les caractères au-delà de la première ligne sont tronqués. La hauteur de la fiche est réduite si aucun titre n'est spécifié. |
subtitle |
chaîne | Facultatif | Sous-titre en texte brut de la carte. Les titres sont d'une police et d'une taille fixes, et les caractères au-delà de la première ligne sont tronqués. La hauteur de la fiche est réduite si aucun sous-titre n'est spécifié. |
text |
chaîne | Conditional |
Contenu en texte brut de la carte. Le texte trop long est tronqué au dernier saut de mot avec 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 pris en charge:
|
image |
Image |
Facultatif | Image affichée dans la fiche. Les images peuvent être au format JPG, PNG ou GIF (avec ou sans animation). |
image_fill |
ImageFill |
Facultatif | Bordure entre la carte et le conteneur d'image à utiliser lorsque le format de l'image ne correspond pas à celui du conteneur d'image. |
button |
Link |
Facultatif | Bouton qui redirige l'utilisateur vers une URL lorsqu'il appuie dessus. 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 et 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 d'image
Les fiches d'image sont conçues pour constituer une alternative plus simple à 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 de composants texte ni de composants interactifs.
Propriétés
Le type de réponse "Fiche d'image" présente les propriétés suivantes:
| Propriété | Type | Obligatoire ? | Description |
|---|---|---|---|
url |
chaîne | Obligatoire | URL source de l'image. Les images peuvent être au format JPG, PNG ou GIF (avec ou sans animation). |
alt |
chaîne | Obligatoire | Description textuelle de l'image à utiliser pour l'accessibilité. |
height |
int32 | Facultatif | Hauteur de l'image en pixels. |
width |
int32 | Facultatif | 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 de tableau
Les fiches de tableau vous permettent d'afficher des données tabulaires dans votre réponse (par exemple, les classements sportifs, les résultats des élections et les vols). Vous pouvez définir les colonnes et les lignes (jusqu'à trois par ligne) que l'Assistant affichera dans votre fiche de tableau. Vous pouvez également définir des colonnes et des lignes supplémentaires, ainsi que leur hiérarchisation.
Les tables affichent des données statiques et ne sont pas interactives. Pour les réponses de sélection interactive, utilisez plutôt une réponse de sélection visuelle.
Propriétés
Le type de réponse "Fiche du tableau" présente les propriétés suivantes:
| Propriété | Type | Obligatoire ? | Description |
|---|---|---|---|
title |
chaîne | Conditional | Titre en texte brut du tableau. Cette propriété est obligatoire si subtitle est défini. |
subtitle |
chaîne | Facultatif | Sous-titre en texte brut du tableau. Les sous-titres des fiches de tableau ne sont pas affectés par la personnalisation du thème. |
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 de la table. L'affichage des trois premières lignes est garanti, mais d'autres peuvent ne pas apparaître sur certaines surfaces. Vous pouvez effectuer un test avec le simulateur pour voir quelles lignes sont affichées pour une surface donnée. Chaque objet |
image |
Image |
Facultatif | Image associée au tableau. |
button |
Link |
Facultatif | Bouton qui redirige l'utilisateur vers une URL lorsqu'il appuie dessus. 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 et est vérifié pendant le processus d'examen.
|
Exemple de code
Les extraits de code suivants montrent comment implémenter une fiche de tableau:
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 l'apparence unique de la conversation lorsque les utilisateurs appellent vos actions sur une surface dotée d'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 l'une ou l'ensemble des paramètres suivants :
- Couleur d'arrière-plan: elle sert d'arrière-plan à vos cartes. En règle générale, utilisez une couleur claire pour l'arrière-plan afin de faciliter la lecture du contenu de la carte.
- Couleur principale: couleur principale du texte d'en-tête et des éléments d'interface de vos cartes. En règle générale, utilisez une couleur primaire plus sombre 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 visibles.
- Style d'angle de l'image: modifie l'apparence des angles de vos fiches.
- 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 définie sur blanc.
- Cliquez sur Enregistrer.
