Rich-Antworten (Dialogflow)

Snippets testen:Code-Snippets mit einem neuen Dialogflow-Agent importieren, bereitstellen und im Kontext untersuchen.

In Dialogflow ansehen

In Dialogflow ansehen

Klicken Sie auf Continue (Weiter), um unser Beispiel für Antworten in Dialogflow zu importieren. Führen Sie dann die folgenden Schritte aus, um das Beispiel bereitzustellen und zu testen:

1. Geben Sie einen Agent-Namen ein und erstellen Sie einen neuen Dialogflow-Agent für das Beispiel.
2. Nachdem der Agent importiert wurde, klicken Sie auf Zum Agent.
3. Klicken Sie im Hauptnavigationsmenü auf Fulfillment (Auftragsausführung).
4. Aktivieren Sie den Inline-Editor und klicken Sie dann auf Bereitstellen. Der Editor enthält den Beispielcode.
5. Klicken Sie im Hauptnavigationsmenü auf Integrations (Integrationen) und dann auf Google Assistant.
6. Aktivieren Sie im angezeigten modalen Fenster die Option Änderungen automatisch in der Vorschau anzeigen und klicken Sie auf Testen, um den Actions-Simulator zu öffnen.
7. Geben Sie im Simulator Talk to my test app ein, um das Beispiel zu testen.

Weiter Abbrechen

Verwende eine Rich-Media-Antwort, wenn du visuelle Elemente anzeigen möchtest, um Nutzerinteraktionen mit deiner Aktion zu verbessern. Diese visuellen Elemente können Hinweise zur Fortsetzung eines Gesprächs sein.

Aussagekräftige Antworten können nur auf Bildschirmen oder in Audio und auf Bildschirmen angezeigt werden. Sie können die folgenden Komponenten enthalten:

• Eine oder zwei einfache Antworten (Sprechblasen).
• Eine optionale Basiskarte
• Optionale Vorschläge für Chips
• Ein optionaler Chip für Link-out.

In unseren Richtlinien für die Gestaltung von Unterhaltungen erfährst du, wie du diese visuellen Elemente in deine Aktion einbaust.

Tipp:Laden Sie das UI-Sticker Sheet herunter, um die visuelle Nutzererfahrung für Actions on Smartphones und Smart Displays zu gestalten.

Attribute

Für Rich-Antworten gelten die folgenden Anforderungen und optionalen Eigenschaften, die konfiguriert werden können:

• Wird auf Oberflächen mit der Funktion actions.capability.SCREEN_OUTPUT unterstützt.
• Das erste Element in einer umfassenden 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
• Verknüpfungen mit dem Internet über Smart Displays werden derzeit nicht unterstützt.

In den folgenden Abschnitten erfahren Sie, wie Sie verschiedene Arten von umfangreichen Antworten erstellen.

Basiskarte

Tipp:Weitere Informationen zur Verwendung und Anpassung von einfachen Karten findest du im Designleitfaden für einfache Karten.

Abbildung 1. Einfaches Kartenbeispiel (Smartphone)

Eine einfache Karte enthält u. a. folgende Informationen:

• Bild
• Titel
• Untertitel
• Text
• Schaltfläche zum Verbinden
• Rahmenlinie

Verwenden Sie einfache Karten hauptsächlich zu Informationszwecken. Sie sind prägnant und bieten den Nutzern wichtige (oder zusammenfassende) Informationen und ermöglichen ihnen, auf Wunsch weitere Informationen zu erhalten (über einen Weblink).

In den meisten Situationen sollten Sie unter den Karten Vorschlags-Chips einfügen, um die Unterhaltung fortzusetzen oder zu neu ausrichten.

Wiederholen Sie auf keinen Fall die Informationen auf der Karte im Infofeld.

Attribute

Der einfache Antworttyp „Karten“ hat die folgenden Anforderungen und optionalen Eigenschaften, die Sie konfigurieren können:

• Wird auf Oberflächen mit der Funktion actions.capability.SCREEN_OUTPUT unterstützt.
• Formatierter Text (erforderlich, wenn kein Bild vorhanden ist)
  • Standardmäßig nur Text.
  • Darf keinen Link enthalten.
  • Maximal 10 Zeilen mit einem Bild, 15 Zeilen ohne Bild. Dies entspricht etwa 500 Zeichen (mit Bild) oder 750 Zeichen (ohne Bild). Auf kleineren Bildschirmen wird Text früher abgeschnitten als bei größeren Bildschirmen. Wenn der Text zu viele Zeilen enthält, wird er am letzten Wortumbruch mit Auslassungspunkten abgeschnitten.
  • Es wird eine begrenzte Teilmenge von Markdown unterstützt:
    • Neue Zeile mit einem doppelten Leerzeichen, gefolgt von \n
    • **bold**
    • *italics*
• Bild (erforderlich, wenn kein formatierter Text vorhanden ist)
  • Alle Bilder müssen 192 dp hoch sein.
  • Wenn sich das Seitenverhältnis des Bildes von dem des Bildschirms unterscheidet, wird das Bild mit grauen Balken an vertikalen oder horizontalen Rändern zentriert.
  • Die Bildquelle ist eine URL.
  • Bewegtbild-GIFs sind zulässig.

Optional

• Titel
  • Nur Text
  • Schriftart und -größe korrigiert.
  • Höchstens eine Zeile, zusätzliche Zeichen werden abgeschnitten.
  • Wenn kein Titel angegeben ist, wird die Höhe der Karte minimiert.
• Untertitel
  • Nur Text
  • Korrigierte Schriftart und Schriftgröße.
  • Höchstens eine Zeile, zusätzliche Zeichen werden abgeschnitten.
  • Die Höhe der Karte wird minimiert, wenn kein Untertitel angegeben ist.
• Schaltfläche „Link“
  • Linktitel ist erforderlich
  • Höchstens ein Link
  • Links zu Websites außerhalb der Domain des Entwicklers sind zulässig.
  • Der Linktext darf nicht irreführend sein. Dies wird im Genehmigungsprozess geprüft.
  • Eine einfache Karte hat ohne Link keine Interaktionsmöglichkeiten. Durch Tippen auf den Link wird der Nutzer zum Link weitergeleitet, während der Hauptteil der Karte inaktiv bleibt.
• Rahmen
  • Der Rahmen zwischen der Karte und dem Bildcontainer kann angepasst werden, um die Darstellung der Basiskarte anzupassen.
  • Wird durch Festlegen des JSON-String-Attributs imageDisplayOptions konfiguriert

Abbildung 2. Einfaches Kartenbeispiel (Smart Display)

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?');
});
index.js

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();
}
MyActionsApp.java

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?');
index.js

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();
MyActionsApp.java

JSON

Beachten Sie, dass der folgende JSON-Code eine Webhook-Antwort beschreibt.

{
  "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

Beachten Sie, dass der folgende JSON-Code eine Webhook-Antwort beschreibt.

{
  "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?"
              }
            }
          ]
        }
      }
    }
  ]
}

Karussell ansehen

Tipp:Weitere Informationen zur Verwendung und Anpassung von Karussells findest du im Designleitfaden zum Durchsuchen von Karussells.

Abbildung 3. Beispiel für ein Suchkarussell (Smartphone)

Ein Suchkarussell ist eine umfassende Antwort, mit der Nutzer vertikal scrollen und eine Kachel in einer Sammlung auswählen können. Karussells wurden speziell für Webinhalte entwickelt. Dazu wird die ausgewählte Kachel in einem Webbrowser geöffnet (oder in einem AMP-Browser, wenn alle Kacheln AMP-fähig sind). Das Suchkarussell bleibt auch auf der Assistant-Oberfläche des Nutzers erhalten, um später zu surfen.

Attribute

Der Antworttyp „Browserkarussell“ hat die folgenden Anforderungen und optionalen Eigenschaften, die Sie konfigurieren können:

• Wird auf Oberflächen unterstützt, die die Funktionen actions.capability.SCREEN_OUTPUT und actions.capability.WEB_BROWSER haben. Dieser Antworttyp ist derzeit auf Smart Displays nicht verfügbar.
• Karussell ansehen
  • Maximal zehn Kacheln.
  • Mindestens zwei Kacheln
  • Alle Kacheln im Karussell müssen mit Webinhalten verknüpft sein (AMP-Inhalte empfohlen).
    • Damit der Nutzer zu einem AMP-Viewer weitergeleitet wird, muss urlHintType in AMP-Inhaltskacheln auf „AMP_CONTENT“ gesetzt sein.
• Karussellkacheln durchsuchen
  • Kachelkonsistenz (erforderlich):
    • Alle Kacheln in einem Suchkarussell müssen dieselben Komponenten haben. Wenn beispielsweise eine Kachel ein Bildfeld hat, müssen auch die übrigen Kacheln im Karussell Bildfelder haben.
    • Wenn alle Kacheln im Suchkarussell 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 über alle Kacheln zu einem Webbrowser weitergeleitet.
  • 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 erhält auf beiden Seiten Balken. Auf Smartphones ist das Bild in einem Quadrat mit abgerundeten Ecken zentriert.
    • Wenn ein Bildlink fehlerhaft ist, wird stattdessen ein Platzhalterbild verwendet.
    • Für Bilder ist Alt-Text erforderlich.
  • Titel (erforderlich)
    • Dieselben Formatierungsoptionen wie auf der Basistextkarte.
    • Titel müssen eindeutig sein, um die Stimmauswahl zu unterstützen.
    • Maximal zwei Textzeilen.
    • Schriftgröße 16 sp
  • Beschreibung (optional)
    • Dieselben Formatierungsoptionen wie auf der Basistextkarte.
    • Maximal vier Textzeilen.
    • Abgeschnitten mit Auslassungspunkten (...)
    • Schriftgröße 14sp, graue Farbe.
  • Fußzeile (optional)
    • Korrigierte Schriftart und Schriftgröße.
    • Maximal eine Textzeile.
    • Abgeschnitten mit Auslassungspunkten (...)
    • Unten verankert, sodass Kacheln mit weniger Fließtextzeilen Leerraum über dem Untertext haben können.
    • Schriftgröße 14sp, graue Farbe.
• Interaktion
  • Nutzer können vertikal scrollen, um Artikel zu sehen.
  • Tippkarte: Wenn der Nutzer auf ein Element tippt, wird er zu einem Browser mit der verknüpften Seite weitergeleitet.
• Spracheingabe
  • Mikrofonverhalten
    • Das Mikrofon wird nicht wieder geöffnet, wenn ein Suchkarussell an den Nutzer gesendet wird.
    • Der Nutzer kann weiterhin auf das Mikrofon tippen oder Assistant aufrufen („Ok Google“), um das Mikrofon wieder zu aktivieren.

Anleitung

Standardmäßig bleibt das Mikrofon geschlossen, nachdem ein Suchkarussell gesendet wurde. Wenn Sie die Unterhaltung danach fortsetzen möchten, empfehlen wir dringend, Vorschläge-Chips unter dem Karussell hinzuzufügen.

Wiederholen Sie nie die Optionen in der Liste als Vorschlags-Chips. Die Chips werden in diesem Kontext dazu verwendet, die Unterhaltung neu auszurichten (nicht für die Auswahl einer Auswahl).

Hinweis :Wenn unter dem Karussell keine Vorschlags-Chips angezeigt werden, sollten Sie die Unterhaltung beenden, nachdem Sie mit einem Suchkarussell geantwortet haben.

Wie bei Listen ist das Infofeld, das der Karussellkarte beigefügt ist, ein Teil der Audiodaten (TTS/SSML). Bei der Audioausgabe (TTS/SSML) wird hier die erste Kachel in das Karussell integriert. Es wird auch dringend davon abgeraten, alle Elemente aus dem Karussell zu lesen. Am besten erwähnen Sie den ersten Artikel und den Grund dafür (z. B. der beliebteste, der zuletzt gekaufte oder der am häufigsten genannte Artikel).

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',
      }),
    ],
  }));
});
index.js

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();
}
MyActionsApp.java

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',
    }),
  ],
}));
index.js

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();
MyActionsApp.java

JSON

Beachten Sie, dass der folgende JSON-Code eine Webhook-Antwort beschreibt.

{
  "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

Beachten Sie, dass der folgende JSON-Code eine Webhook-Antwort beschreibt.

{
  "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 Stöberkarussell-Elementen ist keine nachfolgende Auftragsausführung erforderlich, da das Karussell die Browserübergabe durchführt. Das Mikrofon wird nicht wieder aktiviert, nachdem der Nutzer mit einem Element im Stöberkarussell interagiert hat. Sie sollten daher wie oben beschrieben entweder die Unterhaltung beenden oder Vorschläge für Chips in Ihre Antwort einfügen.

Vorschlags-Chips

Tipp:Weitere Informationen zur Verwendung und Anpassung von Vorschlags-Chips finden Sie im Designleitfaden für Vorschlags-Chips.

Abbildung 4. Beispiel für Vorschlags-Chips (Smartphone)

Mit Vorschlags-Chips können Sie auf Antworten hinweisen und so die Unterhaltung fortsetzen oder neu ausrichten. Wenn es während des Gesprächs einen primären Call-to-Action gibt, sollten Sie diesen als ersten Vorschlags-Chip auflisten.

Sie sollten nach Möglichkeit einen wichtigen Vorschlag in die Sprechblase aufnehmen, aber dies nur, wenn die Antwort oder die Chatunterhaltung natürlich wirkt.

Attribute

Vorschlags-Chips haben die folgenden Anforderungen und optionalen Eigenschaften, die Sie konfigurieren können:

• Wird auf Oberflächen mit der Funktion actions.capability.SCREEN_OUTPUT unterstützt.
• Oberflächen müssen auch die Funktion actions.capability.WEB_BROWSER haben, um Vorschlags-Chips mit dem Web zu verknüpfen. Auf Smart Displays ist diese Funktion derzeit nicht verfügbar.
• Maximal acht Chips.
• Maximale Textlänge: 25 Zeichen.

• Nur Text wird unterstützt.

  Wenn dein Vorschlags-Chip einen Link zu einer externen Website enthält (mit addSuggestionLink oder linkOutSuggestion), muss die Zielwebsite bestätigt und dasselbe Protokoll (http oder https) wie die URL verwenden. Beachte, dass externe Links von Vorschlags-Chips im Aktionssimulator oder auf Smart Displays nicht funktionieren.

Abbildung 5. Beispiel für Vorschlags-Chips (Smart Display)

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?'); ;
});
index.js

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();
}
MyActionsApp.java

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?');
index.js

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();
MyActionsApp.java

JSON

Beachten Sie, dass der folgende JSON-Code eine Webhook-Antwort beschreibt.

{
  "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

Beachten Sie, dass der folgende JSON-Code eine Webhook-Antwort beschreibt.

{
  "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

Tipp:Weitere Informationen zur Verwendung und Anpassung von Medienantworten finden Sie im Designleitfaden für Medienantworten.

Abbildung 6. Beispiel für eine Medienantwort (Smartphone)

Mithilfe von Medienantworten können mit Ihrer Aktion Audioinhalte mit einer Wiedergabedauer von mehr als die 240-Sekunden-Grenze von SSML wiedergegeben werden. Die Hauptkomponente einer Medienantwort ist die Karte mit einem Track. Mit der Karte kann der Nutzer folgende Vorgänge ausführen:

• Die letzten 10 Sekunden noch einmal abspielen.
• 30 Sekunden vorspulen
• Sehen Sie sich die Gesamtlänge der Medieninhalte an.
• Zeigt eine Fortschrittsanzeige für die Audiowiedergabe an.
• Sieh dir die verstrichene Wiedergabezeit an.

Medienantworten unterstützen die folgenden Audiosteuerelemente für Sprachinteraktionen:

• „Hey Google, spiel ab.“
• „Hey Google, Pause.“
• „Hey Google, stopp.“
• „Hey Google, fang von vorne an.“

Nutzer können die Lautstärke auch mit Befehlen wie „Hey Google, mach lauter.“ oder „Hey Google, stell die Lautstärke auf 50 %“ regeln. Intents in Ihrer Aktion haben Vorrang, wenn sie ähnliche Trainingsformulierungen verarbeiten. Lass Assistant diese Nutzeranfragen verarbeiten, es sei denn, deine Aktion hat einen bestimmten Grund dafür.

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)
  • Optional können Sie ein Symbol oder ein Bild einfügen.
  • Symbol
    • Das Symbol wird als rahmenlose Miniaturansicht rechts auf der Karte im Mediaplayer angezeigt.
    • Die Größe sollte 36 x 36 dp betragen. Größere Bilder werden an die Größe angepasst.
  • Bild
    • Der Image-Container ist 192 dp hoch.
    • Ihr Bild wird oben auf der Mediaplayer-Karte angezeigt und erstreckt sich über die volle Breite der Karte. Die meisten Bilder haben oben oder an den Seiten Balken.
    • Bewegtbild-GIFs sind zulässig.
  • Sie müssen die Bildquelle als URL angeben.
  • Alt-Text ist für alle Bilder erforderlich.

Verhalten auf Oberflächen

Medienantworten werden auf Android-Smartphones und auf Google Home unterstützt. Das Verhalten von Medienantworten hängt von der Oberfläche ab, auf der Nutzer mit deinen 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 Display des Smartphones ist eingeschaltet.
• Der Nutzer verlässt Google Assistant während der Audiowiedergabe und kehrt innerhalb von 10 Minuten nach Abschluss der Wiedergabe zu Google Assistant zurück. Bei der Rückkehr zu Google Assistant werden dem Nutzer die Medienkarte und die Vorschlags-Chips angezeigt.
• Mit Assistant können Nutzer die Gerätelautstärke in Ihrer Konversationsaktion steuern, indem sie beispielsweise „Lautstärke erhöhen“ oder „Lautstärke auf 50 % stellen“ sagen. Intents, die ähnliche Trainingsformulierungen verarbeiten, haben Vorrang. Wir empfehlen, Assistant die Bearbeitung dieser Nutzeranfragen zu überlassen, es sei denn, deine Aktion hat einen bestimmten Grund.

Die Mediensteuerung ist verfügbar, während das Smartphone gesperrt ist. Unter Android erscheinen die Steuerelemente auch im Infobereich.

Hinweis :Deine Aktion erhält keine Rückrufe von Google Assistant, wenn der Nutzer den Google Assistant-Bildschirm während der Medienwiedergabe verlässt und das Gerät die Wiedergabe des Medientracks beendet, während der Nutzer abwesend ist. Füge Chips mit Vorschlägen ein, damit die Nutzer weiterhin mit deiner Aktion interagieren können, wenn sie zum Google Assistant-Bildschirm zurückkehren.

Abbildung 7. Beispiel für eine Medienantwort (Smart Display)

Beispielcode

Das folgende Codebeispiel zeigt, wie Sie Ihre Rich-Antworten aktualisieren können, um Medien einzuschließen.

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']));
});
index.js

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();
}
MyActionsApp.java

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']));
index.js

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();
MyActionsApp.java

JSON

Beachten Sie, dass der folgende JSON-Code eine Webhook-Antwort beschreibt.

{
  "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

Beachten Sie, dass der folgende JSON-Code eine Webhook-Antwort beschreibt.

{
  "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 einem mediaType von AUDIO und einen mediaObject im Element-Array der Rich-Antwort enthalten. Eine Medienantwort unterstützt ein einzelnes Medienobjekt. Ein Medienobjekt muss die Inhalts-URL der Audiodatei enthalten. Ein Medienobjekt kann optional einen Namen, Untertext (Beschreibung) und eine Symbol- oder Bild-URL enthalten.

Wenn deine Aktion die Audiowiedergabe auf Smartphones und Google Home abschließt, prüft Google Assistant, ob die Medienantwort ein FinalResponse ist. Ist dies nicht der Fall, wird ein Callback an die Auftragsausführung gesendet, sodass Sie dem Nutzer antworten können.

Deine Aktion muss Chips für Vorschläge enthalten, wenn die Antwort kein FinalResponse ist.

Rückruf nach Abschluss der Wiedergabe verarbeiten

Deine Aktion sollte den Intent actions.intent.MEDIA_STATUS verarbeiten, um den Nutzer zum Nachverfolgen aufzufordern (z. B. um einen weiteren Song abzuspielen). Deine Aktion empfängt diesen Callback, sobald die Medienwiedergabe abgeschlossen ist. Das Argument MEDIA_STATUS im Callback enthält Statusinformationen zum aktuellen Medium. Der Statuswert ist entweder FINISHED oder STATUS_UNSPECIFIED.

Dialogflow verwenden

Wenn Sie eine Konversationsverzweigung in Dialogflow ausführen möchten, müssen Sie den Eingabekontext actions_capability_media_response_audio für den Intent einrichten. Damit wird er nur auf Oberflächen ausgelöst, die eine Medienantwort unterstützen.

Erfolgreiche Ausführung

Das folgende Code-Snippet zeigt, wie Sie den Auftragsausführungscode für Ihre Aktion schreiben können. Wenn Sie Dialogflow verwenden, ersetzen Sie actions.intent.MEDIA_STATUS durch den Aktionsnamen, der in dem Intent angegeben ist, der das Ereignis actions_intent_MEDIA_STATUS 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?');
});
index.js

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();
}
MyActionsApp.java

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?');
});
index.js

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();
}
MyActionsApp.java

JSON

Der folgende JSON-Code beschreibt eine Webhook-Anfrage.

{
  "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

Der folgende JSON-Code beschreibt eine Webhook-Anfrage.

{
  "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

Hinweis :Tabellenkarten sind in der Produktion verfügbar, wenn Nutzer Ihre Aktion über Smart Displays oder Smartphones mit der im Oktober 2018 angekündigten visuellen Erfahrung aufrufen. Sie können die Antworten auf Tabellenkarten im Aktionssimulator testen.

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 anzeigen muss. Sie können auch zusätzliche Spalten und Zeilen mit ihrer Priorisierung definieren.

Tabellen unterscheiden sich von vertikalen Listen, da Tabellen statische Daten anzeigen und nicht wie Listenelemente interagieren können.

Tipp:Weitere Informationen zur Verwendung und Anpassung von Tabellen finden Sie im Designleitfaden für Tabellen.

Abbildung 8. Beispiel für eine Tabellenkarte (Smart Display)

Attribute

Für Tabellenkarten gelten die folgenden Anforderungen und optionalen Attribute, die konfiguriert werden können:

• Wird auf Oberflächen mit der Funktion actions.capability.SCREEN_OUTPUT unterstützt.

Im folgenden Abschnitt wird zusammengefasst, wie Sie die Elemente in einer Tabellenkarte anpassen können.

Name	Ist optional	Anpassbar	Hinweise zur Anpassung
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 Cell-Objekten und einer divider_after-Eigenschaft, die angibt, ob nach der Zeile eine Trennlinie eingefügt werden soll. Die ersten 3 Zeilen werden garantiert angezeigt, andere werden auf bestimmten Oberflächen möglicherweise nicht angezeigt. Testen Sie mit dem Simulator, welche Zeilen für eine bestimmte Oberfläche angezeigt werden. Auf Oberflächen, die die WEB_BROWSER-Funktion unterstützen, kannst du den Nutzer auf eine Webseite mit mehr Daten verweisen. Verknüpfungen mit dem Web sind derzeit für Smart Displays nicht verfügbar.
ColumnProperties	Ja	Ja	Überschrift und Ausrichtung einer Spalte. Besteht aus einer header-Eigenschaft (die den Kopfzeilentext einer Spalte darstellt) und einer horizontal_alignment-Eigenschaft vom Typ HorizontalAlignment.
Cell	Nein	Ja	Beschreibt eine Zelle in einer Zeile. Jede Zelle enthält eine Zeichenfolge, die einen Textwert darstellt. Sie können den Text in der Zelle anpassen.
Button	Ja	Ja	Ein Schaltflächenobjekt, das normalerweise unten auf einer Karte erscheint. Eine Tabellenkarte kann nur eine Schaltfläche haben. Sie können die Farbe der Schaltfläche anpassen.
HorizontalAlignment	Ja	Ja	Horizontale Ausrichtung des Inhalts innerhalb der Zelle. Mögliche Werte sind LEADING, CENTER oder TRAILING. Wenn kein Wert angegeben ist, wird der Inhalt am oberen Rand 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?');
});
index.js

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();
}
MyActionsApp.java

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?');
index.js

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();
MyActionsApp.java

JSON

Beachten Sie, dass der folgende JSON-Code eine Webhook-Antwort beschreibt.

{
  "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

Beachten Sie, dass der folgende JSON-Code eine Webhook-Antwort beschreibt.

{
  "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?');
});
index.js

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();
}
MyActionsApp.java

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?');
index.js

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();
MyActionsApp.java

JSON

Beachten Sie, dass der folgende JSON-Code eine Webhook-Antwort beschreibt.

{
  "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

Beachten Sie, dass der folgende JSON-Code eine Webhook-Antwort beschreibt.

{
  "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 Thema für Ihr Actions-Projekt definieren, werden Rich-Antworten in den Actions Ihres Projekts entsprechend diesem Design gestaltet. Dieses benutzerdefinierte Branding kann nützlich sein, um ein einzigartiges Erscheinungsbild für die Unterhaltung zu definieren, wenn Nutzer deine Aktionen auf einer Oberfläche mit einem Bildschirm aufrufen.

Warnung: Achten Sie darauf, dass die verwendete Hintergrundfarbe und Hauptfarbe einen ausreichenden Farbkontrast haben, da die Actions Console andernfalls Fehler zurückgeben kann. Vermeiden Sie es, eine dunkle Farbe als Hintergrundfarbe und eine helle Farbe (z. B. Weißgrau) als Primärfarbe festzulegen.

So legen Sie ein benutzerdefiniertes Antwortdesign fest:

1. Rufen Sie in der Actions Console die Option Entwickeln > Designanpassung auf.
2. Legen Sie eine oder alle der folgenden Optionen fest:
   • Hintergrundfarbe, die als Hintergrund Ihrer Karten verwendet wird Im Allgemeinen empfiehlt es sich, für den Hintergrund eine helle Farbe zu verwenden, damit der Inhalt der Karte gut lesbar ist.
   • Die Primärfarbe ist die Hauptfarbe für die Überschriftentexte und UI-Elemente Ihrer Karten. Im Allgemeinen sollte eine dunklere Primärfarbe für den Kontrast zum Hintergrund verwendet werden.
   • Mit der Schriftfamilie wird der Schrifttyp für Titel und andere gut sichtbare Textelemente beschrieben.
   • Durch den Stil der Bildecken kann das Aussehen der Ecken Ihrer Karten geändert werden.
   • Für ein Hintergrundbild wird anstelle der Hintergrundfarbe ein benutzerdefiniertes Bild verwendet. Sie müssen zwei verschiedene Bilder bereitstellen, wenn sich das Surface-Gerät im Quer- bzw. Hochformat befindet. Wenn Sie ein Hintergrundbild verwenden, wird die Primärfarbe auf Weiß eingestellt.
3. Klicken Sie auf Speichern.

Abbildung 9. Design in der Actions Console anpassen