Umfangreiche Antworten fügen visuelle Elemente hinzu, um die Nutzerinteraktionen mit deiner Aktion zu verbessern. Sie können die folgenden umfangreichen Antworttypen als Teil einer Prompt verwenden:
- Basiskarte
- Bildkarte
- Tabellenkarte
Verwenden Sie beim Definieren einer Rich-Media-Antwort einen Kandidaten mit der RICH_RESPONSE-Oberflächenfunktion, damit Google Assistant die Rich-Antwort nur auf unterstützten Geräten zurückgibt. Sie können in einer Eingabeaufforderung nur eine umfassende Antwort pro content-Objekt verwenden.
Basiskarte
Basiskarten sind kurz gehalten und bieten Nutzern wichtige (oder zusammenfassende) Informationen und bieten ihnen bei Bedarf die Möglichkeit, über einen Weblink weitere Informationen zu erhalten.
Sie sollten einfache Karten hauptsächlich zu Anzeigezwecken verwenden, da sie ohne Schaltfläche keine Interaktionsmöglichkeiten haben. Damit eine Schaltfläche mit dem Web verknüpft werden kann, muss eine Oberfläche auch die Funktion WEB_LINK haben.
Attribute
Der grundlegende Kartenantworttyp hat die folgenden Eigenschaften:
| Property | Typ | Anforderung | Beschreibung |
|---|---|---|---|
title |
String | Optional | Nur-Text-Titel der Karte. Die Schriftart und -größe sind fest und die Zeichen nach der ersten Zeile werden abgeschnitten. Die Kartenhöhe wird minimiert, wenn kein Titel angegeben ist. |
subtitle |
String | Optional | Nur-Text-Untertitel der Karte. Die Schriftart und -größe sind fest und die Zeichen nach der ersten Zeile werden abgeschnitten. Die Kartenhöhe wird minimiert, wenn kein Untertitel angegeben ist. |
text |
String | Bedingt |
Nur-Text-Inhalt der Karte Zu langer Text wird am letzten Wortbruch mit Auslassungspunkten abgeschnitten. Dieses Attribut ist erforderlich, es sei denn, Für diese Property gelten die folgenden Einschränkungen:
Eine begrenzte Teilmenge von Markdown wird unterstützt:
|
image |
Image |
Optional | Bild, das auf der Karte angezeigt wird. Bilder können das Format JPG, PNG und GIF haben (animiert und nicht animiert). |
image_fill |
ImageFill |
Optional | Rahmen zwischen der Karte und dem Image-Container, der verwendet werden soll, wenn das Seitenverhältnis des Bilds nicht dem des Bildcontainers entspricht. |
button |
Link |
Optional | Schaltfläche, über die der Nutzer beim Antippen zu einer URL weitergeleitet wird. Die Schaltfläche muss eine name-Eigenschaft mit dem Schaltflächentext und eine url-Eigenschaft mit der Link-URL haben. Der Schaltflächentext darf nicht irreführend sein und wird während der Überprüfung überprüft. |
Beispielcode
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."
}
}
}
}
Bildkarten
Bildkarten sind eine einfachere Alternative zu einer Basiskarte, die auch ein Bild enthält. Verwenden Sie eine Bildkarte, wenn Sie ein Bild präsentieren möchten und keinen unterstützenden Text oder interaktive Komponenten benötigen.
Attribute
Der Antworttyp der Bildkarte hat die folgenden Eigenschaften:
| Property | Typ | Anforderung | Beschreibung |
|---|---|---|---|
url |
String | Erforderlich | Quell-URL des Bildes. Bilder können das Format JPG, PNG oder GIF haben (animiert und nicht animiert). |
alt |
String | Erforderlich | Textbeschreibung des Bildes, die für Barrierefreiheit verwendet werden soll. |
height |
int32 | Optional | Höhe des Bildes in Pixeln |
width |
int32 | Optional | Breite des Bildes in Pixeln. |
Beispielcode
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."
}
}
}
}
Tabellenkarten
Mit Tabellenkarten können Sie in Ihren Antworten tabellarische Daten anzeigen lassen, z. B. Sportergebnisse, Wahlergebnisse und Flüge. Sie können bis zu drei Spalten und Zeilen definieren, die Assistant auf Ihrer Tabellenkarte anzeigt. Sie können auch zusätzliche Spalten und Zeilen mit ihrer Priorisierung definieren.
In den Tabellen werden statische Daten angezeigt und sie können nicht interaktiv genutzt werden. Verwenden Sie für interaktive Auswahlantworten stattdessen eine visuelle Auswahlantwort.
Attribute
Der Antworttyp der Tabellenkarte hat die folgenden Eigenschaften:
| Property | Typ | Anforderung | Beschreibung |
|---|---|---|---|
title |
String | Bedingt | Nur-Text-Titel der Tabelle. Dieses Attribut ist erforderlich, wenn subtitle festgelegt ist. |
subtitle |
String | Optional | Nur-Text-Untertitel der Tabelle. Untertitel in Tabellenkarten sind von der Designanpassung nicht betroffen. |
columns |
Array mit TableColumn |
Erforderlich | Überschriften und Spaltenausrichtung. Jedes TableColumn-Objekt beschreibt die Überschrift und Ausrichtung einer anderen Spalte in derselben Tabelle. |
rows |
Array mit TableRow |
Erforderlich |
Zeilendaten der Tabelle Die ersten 3 Zeilen werden garantiert angezeigt, andere werden auf bestimmten Oberflächen möglicherweise nicht angezeigt. Sie können mit dem Simulator testen, welche Zeilen für eine bestimmte Oberfläche angezeigt werden. Jedes |
image |
Image |
Optional | Mit der Tabelle verknüpftes Bild. |
button |
Link |
Optional | Schaltfläche, über die der Nutzer beim Antippen zu einer URL weitergeleitet wird. Die Schaltfläche muss eine name-Eigenschaft mit dem Schaltflächentext und eine url-Eigenschaft mit der Link-URL haben. Der Schaltflächentext darf nicht irreführend sein und wird während der Überprüfung überprüft.
|
Beispielcode
Die folgenden Snippets zeigen, wie eine Tabellenkarte implementiert wird:
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."
}
}
}
}
Antworten anpassen
Sie können die Darstellung Ihrer Rich-Antworten ändern, indem Sie ein benutzerdefiniertes Design für Ihr Actions-Projekt erstellen. Diese Anpassung kann nützlich sein, um ein einzigartiges Design für die Unterhaltung zu definieren, wenn Nutzer Ihre Aktionen auf einer Oberfläche mit einem Bildschirm aufrufen.
So legen Sie ein benutzerdefiniertes Antwortdesign fest:
- Rufen Sie in der Actions Console die Option Entwickeln > Designanpassung auf.
- Legen Sie eine oder alle der folgenden Optionen fest:
- Hintergrundfarbe: wird als Hintergrund Ihrer Karten verwendet. Im Allgemeinen sollte eine helle Farbe für den Hintergrund verwendet werden, damit der Inhalt der Karte besser lesbar ist.
- Primäre Farbe: Hauptfarbe für die Texte und Oberflächenelemente Ihrer Karten. Im Allgemeinen sollte eine dunklere Primärfarbe verwendet werden, um den Kontrast zur Hintergrundfarbe zu verbessern.
- Schriftfamilie: Beschreibt die für Titel und andere gut sichtbare Textelemente verwendete Schriftart.
- Bildeckenstil: Hiermit wird das Aussehen der Ecken Ihrer Karten geändert.
- Hintergrundbild: Benutzerdefiniertes Bild, das anstelle der Hintergrundfarbe verwendet wird. Stellen Sie zwei verschiedene Bilder bereit, wenn sich das Gerät im Quer- oder Hochformat befindet. Wenn Sie ein Hintergrundbild verwenden, ist die Primärfarbe auf Weiß eingestellt.
- Klicken Sie auf Speichern.
