Verwende eine visuelle Auswahlantwort, wenn der Nutzer eine von mehreren Optionen auswählen soll, um mit deiner Aktion fortzufahren. Sie können die folgenden visuellen Auswahlantworttypen als Teil einer Aufforderung verwenden:
- Liste
- Sammlung
- In Sammlungen stöbern
Verwende beim Definieren einer visuellen Auswahlantwort einen Kandidaten mit der Oberflächenfunktion RICH_RESPONSE
, damit Google Assistant die Antwort nur auf unterstützten Geräten zurückgibt. Sie können in einer Aufforderung nur eine umfassende Antwort pro content
-Objekt verwenden.
Antwort zur visuellen Auswahl hinzufügen
Visuelle Auswahlantworten verwenden Slot-Füllung in einer Szene, um Optionen zu präsentieren, die ein Nutzer auswählen kann, und um ein ausgewähltes Element zu verarbeiten. Wenn Nutzer ein Element auswählen, übergibt Assistant den ausgewählten Elementwert als Argument an Ihren Webhook. Im Argumentwert erhalten Sie dann den Schlüssel für das ausgewählte Element.
Bevor Sie eine visuelle Auswahlantwort verwenden können, müssen Sie einen Typ definieren, der die Antwort darstellt, die ein Nutzer später auswählt. In Ihrem Webhook überschreiben Sie diesen Typ mit Inhalten, die Sie zur Auswahl anzeigen möchten.
So fügen Sie einer Szene in Actions Builder eine visuelle Auswahlantwort hinzu:
- Fügen Sie in der Szene im Bereich Slot-Füllung eine Anzeigenfläche hinzu.
- Wählen Sie einen zuvor definierten Typ für die visuelle Auswahlantwort aus und geben Sie ihm einen Namen. Der Webhook verwendet diesen Slotnamen, um später auf den Typ zu verweisen.
- Klicken Sie auf das Kästchen Webhook aufrufen und geben Sie den Namen des Event-Handlers in Ihrem Webhook an, den Sie für die visuelle Auswahlantwort verwenden möchten.
- Klicken Sie das Kästchen Aufforderungen senden an.
- Geben Sie in der Eingabeaufforderung den entsprechenden JSON- oder YAML-Inhalt basierend auf der visuellen Auswahlantwort an, die Sie zurückgeben möchten.
- Folgen Sie in Ihrem Webhook der Anleitung unter Ausgewählte Elemente verarbeiten.
Die verfügbaren Prompt-Eigenschaften und Beispiele für das Überschreiben von Typen finden Sie in den Abschnitten Liste, Sammlungen und Sammlungen suchen unten.
Ausgewählte Elemente werden verarbeitet
Bei visuellen Auswahlantworten müssen Sie die Auswahl eines Nutzers in Ihrem Webhook-Code verarbeiten. Wenn der Nutzer etwas aus einer visuellen Auswahlantwort auswählt, füllt Google Assistant die Anzeigenfläche mit diesem Wert.
Im folgenden Beispiel empfängt der Webhook-Code die ausgewählte Option und speichert sie in einer Variablen:
Node.js
app.handle('Option', conv => { // Note: 'prompt_option' is the name of the slot. const selectedOption = conv.session.params.prompt_option; conv.add(`You selected ${selectedOption}.`); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": { "prompt_option": "ITEM_1" } }, "prompt": { "override": false, "firstSimple": { "speech": "You selected ITEM_1.", "text": "You selected ITEM_1." } } } }
Liste
![Beispiel für eine Antwort zur Listenauswahl auf einem Mobilgerät](https://google-developers.gonglchuangl.net/static/assistant/conversational/images/list.png?authuser=0&hl=de)
Eine Liste zeigt Nutzern eine vertikale Liste mit mehreren Elementen, die sie durch Berührung oder per Spracheingabe auswählen können. Wenn ein Nutzer ein Element aus der Liste auswählt, generiert Assistant eine Nutzerabfrage (Sprechblase) mit dem Titel des Listenelements.
Listen sind nützlich, wenn es wichtig ist, Optionen zu unterscheiden oder wenn der Nutzer zwischen Optionen wählen muss, die vollständig gescannt werden müssen. Mit welchem „Peter“ müssen Sie zum Beispiel sprechen, Peter Jons oder Peter Hans?
Listen müssen mindestens 2 und dürfen maximal 30 Listenelemente enthalten. Die Anzahl der anfangs angezeigten Elemente hängt vom Gerät des Nutzers ab. Die gemeinsame Startzahl ist 10 Elemente.
Liste erstellen
Beim Erstellen einer Liste enthält der Prompt nur Schlüssel für jedes Element, das ein Nutzer auswählen kann. In Ihrem Webhook definieren Sie die Elemente, die diesen Schlüsseln entsprechen, basierend auf dem Typ Entry
.
Als Entry
-Objekte definierte Listenelemente haben die folgenden Anzeigeeigenschaften:
- Titel
- Feste Schriftart und Schriftgröße
- Maximale Länge: 1 Zeile (mit Auslassungspunkten abgeschnitten...)
- Muss eindeutig sein (zur Unterstützung der Stimmenauswahl)
- Beschreibung (optional)
- Feste Schriftart und Schriftgröße
- Maximale Länge: 2 Zeilen (abgeschnitten mit Auslassungspunkten...)
- Bild (optional)
- Größe: 48 x 48 Pixel
Bei visuellen Auswahlantworten muss ein Typ mit seinem Slotnamen mithilfe eines Laufzeittyps im Modus TYPE_REPLACE
überschrieben werden. Verweisen Sie in Ihrem Webhook-Ereignis-Handler auf den zu überschreibenden Typ im Attribut name
durch den Slotnamen (definiert unter Auswahlantworten hinzufügen).
Nachdem ein Typ überschrieben wurde, stellt der resultierende Typ die Liste der Elemente dar, die der Nutzer aus den vom Assistant angezeigten Elementen auswählen kann.
Attribute
Der Listenantworttyp hat die folgenden Eigenschaften:
Property | Typ | Anforderung | Beschreibung |
---|---|---|---|
items |
Array mit ListItem |
Erforderlich | Steht für ein Element in der Liste, das Nutzer auswählen können. Jede ListItem enthält einen Schlüssel, der einem referenzierten Typ für das Listenelement zugeordnet ist. |
title |
String | Optional | Nur-Text-Titel der Liste, beschränkt auf eine Zeile. Wenn kein Titel angegeben ist, wird die Kartenhöhe minimiert. |
subtitle |
String | Optional | Nur-Text-Untertitel der Liste. |
Beispielcode
In den folgenden Beispielen wird der Inhalt der Aufforderung im Webhook-Code oder in der JSON-Webhook-Antwort definiert. Sie können den Inhalt der Eingabeaufforderung jedoch auch in Actions Builder als YAML oder JSON definieren.
Node.js
const ASSISTANT_LOGO_IMAGE = new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' }); app.handle('List', conv => { conv.add('This is a list.'); // Override type based on slot 'prompt_option' conv.session.typeOverrides = [{ name: 'prompt_option', mode: 'TYPE_REPLACE', synonym: { entries: [ { name: 'ITEM_1', synonyms: ['Item 1', 'First item'], display: { title: 'Item #1', description: 'Description of Item #1', image: ASSISTANT_LOGO_IMAGE, } }, { name: 'ITEM_2', synonyms: ['Item 2', 'Second item'], display: { title: 'Item #2', description: 'Description of Item #2', image: ASSISTANT_LOGO_IMAGE, } }, { name: 'ITEM_3', synonyms: ['Item 3', 'Third item'], display: { title: 'Item #3', description: 'Description of Item #3', image: ASSISTANT_LOGO_IMAGE, } }, { name: 'ITEM_4', synonyms: ['Item 4', 'Fourth item'], display: { title: 'Item #4', description: 'Description of Item #4', image: ASSISTANT_LOGO_IMAGE, } }, ] } }]; // Define prompt content using keys conv.add(new List({ title: 'List title', subtitle: 'List subtitle', items: [ { key: 'ITEM_1' }, { key: 'ITEM_2' }, { key: 'ITEM_3' }, { key: 'ITEM_4' } ], })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {}, "typeOverrides": [ { "name": "prompt_option", "synonym": { "entries": [ { "name": "ITEM_1", "synonyms": [ "Item 1", "First item" ], "display": { "title": "Item #1", "description": "Description of Item #1", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, { "name": "ITEM_2", "synonyms": [ "Item 2", "Second item" ], "display": { "title": "Item #2", "description": "Description of Item #2", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, { "name": "ITEM_3", "synonyms": [ "Item 3", "Third item" ], "display": { "title": "Item #3", "description": "Description of Item #3", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, { "name": "ITEM_4", "synonyms": [ "Item 4", "Fourth item" ], "display": { "title": "Item #4", "description": "Description of Item #4", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } } ] }, "typeOverrideMode": "TYPE_REPLACE" } ] }, "prompt": { "override": false, "content": { "list": { "items": [ { "key": "ITEM_1" }, { "key": "ITEM_2" }, { "key": "ITEM_3" }, { "key": "ITEM_4" } ], "subtitle": "List subtitle", "title": "List title" } }, "firstSimple": { "speech": "This is a list.", "text": "This is a list." } } } }
Sammlung
Eine Sammlung wird horizontal gescrollt und ermöglicht Nutzern, ein Element durch Berührung oder Spracheingabe auszuwählen. Im Vergleich zu Listen haben Sammlungen große Kacheln und ermöglichen umfassendere Inhalte. Die Kacheln, aus denen eine Sammlung besteht, ähneln der Basiskarte mit Bild. Wenn Nutzer ein Element aus einer Sammlung auswählen, generiert Assistant eine Nutzerabfrage (Sprechblase) mit dem Titel des Elements.
Sammlungen sind gut, wenn dem Nutzer verschiedene Optionen angezeigt werden, aber kein direkter Vergleich zwischen ihnen erforderlich ist (im Gegensatz zu Listen). Im Allgemeinen sollten Sie Listen gegenüber Sammlungen bevorzugen, da Listen einfacher visuell zu durchstöbern und per Spracheingabe zu interagieren sind.
Sammlungen müssen mindestens 2 und dürfen maximal 10 Kacheln enthalten. Auf Display-fähigen Geräten können Nutzer nach links oder rechts wischen, um durch die Karten in einer Sammlung zu scrollen, bevor sie ein Element auswählen.
![Beispiel für eine Antwort zur Auswahl einer Sammlung auf einem Smart Display](https://google-developers.gonglchuangl.net/static/assistant/conversational/images/smart-display/carousel.png?authuser=0&hl=de)
Sammlung erstellen
Beim Erstellen einer Sammlung enthält die Eingabeaufforderung nur Schlüssel für jedes Element, das ein Nutzer auswählen kann. Im Webhook definieren Sie die Elemente, die diesen Schlüsseln entsprechen, basierend auf dem Typ Entry
.
Sammlungselemente, die als Entry
-Objekte definiert sind, haben folgende Anzeigeeigenschaften:
- Bild (optional)
- Das Bild muss 128 dp hoch und 232 dp breit sein
- Wenn das Seitenverhältnis des Bildes nicht mit dem Bildbegrenzungsrahmen übereinstimmt, wird das Bild zentriert und es werden auf beiden Seiten Balken angezeigt.
- Wenn ein Bildlink fehlerhaft ist, wird stattdessen ein Platzhalterbild verwendet
- Titel (erforderlich)
- Nur-Text, Markdown wird nicht unterstützt. Dieselben Formatierungsoptionen wie die Rich-Media-Antwort
- Die Kartenhöhe wird minimiert, wenn kein Titel angegeben ist.
- Muss eindeutig sein (zur Unterstützung der Stimmenauswahl)
- Beschreibung (optional)
- Nur-Text, Markdown wird nicht unterstützt. Dieselben Formatierungsoptionen wie die Rich-Media-Antwort
Bei visuellen Auswahlantworten muss ein Typ mit seinem Slotnamen mithilfe eines Laufzeittyps im Modus TYPE_REPLACE
überschrieben werden. Verweisen Sie in Ihrem Webhook-Ereignis-Handler auf den zu überschreibenden Typ im Attribut name
durch den Slotnamen (definiert unter Auswahlantworten hinzufügen).
Nachdem ein Typ überschrieben wurde, stellt der resultierende Typ die Sammlung von Elementen dar, die Ihr Nutzer aus den von Assistant angezeigten Elementen auswählen kann.
Attribute
Der Antworttyp "collection" hat die folgenden Eigenschaften:
Property | Typ | Anforderung | Beschreibung |
---|---|---|---|
items |
Array mit CollectionItem |
Erforderlich | Stellt ein Element in der Sammlung dar, das Nutzer auswählen können. Jede CollectionItem enthält einen Schlüssel, der einem referenzierten Typ für das Sammlungselement zugeordnet ist. |
title |
String | Optional | Nur-Text-Titel der Sammlung. Titel müssen in einer Sammlung eindeutig sein, damit die Stimmauswahl unterstützt wird. |
subtitle |
String | Optional | Nur-Text-Untertitel der Sammlung. |
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. |
Beispielcode
In den folgenden Beispielen wird der Inhalt der Aufforderung im Webhook-Code oder in der JSON-Webhook-Antwort definiert. Sie können den Inhalt der Eingabeaufforderung jedoch auch in Actions Builder als YAML oder JSON definieren.
Node.js
const ASSISTANT_LOGO_IMAGE = new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' }); app.handle('Collection', conv => { conv.add("This is a collection."); // Override type based on slot 'prompt_option' conv.session.typeOverrides = [{ name: 'prompt_option', mode: 'TYPE_REPLACE', synonym: { entries: [ { name: 'ITEM_1', synonyms: ['Item 1', 'First item'], display: { title: 'Item #1', description: 'Description of Item #1', image: ASSISTANT_LOGO_IMAGE, } }, { name: 'ITEM_2', synonyms: ['Item 2', 'Second item'], display: { title: 'Item #2', description: 'Description of Item #2', image: ASSISTANT_LOGO_IMAGE, } }, { name: 'ITEM_3', synonyms: ['Item 3', 'Third item'], display: { title: 'Item #3', description: 'Description of Item #3', image: ASSISTANT_LOGO_IMAGE, } }, { name: 'ITEM_4', synonyms: ['Item 4', 'Fourth item'], display: { title: 'Item #4', description: 'Description of Item #4', image: ASSISTANT_LOGO_IMAGE, } }, ] } }]; // Define prompt content using keys conv.add(new Collection({ title: 'Collection Title', subtitle: 'Collection subtitle', items: [ { key: 'ITEM_1' }, { key: 'ITEM_2' }, { key: 'ITEM_3' }, { key: 'ITEM_4' } ], })); });
JSON
{ "responseJson": { "session": { "id": "ABwppHHz--uQEEy3CCOANyB0J58oF2Yw5JEX0oXwit3uxDlRwzbEIK3Bcz7hXteE6hWovrLX9Ahpqu8t-jYnQRFGpAUqSuYjZ70", "params": {}, "typeOverrides": [ { "name": "prompt_option", "synonym": { "entries": [ { "name": "ITEM_1", "synonyms": [ "Item 1", "First item" ], "display": { "title": "Item #1", "description": "Description of Item #1", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, { "name": "ITEM_2", "synonyms": [ "Item 2", "Second item" ], "display": { "title": "Item #2", "description": "Description of Item #2", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, { "name": "ITEM_3", "synonyms": [ "Item 3", "Third item" ], "display": { "title": "Item #3", "description": "Description of Item #3", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, { "name": "ITEM_4", "synonyms": [ "Item 4", "Fourth item" ], "display": { "title": "Item #4", "description": "Description of Item #4", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } } ] }, "typeOverrideMode": "TYPE_REPLACE" } ] }, "prompt": { "override": false, "content": { "collection": { "imageFill": "UNSPECIFIED", "items": [ { "key": "ITEM_1" }, { "key": "ITEM_2" }, { "key": "ITEM_3" }, { "key": "ITEM_4" } ], "subtitle": "Collection subtitle", "title": "Collection Title" } }, "firstSimple": { "speech": "This is a collection.", "text": "This is a collection." } } } }
In Sammlungen stöbern
Ähnlich wie eine Sammlung ist das Durchsuchen von Sammlungen eine umfassende Antwort, mit der Nutzer durch Optionskarten scrollen können. Die Funktion zum Durchsuchen von Sammlungen ist speziell für Webinhalte vorgesehen und öffnet die ausgewählte Kachel in einem Webbrowser (oder in einem AMP-Browser, wenn alle Kacheln AMP-fähig sind).
Antworten zum Durchsuchen von Sammlungen enthalten mindestens zwei und maximal zehn Kacheln. Auf Display-fähigen Geräten können Nutzer nach oben oder unten wischen, um durch die Karten zu scrollen, bevor sie ein Element auswählen.
Sammlungssuche erstellen
Berücksichtigen Sie beim Erstellen einer Sammlungssuche, wie Nutzer mit dieser Aufforderung interagieren werden. Für jeden Sammlungssuch-item
wird die definierte URL geöffnet. Geben Sie daher hilfreiche Details für den Nutzer an.
Stöberelemente einer Sammlung haben folgende Anzeigeeigenschaften:
- Bild (optional)
- Das Bild wird auf 128 dp Höhe und 232 dp Breite erzwungen.
- Wenn das Seitenverhältnis des Bildes nicht mit dem Bildbegrenzungsrahmen übereinstimmt, wird das Bild zentriert und entweder an den Seiten oder oben und unten angezeigt. Die Farbe der Balken wird durch die
ImageFill
-Eigenschaft des Sammlungssuche-Attributs bestimmt. - Wenn ein Bildlink fehlerhaft ist, wird stattdessen ein Platzhalterbild verwendet.
- Titel (erforderlich)
- Nur-Text, Markdown wird nicht unterstützt. Es wird dieselbe Formatierung wie bei der einfachen Rich-Media-Antwort verwendet.
- Die Kartenhöhe wird minimiert, wenn kein Titel definiert ist.
- Beschreibung (optional)
- Nur-Text, Markdown wird nicht unterstützt. Es wird dieselbe Formatierung wie bei der einfachen Rich-Media-Antwort verwendet.
- Fußzeile (optional)
- Nur-Text; Markdown wird nicht unterstützt.
Attribute
Der Antworttyp zum Durchsuchen von Sammlungen hat die folgenden Eigenschaften:
Property | Typ | Anforderung | Beschreibung |
---|---|---|---|
item |
Objekt | Erforderlich | Stellt ein Element in der Sammlung dar, das Nutzer auswählen können. |
image_fill |
ImageFill |
Optional | Rahmen zwischen der Karte und dem Bildcontainer. Er wird verwendet, wenn das Seitenverhältnis des Bilds nicht dem des Bildcontainers entspricht. |
Der Sammlungstyp „item
“ hat die folgenden Eigenschaften:
Property | Typ | Anforderung | Beschreibung |
---|---|---|---|
title |
String | Erforderlich | Nur-Text-Titel des Sammlungselements. |
description |
String | Optional | Beschreibung des Sammlungselements |
footer |
String | Optional | Fußzeilentext für das Sammlungselement, angezeigt unter der Beschreibung. |
image |
Image |
Optional | Bild, das für das Sammlungselement angezeigt wird. |
openUriAction |
OpenUrl |
Erforderlich | URI, der geöffnet werden soll, wenn das Sammlungselement ausgewählt ist. |
Beispielcode
In den folgenden Beispielen wird der Inhalt der Aufforderung im Webhook-Code oder in der JSON-Webhook-Antwort definiert. Sie können den Inhalt der Eingabeaufforderung jedoch auch in Actions Builder als YAML oder JSON definieren.
YAML
candidates: - first_simple: variants: - speech: This is a collection browse. content: collection_browse: items: - title: Item #1 description: Description of Item #1 footer: Footer of Item #1 image: url: 'https://developers.google.com/assistant/assistant_96.png' open_uri_action: url: 'https://www.example.com' - title: Item #2 description: Description of Item #2 footer: Footer of Item #2 image: url: 'https://developers.google.com/assistant/assistant_96.png' open_uri_action: url: 'https://www.example.com' image_fill: WHITE
JSON
{ "candidates": [ { "firstSimple": { "speech": "This is a collection browse.", "text": "This is a collection browse." }, "content": { "collectionBrowse": { "items": [ { "title": "Item #1", "description": "Description of Item #1", "footer": "Footer of Item #1", "image": { "url": "https://developers.google.com/assistant/assistant_96.png" }, "openUriAction": { "url": "https://www.example.com" } }, { "title": "Item #2", "description": "Description of Item #2", "footer": "Footer of Item #2", "image": { "url": "https://developers.google.com/assistant/assistant_96.png" }, "openUriAction": { "url": "https://www.example.com" } } ], "imageFill": "WHITE" } } } ] }
Node.js
// Collection Browse app.handle('collectionBrowse', (conv) => { conv.add('This is a collection browse.'); conv.add(new CollectionBrowse({ 'imageFill': 'WHITE', 'items': [ { 'title': 'Item #1', 'description': 'Description of Item #1', 'footer': 'Footer of Item #1', 'image': { 'url': 'https://developers.google.com/assistant/assistant_96.png' }, 'openUriAction': { 'url': 'https://www.example.com' } }, { 'title': 'Item #2', 'description': 'Description of Item #2', 'footer': 'Footer of Item #2', 'image': { 'url': 'https://developers.google.com/assistant/assistant_96.png' }, 'openUriAction': { 'url': 'https://www.example.com' } } ] })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {}, "languageCode": "" }, "prompt": { "override": false, "content": { "collectionBrowse": { "imageFill": "WHITE", "items": [ { "title": "Item #1", "description": "Description of Item #1", "footer": "Footer of Item #1", "image": { "url": "https://developers.google.com/assistant/assistant_96.png" }, "openUriAction": { "url": "https://www.example.com" } }, { "title": "Item #2", "description": "Description of Item #2", "footer": "Footer of Item #2", "image": { "url": "https://developers.google.com/assistant/assistant_96.png" }, "openUriAction": { "url": "https://www.example.com" } } ] } }, "firstSimple": { "speech": "This is a collection browse.", "text": "This is a collection browse." } } } }