In Dialogflow ansehen
Klicken Sie auf Weiter, um das Antwortbeispiel in Dialogflow zu importieren. Führen Sie dann die folgenden Schritte aus, um das Beispiel bereitzustellen und zu testen:
- Geben Sie einen Agent-Namen ein und erstellen Sie einen neuen Dialogflow-Agent für das Beispiel.
- Nachdem der Agent importiert wurde, klicken Sie auf Zum Agent.
- Klicken Sie im Hauptnavigationsmenü auf Fulfillment (Auftragsausführung).
- Aktivieren Sie den Inline-Editor und klicken Sie auf Bereitstellen. Der Editor enthält den Beispielcode.
- Gehen Sie im Hauptnavigationsmenü zu Integrationen und klicken Sie dann auf Google Assistant.
- Aktivieren Sie im angezeigten modalen Fenster die Option Automatische Vorschau der Änderungen und klicken Sie auf Testen, um den Actions Simulator zu öffnen.
- Geben Sie im Simulator
Talk to my test app
ein, um das Beispiel zu testen.
Rich-Antworten verwenden, wenn Sie visuelle Elemente darstellen möchten, um Nutzerinteraktionen mit Ihrer Aktion zu verbessern. Diese visuellen Elemente können Hinweise dafür liefern, wie eine Unterhaltung fortgesetzt werden kann.
Rich-Antworten können sowohl auf dem Bildschirm als auch im Audio- und Bildschirmformat angezeigt werden. Sie können die folgenden Komponenten enthalten:
- Eine oder zwei einfache Antworten (Chat-Bubbles).
- Eine optionale Basiskarte (optional).
- Optionale Vorschlags-Chips.
- Ein optionaler Chip zum Verlinken.
Wie du diese visuellen Elemente in deine Aktion einbinden kannst, erfährst du in unseren Richtlinien für Unterhaltungsdesigns.
Attribute
Für Rich-Antworten gelten die folgenden Anforderungen und optionalen Properties, die Sie konfigurieren können:
- Wird auf Oberflächen mit der Funktion
actions.capability.SCREEN_OUTPUT
unterstützt. - Das erste Element in einer Rich-Antwort muss eine einfache Antwort sein.
- Maximal zwei einfache Antworten.
- Maximal eine Basiskarte oder
StructuredResponse
. - Maximal 8 Vorschlags-Chips.
- Vorschlags-Chips sind in
FinalResponse
nicht zulässig - Derzeit können auf Smart Displays keine Links zum Web verwendet werden.
In den folgenden Abschnitten erfahren Sie, wie Sie verschiedene Arten von Rich-Antworten erstellen.
Basiskarte

Auf einer Basiskarte werden die folgenden Informationen angezeigt:
- Bild
- Titel
- Untertitel
- Text
- Schaltfläche zum Verbinden
- Rahmenlinie
Verwenden Sie einfache Karten hauptsächlich zu Anzeigezwecken. Sie sind so konzipiert, dass sie den Nutzern präzise erklären, wichtige Informationen (oder Zusammenfassungen) präsentieren und Nutzern ermöglichen, bei Bedarf weitere Informationen (über einen Weblink) zu erhalten.
In den meisten Fällen empfiehlt es sich, unter den Karten Chips für Vorschläge einzufügen, mit denen Sie fortfahren oder die Unterhaltung neu ausrichten können.
Wiederholen Sie auf keinen Fall die auf der Karte im Chat-Infofeld angezeigten Informationen.
Attribute
Der grundlegende Kartenantworttyp hat die folgenden Anforderungen und optionalen Attribute, die du konfigurieren kannst:
- Wird auf Oberflächen mit der Funktion
actions.capability.SCREEN_OUTPUT
unterstützt. - Formatierter Text (erforderlich, wenn kein Bild vorhanden ist)
- Standardmäßig reiner Text
- Darf keinen Link enthalten.
- Maximal 10 Zeilen mit einem Bild, 15 Zeilen ohne Bild. Dies entspricht ungefähr 500 (mit Bild) oder 750 (ohne Bild). Auf kleineren Displays werden Texte auch abgeschnitten. Wenn Text zu viele Zeilen enthält, wird er beim letzten Wort abgeschnitten und mit Auslassungspunkten versehen.
- Es wird eine begrenzte Anzahl von Markdowns unterstützt:
- Neue Zeile mit doppeltem Leerzeichen, gefolgt von \n
**bold**
*italics*
- Bild (erforderlich, wenn kein formatierter Text vorhanden ist)
- Alle Bilder mussten eine Höhe von 192 dp erzwingen.
- Wenn sich das Seitenverhältnis des Bildes vom Bildschirm unterscheidet, ist das Bild mit grauen Balken an vertikalen oder horizontalen Rändern zentriert.
- Image-Quelle ist eine URL.
- Bewegungs-GIFs sind zulässig.
Optional
- Titel
- Nur Text
- Feste Schriftart und -größe
- Maximal eine Zeile. Zusätzliche Zeichen werden abgeschnitten.
- Wenn kein Titel angegeben ist, wird die Kartenhöhe minimiert.
- Untertitel
- Nur Text
- Feste Schriftart und Schriftgröße.
- Maximal eine Zeile. Zusätzliche Zeichen werden abgeschnitten.
- Wenn kein Untertitel angegeben ist, wird die Kartenhöhe minimiert.
- Schaltfläche „Verknüpfen“
- Linktitel ist erforderlich
- Maximal ein Link
- Links zu Websites außerhalb der Domain des Entwicklers sind zulässig.
- Der Linktext darf nicht irreführend sein. Dies wird im Freigabeprozess geprüft.
- Eine Basiskarte hat ohne Link keine Interaktionsmöglichkeiten. Durch Tippen auf den Link wird der Nutzer zum Link weitergeleitet. Der Hauptteil der Karte bleibt jedoch inaktiv.
- Rahmenlinie
- Der Rand zwischen der Karte und dem Bildcontainer kann angepasst werden, um die Darstellung der Basiskarte anzupassen.
- Konfiguriert durch Festlegen des JSON-Stringattributs
imageDisplayOptions

Beispielcode
Node.js
app.intent('Basic Card', (conv) => { if (!conv.screen) { conv.ask('Sorry, try this on a screen device or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask(`Here's an example of a basic card.`); conv.ask(new BasicCard({ text: `This is a basic card. Text in a basic card can include "quotes" and most other unicode characters including emojis. Basic cards also support some markdown formatting like *emphasis* or _italics_, **strong** or __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other things like line \nbreaks`, // Note the two spaces before '\n' required for // a line break to be rendered in the card. subtitle: 'This is a subtitle', title: 'Title: this is a title', buttons: new Button({ title: 'This is a button', url: 'https://assistant.google.com/', }), image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Image alternate text', }), display: 'CROPPED', })); conv.ask('Which response would you like to see next?'); });
Java
@ForIntent("Basic Card") public ActionResponse basicCard(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } // Prepare formatted text for card String text = "This is a basic card. Text in a basic card can include \"quotes\" and\n" + " most other unicode characters including emoji \uD83D\uDCF1. Basic cards also support\n" + " some markdown formatting like *emphasis* or _italics_, **strong** or\n" + " __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n" + " things like line \\nbreaks"; // Note the two spaces before '\n' required for // a line break to be rendered in the card. responseBuilder .add("Here's an example of a basic card.") .add( new BasicCard() .setTitle("Title: this is a title") .setSubtitle("This is a subtitle") .setFormattedText(text) .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Image alternate text")) .setImageDisplayOptions("CROPPED") .setButtons( new ArrayList<Button>( Arrays.asList( new Button() .setTitle("This is a Button") .setOpenUrlAction( new OpenUrlAction().setUrl("https://assistant.google.com")))))) .add("Which response would you like to see next?"); return responseBuilder.build(); }
Node.js
if (!conv.screen) { conv.ask('Sorry, try this on a screen device or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask(`Here's an example of a basic card.`); conv.ask(new BasicCard({ text: `This is a basic card. Text in a basic card can include "quotes" and most other unicode characters including emojis. Basic cards also support some markdown formatting like *emphasis* or _italics_, **strong** or __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other things like line \nbreaks`, // Note the two spaces before '\n' required for // a line break to be rendered in the card. subtitle: 'This is a subtitle', title: 'Title: this is a title', buttons: new Button({ title: 'This is a button', url: 'https://assistant.google.com/', }), image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Image alternate text', }), display: 'CROPPED', })); conv.ask('Which response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } // Prepare formatted text for card String text = "This is a basic card. Text in a basic card can include \"quotes\" and\n" + " most other unicode characters including emoji \uD83D\uDCF1. Basic cards also support\n" + " some markdown formatting like *emphasis* or _italics_, **strong** or\n" + " __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n" + " things like line \\nbreaks"; // Note the two spaces before '\n' required for // a line break to be rendered in the card. responseBuilder .add("Here's an example of a basic card.") .add( new BasicCard() .setTitle("Title: this is a title") .setSubtitle("This is a subtitle") .setFormattedText(text) .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Image alternate text")) .setImageDisplayOptions("CROPPED") .setButtons( new ArrayList<Button>( Arrays.asList( new Button() .setTitle("This is a Button") .setOpenUrlAction( new OpenUrlAction().setUrl("https://assistant.google.com")))))) .add("Which response would you like to see next?"); return responseBuilder.build();
JSON
Im JSON-Code unten wird eine Webhook-Antwort beschrieben.
{ "payload": { "google": { "expectUserResponse": true, "richResponse": { "items": [ { "simpleResponse": { "textToSpeech": "Here's an example of a basic card." } }, { "basicCard": { "title": "Title: this is a title", "subtitle": "This is a subtitle", "formattedText": "This is a basic card. Text in a basic card can include \"quotes\" and\n most other unicode characters including emojis. Basic cards also support\n some markdown formatting like *emphasis* or _italics_, **strong** or\n __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n things like line \nbreaks", "image": { "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png", "accessibilityText": "Image alternate text" }, "buttons": [ { "title": "This is a button", "openUrlAction": { "url": "https://assistant.google.com/" } } ], "imageDisplayOptions": "CROPPED" } }, { "simpleResponse": { "textToSpeech": "Which response would you like to see next?" } } ] } } } }
JSON
Im JSON-Code unten wird eine Webhook-Antwort beschrieben.
{ "expectUserResponse": true, "expectedInputs": [ { "possibleIntents": [ { "intent": "actions.intent.TEXT" } ], "inputPrompt": { "richInitialPrompt": { "items": [ { "simpleResponse": { "textToSpeech": "Here's an example of a basic card." } }, { "basicCard": { "title": "Title: this is a title", "subtitle": "This is a subtitle", "formattedText": "This is a basic card. Text in a basic card can include \"quotes\" and\n most other unicode characters including emojis. Basic cards also support\n some markdown formatting like *emphasis* or _italics_, **strong** or\n __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n things like line \nbreaks", "image": { "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png", "accessibilityText": "Image alternate text" }, "buttons": [ { "title": "This is a button", "openUrlAction": { "url": "https://assistant.google.com/" } } ], "imageDisplayOptions": "CROPPED" } }, { "simpleResponse": { "textToSpeech": "Which response would you like to see next?" } } ] } } } ] }
Stöbern in Karussell

Ein Browsing-Karussell ist eine umfangreiche Antwort, mit der Nutzer vertikal scrollen und eine Kachel in einer Sammlung auswählen können. Stöbern Sie in Karussells speziell für Webinhalte, indem Sie die ausgewählte Kachel in einem Webbrowser öffnen – oder in einem AMP-Browser, wenn alle Kacheln für AMP aktiviert sind. Das Browserkarussell wird außerdem auf der Assistant-Oberfläche des Nutzers für ein späteres Surfen angezeigt.
Attribute
Der Antworttyp „Browserkarussell“ hat die folgenden Anforderungen und optionalen Attribute, die Sie konfigurieren können:
- Wird auf Oberflächen mit den Funktionen
actions.capability.SCREEN_OUTPUT
undactions.capability.WEB_BROWSER
unterstützt. Dieser Antworttyp ist derzeit nicht auf Smart Displays verfügbar. - Browsing-Karussell
- Maximal 10 Kacheln.
- Mindestens zwei Kacheln.
- Alle Kacheln im Karussell müssen Links zu Webinhalten enthalten (AMP-Inhalte empfohlen).
- Damit der Nutzer zu einem AMP-Viewer weitergeleitet wird, muss für
urlHintType
der AMP-Content-Kacheln „AMP_CONTENT“ festgelegt werden.
- Damit der Nutzer zu einem AMP-Viewer weitergeleitet wird, muss für
- Karussell-Kacheln durchsuchen
- Kachelkonsistenz (erforderlich):
- Alle Kacheln in einem Browsing-Karussell müssen dieselben Komponenten haben. Wenn eine Kachel beispielsweise ein Bildfeld hat, müssen auch die anderen Kacheln im Karussell Bildfelder haben.
- Wenn alle Kacheln im Browserkarussell mit AMP-fähigen Inhalten verknüpft sind, wird der Nutzer zu einem AMP-Browser mit zusätzlichen Funktionen weitergeleitet. Wenn eine Kachel auf Nicht-AMP-Inhalte verweist, werden Nutzer von allen Kacheln zu einem Webbrowser weitergeleitet.
- Bild (optional)
- Das Bild wird mit einer Höhe von 128 dp x 232 dp erzwungen.
- Wenn das Seitenverhältnis des Bildes nicht mit dem Begrenzungsrahmen des Bilds übereinstimmt, wird das Bild auf beiden Seiten mit Balken zentriert. Auf Smartphones ist das Bild quadratisch und mit abgerundeten Ecken zentriert.
- Wenn ein Bildlink fehlerhaft ist, wird stattdessen ein Platzhalterbild verwendet.
- Alt-Text ist für ein Bild erforderlich.
- Titel (erforderlich)
- Dieselben Formatierungsoptionen wie für die Basistextkarte.
- Titel müssen eindeutig sein, damit die Sprachauswahl unterstützt werden kann.
- Maximal zwei Textzeilen.
- Schriftgröße: 16 sp.
- Beschreibung (optional)
- Dieselben Formatierungsoptionen wie für die Basistextkarte.
- Maximal vier Textzeilen.
- Gekürzt mit Auslassungszeichen (...)
- Schriftgröße: 14 sp, grau.
- Fußzeile (optional)
- Feste Schriftart und Schriftgröße.
- Maximal eine Textzeile.
- Gekürzt mit Auslassungszeichen (...)
- Sie sind unten verankert, sodass Kacheln mit weniger Zeilen im Text Leerraum über dem Untertext haben können.
- Schriftgröße: 14 sp, grau.
- Kachelkonsistenz (erforderlich):
- Interaktion
- Der Nutzer kann vertikal scrollen, um sich Elemente anzusehen.
- Tap Card: Durch Tippen auf ein Element wird der Nutzer zu einem Browser mit der verlinkten Seite weitergeleitet.
- Spracheingabe
- Mikrofonverhalten
- Das Mikrofon wird nicht wieder geöffnet, wenn ein Browserkarussell an den Nutzer gesendet wird.
- Der Nutzer kann weiterhin auf das Mikrofon tippen oder Assistant aufrufen („Ok Google“), um das Mikrofon wieder zu öffnen.
- Mikrofonverhalten
Anleitung
Das Mikrofon bleibt standardmäßig eingeschaltet, nachdem ein Suchkarussell gesendet wurde. Wenn Sie die Unterhaltung danach fortsetzen möchten, empfehlen wir dringend, unter dem Karussell Vorschlags-Chips einzufügen.
Wiederholen Sie die in der Liste angezeigten Optionen nie als Vorschlags-Chips. In diesem Kontext werden Chips verwendet, um die Unterhaltung zu drehen (nicht zur Auswahl).
Wie bei Listen ist die Chat-Bubble, die die Karussellkarte begleitet, eine Teilmenge der Audiodatei (TTS/SSML). Der Ton (TTS/SSML) integriert hier die erste Kachel im Karussell. Darüber hinaus empfehlen wir dringend, alle Elemente aus dem Karussell zu lesen. Am besten erwähnen Sie den ersten Artikel und den Grund dafür (z. B. am beliebtesten, am häufigsten gekauft, am häufigsten gesprochen).
Beispielcode
Node.js
app.intent('Browsing Carousel', (conv) => { if (!conv.screen || !conv.surface.capabilities.has('actions.capability.WEB_BROWSER')) { conv.ask('Sorry, try this on a phone or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask(`Here's an example of a browsing carousel.`); conv.ask(new BrowseCarousel({ items: [ new BrowseCarouselItem({ title: 'Title of item 1', url: 'https://example.com', description: 'Description of item 1', image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Image alternate text', }), footer: 'Item 1 footer', }), new BrowseCarouselItem({ title: 'Title of item 2', url: 'https://example.com', description: 'Description of item 2', image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Image alternate text', }), footer: 'Item 2 footer', }), ], })); });
Java
@ForIntent("Browsing Carousel") public ActionResponse browseCarousel(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue()) || !request.hasCapability(Capability.WEB_BROWSER.getValue())) { return responseBuilder .add("Sorry, try this on a phone or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("Here's an example of a browsing carousel.") .add( new CarouselBrowse() .setItems( new ArrayList<CarouselBrowseItem>( Arrays.asList( new CarouselBrowseItem() .setTitle("Title of item 1") .setDescription("Description of item 1") .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com")) .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Image alternate text")) .setFooter("Item 1 footer"), new CarouselBrowseItem() .setTitle("Title of item 2") .setDescription("Description of item 2") .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com")) .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Image alternate text")) .setFooter("Item 2 footer"))))); return responseBuilder.build(); }
Node.js
if (!conv.screen || !conv.surface.capabilities.has('actions.capability.WEB_BROWSER')) { conv.ask('Sorry, try this on a phone or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask(`Here's an example of a browsing carousel.`); conv.ask(new BrowseCarousel({ items: [ new BrowseCarouselItem({ title: 'Title of item 1', url: 'https://example.com', description: 'Description of item 1', image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Image alternate text', }), footer: 'Item 1 footer', }), new BrowseCarouselItem({ title: 'Title of item 2', url: 'https://example.com', description: 'Description of item 2', image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Image alternate text', }), footer: 'Item 2 footer', }), ], }));
Java
ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue()) || !request.hasCapability(Capability.WEB_BROWSER.getValue())) { return responseBuilder .add("Sorry, try this on a phone or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("Here's an example of a browsing carousel.") .add( new CarouselBrowse() .setItems( new ArrayList<CarouselBrowseItem>( Arrays.asList( new CarouselBrowseItem() .setTitle("Title of item 1") .setDescription("Description of item 1") .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com")) .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Image alternate text")) .setFooter("Item 1 footer"), new CarouselBrowseItem() .setTitle("Title of item 2") .setDescription("Description of item 2") .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com")) .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Image alternate text")) .setFooter("Item 2 footer"))))); return responseBuilder.build();
JSON
Im JSON-Code unten wird eine Webhook-Antwort beschrieben.
{ "payload": { "google": { "expectUserResponse": true, "richResponse": { "items": [ { "simpleResponse": { "textToSpeech": "Here's an example of a browsing carousel." } }, { "carouselBrowse": { "items": [ { "title": "Title of item 1", "openUrlAction": { "url": "https://example.com" }, "description": "Description of item 1", "footer": "Item 1 footer", "image": { "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png", "accessibilityText": "Image alternate text" } }, { "title": "Title of item 2", "openUrlAction": { "url": "https://example.com" }, "description": "Description of item 2", "footer": "Item 2 footer", "image": { "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png", "accessibilityText": "Image alternate text" } } ] } } ] } } } }
JSON
Im JSON-Code unten wird eine Webhook-Antwort beschrieben.
{ "expectUserResponse": true, "expectedInputs": [ { "inputPrompt": { "richInitialPrompt": { "items": [ { "simpleResponse": { "textToSpeech": "Here's an example of a browsing carousel." } }, { "carouselBrowse": { "items": [ { "description": "Description of item 1", "footer": "Item 1 footer", "image": { "accessibilityText": "Image alternate text", "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png" }, "openUrlAction": { "url": "https://example.com" }, "title": "Title of item 1" }, { "description": "Description of item 2", "footer": "Item 2 footer", "image": { "accessibilityText": "Image alternate text", "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png" }, "openUrlAction": { "url": "https://example.com" }, "title": "Title of item 2" } ] } } ] } }, "possibleIntents": [ { "intent": "actions.intent.TEXT" } ] } ] }
Ausgewähltes Element wird verarbeitet
Für Nutzerinteraktionen mit Karussellelementen nach dem Stöbern ist keine Auftragsausführung erforderlich, da das Karussell die Browserübergabe übernimmt. Beachten Sie, dass sich das Mikrofon nicht wieder öffnet, nachdem der Nutzer mit einem Karussellelement interagiert hat. Sie sollten daher entweder die Unterhaltung beenden oder Vorschlags-Chips in die Antwort wie oben beschrieben einfügen.
Vorschlags-Chips

Mithilfe von Chips für Vorschläge können Sie auf Antworten hinweisen, um fortzufahren oder eine Unterhaltung neu zu gestalten. Wenn es während der Unterhaltung einen primären Call-to-Action gibt, sollten Sie diesen als ersten Vorschlags-Chip auflisten.
Nach Möglichkeit solltest du einen zentralen Vorschlag als Teil der Chat-Bubble verwenden, aber nur, wenn sich die Antwort oder die Chatunterhaltung natürlich anfühlt.
Attribute
Vorschlags-Chips haben die folgenden Anforderungen und optionalen Attribute, die Sie konfigurieren können:
- Wird auf Oberflächen mit der Funktion
actions.capability.SCREEN_OUTPUT
unterstützt. - Wenn Sie Chips für Vorschläge mit dem Web verknüpfen möchten, müssen sie auch die Funktion
actions.capability.WEB_BROWSER
haben. Diese Funktion ist derzeit nicht auf Smart Displays verfügbar. - Maximal acht Chips
- Maximale Textlänge von 25 Zeichen
Unterstützt nur Nur-Text.

Beispielcode
Node.js
app.intent('Suggestion Chips', (conv) => { if (!conv.screen) { conv.ask('Chips can be demonstrated on screen devices.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('These are suggestion chips.'); conv.ask(new Suggestions('Suggestion 1')); conv.ask(new Suggestions(['Suggestion 2', 'Suggestion 3'])); conv.ask(new LinkOutSuggestion({ name: 'Suggestion Link', url: 'https://assistant.google.com/', })); conv.ask('Which type of response would you like to see next?'); ; });
Java
@ForIntent("Suggestion Chips") public ActionResponse suggestionChips(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("These are suggestion chips.") .addSuggestions(new String[] {"Suggestion 1", "Suggestion 2", "Suggestion 3"}) .add( new LinkOutSuggestion() .setDestinationName("Suggestion Link") .setUrl("https://assistant.google.com/")) .add("Which type of response would you like to see next?"); return responseBuilder.build(); }
Node.js
if (!conv.screen) { conv.ask('Chips can be demonstrated on screen devices.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('These are suggestion chips.'); conv.ask(new Suggestions('Suggestion 1')); conv.ask(new Suggestions(['Suggestion 2', 'Suggestion 3'])); conv.ask(new LinkOutSuggestion({ name: 'Suggestion Link', url: 'https://assistant.google.com/', })); conv.ask('Which type of response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("These are suggestion chips.") .addSuggestions(new String[] {"Suggestion 1", "Suggestion 2", "Suggestion 3"}) .add( new LinkOutSuggestion() .setDestinationName("Suggestion Link") .setUrl("https://assistant.google.com/")) .add("Which type of response would you like to see next?"); return responseBuilder.build();
JSON
Im JSON-Code unten wird eine Webhook-Antwort beschrieben.
{ "payload": { "google": { "expectUserResponse": true, "richResponse": { "items": [ { "simpleResponse": { "textToSpeech": "These are suggestion chips." } }, { "simpleResponse": { "textToSpeech": "Which type of response would you like to see next?" } } ], "suggestions": [ { "title": "Suggestion 1" }, { "title": "Suggestion 2" }, { "title": "Suggestion 3" } ], "linkOutSuggestion": { "destinationName": "Suggestion Link", "url": "https://assistant.google.com/" } } } } }
JSON
Im JSON-Code unten wird eine Webhook-Antwort beschrieben.
{ "expectUserResponse": true, "expectedInputs": [ { "possibleIntents": [ { "intent": "actions.intent.TEXT" } ], "inputPrompt": { "richInitialPrompt": { "items": [ { "simpleResponse": { "textToSpeech": "These are suggestion chips." } }, { "simpleResponse": { "textToSpeech": "Which type of response would you like to see next?" } } ], "suggestions": [ { "title": "Suggestion 1" }, { "title": "Suggestion 2" }, { "title": "Suggestion 3" } ], "linkOutSuggestion": { "destinationName": "Suggestion Link", "url": "https://assistant.google.com/" } } } } ] }
Medienantworten

Mit Medienantworten kannst du mit deinen Aktionen Audioinhalte mit einer Wiedergabedauer von mehr als 240 Sekunden von SSML wiedergeben. Die primäre Komponente einer Medienantwort ist die Karte mit einem Track. Auf der Karte kann der Nutzer diese Vorgänge ausführen:
- Spiel die letzten 10 Sekunden noch einmal ab.
- 30 Sekunden vorspulen
- Sehen Sie sich die Gesamtlänge des Medieninhalts an.
- Fortschrittsanzeige für die Audiowiedergabe aufrufen
- Sehen Sie sich die verstrichene Wiedergabezeit an.
Medienantworten unterstützen die folgenden Audiosteuerungen für Sprachinteraktionen:
- „Hey Google, spiel.“
- „Hey Google, Pause“
- „Hey Google, stopp“
- „Hey Google, neu beginnen“
Nutzer können die Lautstärke auch steuern, wenn sie etwa sagen: „Hey Google, mach lauter“ oder „Hey Google, stell die Lautstärke auf 50 %“. Intents in Ihrer Aktion haben Vorrang, wenn sie ähnliche Trainingswortgruppen verarbeiten. Erlaube, dass Assistant diese Nutzeranfragen verarbeitet, es sei denn, deine Aktion hat einen bestimmten Grund.
Attribute
Medienantworten haben die folgenden Anforderungen und optionalen Attribute, die Sie konfigurieren können:
- Wird auf Oberflächen mit der Funktion
actions.capability.MEDIA_RESPONSE_AUDIO
unterstützt. - Audio für die Wiedergabe muss in einer korrekt formatierten
.mp3
-Datei vorliegen. Livestreaming wird nicht unterstützt. - Die Mediendatei für die Wiedergabe muss als HTTPS-URL angegeben werden.
- Bild (optional)
- Sie können auch ein Symbol oder ein Bild hinzufügen.
- Symbol
- Ihr Symbol wird rechts neben der Mediaplayerkarte als randloses Thumbnail angezeigt.
- Die Größe muss 36 x 36 dp betragen. Größere Bilder werden entsprechend angepasst.
- Bild
- Der Image-Container wird 192 dp hoch sein.
- Das Bild wird oben auf der Mediaplayerkarte angezeigt und erstreckt sich über die gesamte Breite der Karte. Die meisten Bilder werden mit Balken am oberen oder seitlichen Rand angezeigt.
- Bewegungs-GIFs sind zulässig.
- Die Bildquelle muss als URL angegeben werden.
- Alt-Text ist für alle Bilder erforderlich.
Verhalten auf Oberflächen
Medienantworten werden auf Android-Smartphones und bei Google Home unterstützt. Das Verhalten von Medienantworten hängt von der Oberfläche ab, auf der Nutzer mit Ihren Aktionen interagieren.
Auf Android-Smartphones können Nutzer Medienantworten sehen, wenn eine der folgenden Bedingungen erfüllt ist:
- Google Assistant ist im Vordergrund und das Smartphone-Display ist eingeschaltet.
- Der Nutzer verlässt Google Assistant, während das Audio abgespielt wird, und kehrt innerhalb von 10 Minuten nach der Wiedergabe zu Google Assistant zurück. Wenn der Nutzer zu Google Assistant zurückkehrt, sieht er die Medienkarte und die Vorschlags-Chips.
- Mit Google Assistant können Nutzer die Lautstärke des Geräts im Rahmen der Konversationsaktion steuern. Sagen Sie beispielsweise "Erhöhe die Lautstärke" oder Stelle die Lautstärke auf 50 %. Wenn Sie Intents haben, die ähnliche Trainingswortgruppen verarbeiten, haben Ihre Intents Vorrang. Wir empfehlen, diese Anfragen von Assistant verarbeiten zu lassen, es sei denn, deine Aktion hat einen bestimmten Grund.
Die Mediensteuerung ist verfügbar, wenn das Smartphone gesperrt ist. Auf Android-Geräten werden die Steuerelemente auch im Benachrichtigungsbereich angezeigt.

Beispielcode
Das folgende Codebeispiel zeigt, wie Sie Ihre Rich-Antworten aktualisieren können, um Medien einzubeziehen.
Node.js
app.intent('Media Response', (conv) => { if (!conv.surface.capabilities .has('actions.capability.MEDIA_RESPONSE_AUDIO')) { conv.ask('Sorry, this device does not support audio playback.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('This is a media response example.'); conv.ask(new MediaObject({ name: 'Jazz in Paris', url: 'https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3', description: 'A funky Jazz tune', icon: new Image({ url: 'https://storage.googleapis.com/automotive-media/album_art.jpg', alt: 'Album cover of an ocean view', }), })); conv.ask(new Suggestions(['Basic Card', 'List', 'Carousel', 'Browsing Carousel'])); });
Java
@ForIntent("Media Response") public ActionResponse mediaResponse(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.MEDIA_RESPONSE_AUDIO.getValue())) { return responseBuilder .add("Sorry, this device does not support audio playback.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("This is a media response example.") .add( new MediaResponse() .setMediaObjects( new ArrayList<MediaObject>( Arrays.asList( new MediaObject() .setName("Jazz in Paris") .setDescription("A funky Jazz tune") .setContentUrl( "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3") .setIcon( new Image() .setUrl( "https://storage.googleapis.com/automotive-media/album_art.jpg") .setAccessibilityText("Album cover of an ocean view"))))) .setMediaType("AUDIO")) .addSuggestions(new String[] {"Basic Card", "List", "Carousel", "Browsing Carousel"}); return responseBuilder.build(); }
Node.js
if (!conv.surface.capabilities .has('actions.capability.MEDIA_RESPONSE_AUDIO')) { conv.ask('Sorry, this device does not support audio playback.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('This is a media response example.'); conv.ask(new MediaObject({ name: 'Jazz in Paris', url: 'https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3', description: 'A funky Jazz tune', icon: new Image({ url: 'https://storage.googleapis.com/automotive-media/album_art.jpg', alt: 'Album cover of an ocean view', }), })); conv.ask(new Suggestions(['Basic Card', 'List', 'Carousel', 'Browsing Carousel']));
Java
ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.MEDIA_RESPONSE_AUDIO.getValue())) { return responseBuilder .add("Sorry, this device does not support audio playback.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("This is a media response example.") .add( new MediaResponse() .setMediaObjects( new ArrayList<MediaObject>( Arrays.asList( new MediaObject() .setName("Jazz in Paris") .setDescription("A funky Jazz tune") .setContentUrl( "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3") .setIcon( new Image() .setUrl( "https://storage.googleapis.com/automotive-media/album_art.jpg") .setAccessibilityText("Album cover of an ocean view"))))) .setMediaType("AUDIO")) .addSuggestions(new String[] {"Basic Card", "List", "Carousel", "Browsing Carousel"}); return responseBuilder.build();
JSON
Im JSON-Code unten wird eine Webhook-Antwort beschrieben.
{ "payload": { "google": { "expectUserResponse": true, "richResponse": { "items": [ { "simpleResponse": { "textToSpeech": "This is a media response example." } }, { "mediaResponse": { "mediaType": "AUDIO", "mediaObjects": [ { "contentUrl": "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3", "description": "A funky Jazz tune", "icon": { "url": "https://storage.googleapis.com/automotive-media/album_art.jpg", "accessibilityText": "Album cover of an ocean view" }, "name": "Jazz in Paris" } ] } } ], "suggestions": [ { "title": "Basic Card" }, { "title": "List" }, { "title": "Carousel" }, { "title": "Browsing Carousel" } ] } } } }
JSON
Im JSON-Code unten wird eine Webhook-Antwort beschrieben.
{ "expectUserResponse": true, "expectedInputs": [ { "possibleIntents": [ { "intent": "actions.intent.TEXT" } ], "inputPrompt": { "richInitialPrompt": { "items": [ { "simpleResponse": { "textToSpeech": "This is a media response example." } }, { "mediaResponse": { "mediaType": "AUDIO", "mediaObjects": [ { "contentUrl": "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3", "description": "A funky Jazz tune", "icon": { "url": "https://storage.googleapis.com/automotive-media/album_art.jpg", "accessibilityText": "Album cover of an ocean view" }, "name": "Jazz in Paris" } ] } } ], "suggestions": [ { "title": "Basic Card" }, { "title": "List" }, { "title": "Carousel" }, { "title": "Browsing Carousel" } ] } } } ] }
Anleitung
Ihre Antwort muss ein mediaResponse
mit einer mediaType
von AUDIO
und ein mediaObject
innerhalb des Arrays der Rich-Antwort enthalten. Eine Medienantwort unterstützt ein einzelnes Medienobjekt. Ein Medienobjekt muss die Content-URL der Audiodatei enthalten. Ein Medienobjekt kann optional einen Namen, Untertext (Beschreibung) und ein Symbol oder eine Bild-URL enthalten.
Auf Smartphones und in Google Home prüft Google Assistant nach der Audiowiedergabe, ob die Medienantwort ein FinalResponse
ist.
Wenn nicht, wird ein Callback an die Auftragsausführung gesendet, sodass Sie dem Nutzer antworten können.
Deine Aktion muss Vorschlags-Chips enthalten, wenn die Antwort kein FinalResponse
ist.
Callback nach Abschluss der Wiedergabe verarbeiten
Die Aktion sollte den actions.intent.MEDIA_STATUS
Intent verarbeiten, um den Nutzer zur Nachverfolgung aufzufordern (z. B. um einen anderen Song abzuspielen). Deine Aktion empfängt diesen Callback, sobald die Medienwiedergabe abgeschlossen ist. Im Callback enthält das Argument MEDIA_STATUS
Statusinformationen zum aktuellen Medium. Der Statuswert ist entweder FINISHED
oder STATUS_UNSPECIFIED
.
Dialogflow verwenden
Wenn Sie eine dialogorientierte Verzweigung in Dialogflow ausführen möchten, müssen Sie einen Eingabekontext von actions_capability_media_response_audio
für den Intent einrichten, damit er nur auf Oberflächen ausgelöst wird, die eine Medienantwort unterstützen.
Auftragsausführung erstellen
Das folgende Code-Snippet zeigt, wie Sie den Auftragsausführungscode für eine Aktion schreiben können: Wenn Sie Dialogflow verwenden, ersetzen Sie actions.intent.MEDIA_STATUS
durch den Aktionsnamen, der im Intent angegeben ist, der das actions_intent_MEDIA_STATUS
-Ereignis empfängt (z. B. "media.status.update").
Node.js
app.intent('Media Status', (conv) => { const mediaStatus = conv.arguments.get('MEDIA_STATUS'); let response = 'Unknown media status received.'; if (mediaStatus && mediaStatus.status === 'FINISHED') { response = 'Hope you enjoyed the tune!'; } conv.ask(response); conv.ask('Which response would you like to see next?'); });
Java
@ForIntent("Media Status") public ActionResponse mediaStatus(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); String mediaStatus = request.getMediaStatus(); String response = "Unknown media status received."; if (mediaStatus != null && mediaStatus.equals("FINISHED")) { response = "Hope you enjoyed the tune!"; } responseBuilder.add(response); responseBuilder.add("Which response would you like to see next?"); return responseBuilder.build(); }
Node.js
app.intent('actions.intent.MEDIA_STATUS', (conv) => { const mediaStatus = conv.arguments.get('MEDIA_STATUS'); let response = 'Unknown media status received.'; if (mediaStatus && mediaStatus.status === 'FINISHED') { response = 'Hope you enjoyed the tune!'; } conv.ask(response); conv.ask('Which response would you like to see next?'); });
Java
@ForIntent("actions.intent.MEDIA_STATUS") public ActionResponse mediaStatus(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); String mediaStatus = request.getMediaStatus(); String response = "Unknown media status received."; if (mediaStatus != null && mediaStatus.equals("FINISHED")) { response = "Hope you enjoyed the tune!"; } responseBuilder.add(response); responseBuilder.add("Which response would you like to see next?"); return responseBuilder.build(); }
JSON
Im JSON-Code unten wird eine Webhook-Anfrage beschrieben.
{ "responseId": "151b68df-98de-41fb-94b5-caeace90a7e9-21947381", "queryResult": { "queryText": "actions_intent_MEDIA_STATUS", "parameters": {}, "allRequiredParamsPresent": true, "fulfillmentText": "Webhook failed for intent: Media Status", "fulfillmentMessages": [ { "text": { "text": [ "Webhook failed for intent: Media Status" ] } } ], "outputContexts": [ { "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_media_response_audio" }, { "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_account_linking" }, { "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_web_browser" }, { "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_screen_output" }, { "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_audio_output" }, { "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/google_assistant_input_type_voice" }, { "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_intent_media_status", "parameters": { "MEDIA_STATUS": { "@type": "type.googleapis.com/google.actions.v2.MediaStatus", "status": "FINISHED" } } } ], "intent": { "name": "projects/df-responses-kohler/agent/intents/068b27d3-c148-4044-bfab-dfa37eebd90d", "displayName": "Media Status" }, "intentDetectionConfidence": 1, "languageCode": "en" }, "originalDetectIntentRequest": { "source": "google", "version": "2", "payload": { "user": { "locale": "en-US", "lastSeen": "2019-08-04T23:57:15Z", "userVerificationStatus": "VERIFIED" }, "conversation": { "conversationId": "ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA", "type": "ACTIVE", "conversationToken": "[]" }, "inputs": [ { "intent": "actions.intent.MEDIA_STATUS", "rawInputs": [ { "inputType": "VOICE" } ], "arguments": [ { "name": "MEDIA_STATUS", "extension": { "@type": "type.googleapis.com/google.actions.v2.MediaStatus", "status": "FINISHED" } } ] } ], "surface": { "capabilities": [ { "name": "actions.capability.MEDIA_RESPONSE_AUDIO" }, { "name": "actions.capability.ACCOUNT_LINKING" }, { "name": "actions.capability.WEB_BROWSER" }, { "name": "actions.capability.SCREEN_OUTPUT" }, { "name": "actions.capability.AUDIO_OUTPUT" } ] }, "isInSandbox": true, "availableSurfaces": [ { "capabilities": [ { "name": "actions.capability.WEB_BROWSER" }, { "name": "actions.capability.AUDIO_OUTPUT" }, { "name": "actions.capability.SCREEN_OUTPUT" } ] } ], "requestType": "SIMULATOR" } }, "session": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA" }
JSON
Im JSON-Code unten wird eine Webhook-Anfrage beschrieben.
{ "user": { "locale": "en-US", "lastSeen": "2019-08-06T07:38:40Z", "userVerificationStatus": "VERIFIED" }, "conversation": { "conversationId": "ABwppHGcqunXh1M6IE0lu2sVqXdpJfdpC5FWMkMSXQskK1nzb4IkSUSRqQzoEr0Ly0z_G3mwyZlk5rFtd1w", "type": "NEW" }, "inputs": [ { "intent": "actions.intent.MEDIA_STATUS", "rawInputs": [ { "inputType": "VOICE" } ], "arguments": [ { "name": "MEDIA_STATUS", "extension": { "@type": "type.googleapis.com/google.actions.v2.MediaStatus", "status": "FINISHED" } } ] } ], "surface": { "capabilities": [ { "name": "actions.capability.SCREEN_OUTPUT" }, { "name": "actions.capability.WEB_BROWSER" }, { "name": "actions.capability.AUDIO_OUTPUT" }, { "name": "actions.capability.MEDIA_RESPONSE_AUDIO" }, { "name": "actions.capability.ACCOUNT_LINKING" } ] }, "isInSandbox": true, "availableSurfaces": [ { "capabilities": [ { "name": "actions.capability.WEB_BROWSER" }, { "name": "actions.capability.AUDIO_OUTPUT" }, { "name": "actions.capability.SCREEN_OUTPUT" } ] } ], "requestType": "SIMULATOR" }
Tabellenkarten
Mit Tabellenkarten können Sie tabellarische Daten in Ihrer Antwort anzeigen, z. B. Sportstände, Wahlergebnisse und Flüge. Sie können bis zu 3 Spalten und Zeilen definieren, die Assistant für die Anzeige auf der Tabellenkarte benötigt. Sie können auch zusätzliche Spalten und Zeilen mit ihrer Priorisierung definieren.
Tabellen unterscheiden sich von vertikalen Listen, da Tabellen statische Daten enthalten und nicht interagieren können, z. B. Listenelemente.

Attribute
Für Tabellenkarten gelten die folgenden Anforderungen und optionalen Attribute, die Sie konfigurieren können:
- Wird auf Oberflächen mit der Funktion
actions.capability.SCREEN_OUTPUT
unterstützt.
Im folgenden Abschnitt wird zusammengefasst, wie Sie die Elemente einer Tabellenkarte anpassen können.
Name | Ist optional | Kann angepasst werden | Hinweise zur Personalisierung |
---|---|---|---|
title |
Ja | Ja | Gesamttitel der Tabelle. Muss festgelegt werden, wenn Untertitel festgelegt sind. Sie können die Schriftfamilie und -farbe anpassen. |
subtitle |
Ja | Nein | Untertitel für die Tabelle. |
image |
Ja | Ja | Mit der Tabelle verknüpftes Bild. |
Row |
Nein | Ja |
Zeilendaten der Tabelle Besteht aus einem Array von Es wird garantiert, dass die ersten drei Zeilen angezeigt werden, auf anderen Oberflächen sind sie aber eventuell nicht zu sehen. Testen Sie mit dem Simulator, welche Zeilen für eine bestimmte Oberfläche angezeigt werden. Auf Oberflächen, die die Funktion |
ColumnProperties |
Ja | Ja | Überschrift und Ausrichtung für eine Spalte. Besteht aus einer header -Property (für den Kopfzeilentext einer Spalte) und einer horizontal_alignment -Property (vom Typ HorizontalAlignment ). |
Cell |
Nein | Ja | Beschreibt eine Zelle in einer Zeile. Jede Zelle enthält einen String, der einen Textwert darstellt. Sie können den Text in der Zelle anpassen. |
Button |
Ja | Ja | Ein Schaltflächenobjekt, das normalerweise unten auf einer Karte angezeigt wird Eine Tabellenkarte kann nur eine Schaltfläche haben. Die Farbe der Schaltfläche lässt sich anpassen. |
HorizontalAlignment |
Ja | Ja | Horizontale Ausrichtung des Inhalts in der Zelle. Mögliche Werte sind LEADING , CENTER und TRAILING . Wenn nichts angegeben ist, wird der Inhalt an der Vorderkante der Zelle ausgerichtet. |
Beispielcode
Die folgenden Snippets zeigen, wie eine einfache Tabellenkarte implementiert wird:
Node.js
app.intent('Simple Table Card', (conv) => { if (!conv.screen) { conv.ask('Sorry, try this on a screen device or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('This is a simple table example.'); conv.ask(new Table({ dividers: true, columns: ['header 1', 'header 2', 'header 3'], rows: [ ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'], ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'], ], })); conv.ask('Which response would you like to see next?'); });
Java
@ForIntent("Simple Table Card") public ActionResponse simpleTable(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("This is a simple table example.") .add( new TableCard() .setColumnProperties( Arrays.asList( new TableCardColumnProperties().setHeader("header 1"), new TableCardColumnProperties().setHeader("header 2"), new TableCardColumnProperties().setHeader("header 3"))) .setRows( Arrays.asList( new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 1 item 1"), new TableCardCell().setText("row 1 item 2"), new TableCardCell().setText("row 1 item 3"))), new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 2 item 1"), new TableCardCell().setText("row 2 item 2"), new TableCardCell().setText("row 2 item 3")))))); return responseBuilder.build(); }
Node.js
if (!conv.screen) { conv.ask('Sorry, try this on a screen device or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('This is a simple table example.'); conv.ask(new Table({ dividers: true, columns: ['header 1', 'header 2', 'header 3'], rows: [ ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'], ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'], ], })); conv.ask('Which response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("This is a simple table example.") .add( new TableCard() .setColumnProperties( Arrays.asList( new TableCardColumnProperties().setHeader("header 1"), new TableCardColumnProperties().setHeader("header 2"), new TableCardColumnProperties().setHeader("header 3"))) .setRows( Arrays.asList( new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 1 item 1"), new TableCardCell().setText("row 1 item 2"), new TableCardCell().setText("row 1 item 3"))), new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 2 item 1"), new TableCardCell().setText("row 2 item 2"), new TableCardCell().setText("row 2 item 3")))))); return responseBuilder.build();
JSON
Im JSON-Code unten wird eine Webhook-Antwort beschrieben.
{ "payload": { "google": { "expectUserResponse": true, "richResponse": { "items": [ { "simpleResponse": { "textToSpeech": "This is a simple table example." } }, { "tableCard": { "rows": [ { "cells": [ { "text": "row 1 item 1" }, { "text": "row 1 item 2" }, { "text": "row 1 item 3" } ], "dividerAfter": true }, { "cells": [ { "text": "row 2 item 1" }, { "text": "row 2 item 2" }, { "text": "row 2 item 3" } ], "dividerAfter": true } ], "columnProperties": [ { "header": "header 1" }, { "header": "header 2" }, { "header": "header 3" } ] } }, { "simpleResponse": { "textToSpeech": "Which response would you like to see next?" } } ] } } } }
JSON
Im JSON-Code unten wird eine Webhook-Antwort beschrieben.
{ "expectUserResponse": true, "expectedInputs": [ { "inputPrompt": { "richInitialPrompt": { "items": [ { "simpleResponse": { "textToSpeech": "This is a simple table example." } }, { "tableCard": { "columnProperties": [ { "header": "header 1" }, { "header": "header 2" }, { "header": "header 3" } ], "rows": [ { "cells": [ { "text": "row 1 item 1" }, { "text": "row 1 item 2" }, { "text": "row 1 item 3" } ], "dividerAfter": true }, { "cells": [ { "text": "row 2 item 1" }, { "text": "row 2 item 2" }, { "text": "row 2 item 3" } ], "dividerAfter": true } ] } }, { "simpleResponse": { "textToSpeech": "Which response would you like to see next?" } } ] } }, "possibleIntents": [ { "intent": "actions.intent.TEXT" } ] } ] }
Die folgenden Snippets zeigen, wie eine komplexe Tabellenkarte implementiert wird:
Node.js
app.intent('Advanced Table Card', (conv) => { if (!conv.screen) { conv.ask('Sorry, try this on a screen device or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('This is a table with all the possible fields.'); conv.ask(new Table({ title: 'Table Title', subtitle: 'Table Subtitle', image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Alt Text', }), columns: [ { header: 'header 1', align: 'CENTER', }, { header: 'header 2', align: 'LEADING', }, { header: 'header 3', align: 'TRAILING', }, ], rows: [ { cells: ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'], dividerAfter: false, }, { cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'], dividerAfter: true, }, { cells: ['row 3 item 1', 'row 3 item 2', 'row 3 item 3'], }, ], buttons: new Button({ title: 'Button Text', url: 'https://assistant.google.com', }), })); conv.ask('Which response would you like to see next?'); });
Java
@ForIntent("Advanced Table Card") public ActionResponse advancedTable(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("This is a table with all the possible fields.") .add( new TableCard() .setTitle("Table Title") .setSubtitle("Table Subtitle") .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Alt text")) .setButtons( Arrays.asList( new Button() .setTitle("Button Text") .setOpenUrlAction( new OpenUrlAction().setUrl("https://assistant.google.com")))) .setColumnProperties( Arrays.asList( new TableCardColumnProperties() .setHeader("header 1") .setHorizontalAlignment("CENTER"), new TableCardColumnProperties() .setHeader("header 2") .setHorizontalAlignment("LEADING"), new TableCardColumnProperties() .setHeader("header 3") .setHorizontalAlignment("TRAILING"))) .setRows( Arrays.asList( new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 1 item 1"), new TableCardCell().setText("row 1 item 2"), new TableCardCell().setText("row 1 item 3"))) .setDividerAfter(false), new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 2 item 1"), new TableCardCell().setText("row 2 item 2"), new TableCardCell().setText("row 2 item 3"))) .setDividerAfter(true), new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 2 item 1"), new TableCardCell().setText("row 2 item 2"), new TableCardCell().setText("row 2 item 3")))))); return responseBuilder.build(); }
Node.js
if (!conv.screen) { conv.ask('Sorry, try this on a screen device or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('This is a table with all the possible fields.'); conv.ask(new Table({ title: 'Table Title', subtitle: 'Table Subtitle', image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Alt Text', }), columns: [ { header: 'header 1', align: 'CENTER', }, { header: 'header 2', align: 'LEADING', }, { header: 'header 3', align: 'TRAILING', }, ], rows: [ { cells: ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'], dividerAfter: false, }, { cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'], dividerAfter: true, }, { cells: ['row 3 item 1', 'row 3 item 2', 'row 3 item 3'], }, ], buttons: new Button({ title: 'Button Text', url: 'https://assistant.google.com', }), })); conv.ask('Which response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("This is a table with all the possible fields.") .add( new TableCard() .setTitle("Table Title") .setSubtitle("Table Subtitle") .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Alt text")) .setButtons( Arrays.asList( new Button() .setTitle("Button Text") .setOpenUrlAction( new OpenUrlAction().setUrl("https://assistant.google.com")))) .setColumnProperties( Arrays.asList( new TableCardColumnProperties() .setHeader("header 1") .setHorizontalAlignment("CENTER"), new TableCardColumnProperties() .setHeader("header 2") .setHorizontalAlignment("LEADING"), new TableCardColumnProperties() .setHeader("header 3") .setHorizontalAlignment("TRAILING"))) .setRows( Arrays.asList( new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 1 item 1"), new TableCardCell().setText("row 1 item 2"), new TableCardCell().setText("row 1 item 3"))) .setDividerAfter(false), new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 2 item 1"), new TableCardCell().setText("row 2 item 2"), new TableCardCell().setText("row 2 item 3"))) .setDividerAfter(true), new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 2 item 1"), new TableCardCell().setText("row 2 item 2"), new TableCardCell().setText("row 2 item 3")))))); return responseBuilder.build();
JSON
Im JSON-Code unten wird eine Webhook-Antwort beschrieben.
{ "payload": { "google": { "expectUserResponse": true, "richResponse": { "items": [ { "simpleResponse": { "textToSpeech": "This is a table with all the possible fields." } }, { "tableCard": { "title": "Table Title", "subtitle": "Table Subtitle", "image": { "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png", "accessibilityText": "Alt Text" }, "rows": [ { "cells": [ { "text": "row 1 item 1" }, { "text": "row 1 item 2" }, { "text": "row 1 item 3" } ], "dividerAfter": false }, { "cells": [ { "text": "row 2 item 1" }, { "text": "row 2 item 2" }, { "text": "row 2 item 3" } ], "dividerAfter": true }, { "cells": [ { "text": "row 3 item 1" }, { "text": "row 3 item 2" }, { "text": "row 3 item 3" } ] } ], "columnProperties": [ { "header": "header 1", "horizontalAlignment": "CENTER" }, { "header": "header 2", "horizontalAlignment": "LEADING" }, { "header": "header 3", "horizontalAlignment": "TRAILING" } ], "buttons": [ { "title": "Button Text", "openUrlAction": { "url": "https://assistant.google.com" } } ] } }, { "simpleResponse": { "textToSpeech": "Which response would you like to see next?" } } ] } } } }
JSON
Im JSON-Code unten wird eine Webhook-Antwort beschrieben.
{ "expectUserResponse": true, "expectedInputs": [ { "possibleIntents": [ { "intent": "actions.intent.TEXT" } ], "inputPrompt": { "richInitialPrompt": { "items": [ { "simpleResponse": { "textToSpeech": "This is a table with all the possible fields." } }, { "tableCard": { "title": "Table Title", "subtitle": "Table Subtitle", "image": { "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png", "accessibilityText": "Alt Text" }, "rows": [ { "cells": [ { "text": "row 1 item 1" }, { "text": "row 1 item 2" }, { "text": "row 1 item 3" } ], "dividerAfter": false }, { "cells": [ { "text": "row 2 item 1" }, { "text": "row 2 item 2" }, { "text": "row 2 item 3" } ], "dividerAfter": true }, { "cells": [ { "text": "row 3 item 1" }, { "text": "row 3 item 2" }, { "text": "row 3 item 3" } ] } ], "columnProperties": [ { "header": "header 1", "horizontalAlignment": "CENTER" }, { "header": "header 2", "horizontalAlignment": "LEADING" }, { "header": "header 3", "horizontalAlignment": "TRAILING" } ], "buttons": [ { "title": "Button Text", "openUrlAction": { "url": "https://assistant.google.com" } } ] } }, { "simpleResponse": { "textToSpeech": "Which response would you like to see next?" } } ] } } } ] }
Antworten anpassen
Sie können die Darstellung Ihrer Rich-Antworten ändern, indem Sie ein benutzerdefiniertes Design erstellen. Wenn Sie ein Design für Ihr Actions-Projekt festlegen, werden Rich-Antworten in den Actions dieses Projekts entsprechend dem Design gestaltet. Dieses benutzerdefinierte Branding 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:
- Klicken Sie in der Aktionskonsole auf Entwickeln > Designanpassung.
- Legen Sie eine oder alle der folgenden Optionen fest:
- Hintergrundfarbe, die als Hintergrund Ihrer Karten verwendet werden soll. In der Regel sollten Sie eine helle Farbe für den Hintergrund verwenden, damit der Inhalt der Karte gut zu lesen ist.
- Primäre Farbe ist die Hauptfarbe für die Kopfzeilentexte und UI-Elemente deiner Karten. In der Regel sollten Sie eine dunklere Primärfarbe gegenüber dem Hintergrund verwenden.
- Die Schriftfamilie beschreibt die Art der Schriftart, die für Titel und andere bedeutende Textelemente verwendet wird.
- Der Stil der Bildecke kann das Aussehen der Ecken Ihrer Karten ändern.
- Hintergrundbild verwendet ein benutzerdefiniertes Bild anstelle der Hintergrundfarbe. Wenn das Gerät im Quer- oder Hochformat angezeigt wird, müssen Sie zwei verschiedene Bilder zur Verfügung stellen. Wenn Sie ein Hintergrundbild verwenden, ist die Hauptfarbe Weiß.
- Klicken Sie auf Speichern.
