Rich-Antworten

Umfassende Antworten fügen visuelle Elemente hinzu, um die Nutzerinteraktionen mit deiner Aktion zu verbessern. Sie können die folgenden komplexen Antworttypen als Eingabeaufforderung verwenden:

• Basiskarte
• Bildkarte
• Tabellenkarte

Verwenden Sie beim Definieren einer Rich-Media-Antwort einen Kandidaten mit der Oberflächenfunktion RICH_RESPONSE, damit Google Assistant die Rich-Antwort nur auf unterstützten Geräten zurückgibt. Sie können nur eine Rich-Antwort pro content-Objekt in einer Aufforderung verwenden.

Basiskarte

Die Basiskarten sind prägnant, präsentieren den Nutzern wichtige Informationen (oder Zusammenfassungen) und bieten Nutzern die Möglichkeit, auf Wunsch über einen Weblink mehr zu erfahren.

Basiskarten werden hauptsächlich zu Anzeigezwecken verwendet, da sie keine Interaktionsmöglichkeiten ohne Schaltfläche bieten. Damit eine Schaltfläche mit dem Web verknüpft werden kann, muss sie auch die Funktion WEB_LINK haben.

Attribute

Der Antworttyp der Basiskarte hat die folgenden Eigenschaften:

Beispielcode

candidates:
  - first_simple:
      variants:
        - speech: This is a card.
          text: This is a card.
    content:
      card:
        title: Card Title
        subtitle: Card Subtitle
        text: Card Content
        image:
          url: 'https://developers.google.com/assistant/assistant_96.png'
          alt: Google Assistant logo

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is a card.",
            "text": "This is a card."
          }
        ]
      },
      "content": {
        "card": {
          "title": "Card Title",
          "subtitle": "Card Subtitle",
          "text": "Card Content",
          "image": {
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "alt": "Google Assistant logo"
          }
        }
      }
    }
  ]
}

app.handle('Card', conv => {
  conv.add('This is a card.');
  conv.add(new Card({
    "title": "Card Title",
    "subtitle": "Card Subtitle",
    "text": "Card Content",
    "image": new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
    })
  }));
});

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "card": {
          "title": "Card Title",
          "subtitle": "Card Subtitle",
          "text": "Card Content",
          "image": {
            "alt": "Google Assistant logo",
            "height": 0,
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "width": 0
          }
        }
      },
      "firstSimple": {
        "speech": "This is a card.",
        "text": "This is a card."
      }
    }
  }
}

Bildkarten

Bildkarten sind eine einfachere Alternative zu einer Basiskarte, die auch ein Bild enthält. Verwenden Sie eine Bildkarte, wenn Sie ein Bild präsentieren möchten und keine Unterstützung für Text oder interaktive Komponenten erforderlich ist.

Attribute

Der Antworttyp der Bildkarte hat die folgenden Eigenschaften:

Beispielcode

candidates:
  - first_simple:
      variants:
        - speech: This is an image prompt.
          text: This is an image prompt.
    content:
      image:
        alt: Google Assistant logo
        url: 'https://developers.google.com/assistant/assistant_96.png'

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is an image prompt.",
            "text": "This is an image prompt."
          }
        ]
      },
      "content": {
        "image": {
          "alt": "Google Assistant logo",
          "url": "https://developers.google.com/assistant/assistant_96.png"
        }
      }
    }
  ]
}

app.handle('Image', conv => {
  conv.add("This is an image prompt!");
  conv.add(new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
  }));
});

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "image": {
          "alt": "Google Assistant logo",
          "height": 0,
          "url": "https://developers.google.com/assistant/assistant_96.png",
          "width": 0
        }
      },
      "firstSimple": {
        "speech": "This is an image prompt.",
        "text": "This is an image prompt."
      }
    }
  }
}

Tabellenkarten

Mit Tabellenkarten können Sie tabellarische Daten in Ihrer Antwort anzeigen, z. B. Sportergebnisse, Wahlergebnisse und Flüge. Sie können bis zu drei Spalten und Zeilen definieren, die Assistant auf Ihrer Tabellenkarte anzeigt. Sie können auch zusätzliche Spalten und Zeilen mit ihren Priorisierungen definieren.

Tabellen zeigen statische Daten an und sind nicht interaktionsfähig. Verwenden Sie stattdessen eine Antwort für die visuelle Auswahl.

Attribute

Der Antworttyp der Tabellenkarte hat die folgenden Attribute:

Beispielcode

Die folgenden Snippets zeigen, wie eine Tabellenkarte implementiert wird:

candidates:
  - first_simple:
      variants:
        - speech: This is a table.
          text: This is a table.
    content:
      table:
        title: Table Title
        subtitle: Table Subtitle
        columns:
          - header: Column A
          - header: Column B
          - header: Column C
        rows:
          - cells:
              - text: A1
              - text: B1
              - text: C1
          - cells:
              - text: A2
              - text: B2
              - text: C2
          - cells:
              - text: A3
              - text: B3
              - text: C3
        image:
          alt: Google Assistant logo
          url: 'https://developers.google.com/assistant/assistant_96.png'

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is a table.",
            "text": "This is a table."
          }
        ]
      },
      "content": {
        "table": {
          "title": "Table Title",
          "subtitle": "Table Subtitle",
          "columns": [
            {
              "header": "Column A"
            },
            {
              "header": "Column B"
            },
            {
              "header": "Column C"
            }
          ],
          "rows": [
            {
              "cells": [
                {
                  "text": "A1"
                },
                {
                  "text": "B1"
                },
                {
                  "text": "C1"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A2"
                },
                {
                  "text": "B2"
                },
                {
                  "text": "C2"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A3"
                },
                {
                  "text": "B3"
                },
                {
                  "text": "C3"
                }
              ]
            }
          ],
          "image": {
            "alt": "Google Assistant logo",
            "url": "https://developers.google.com/assistant/assistant_96.png"
          }
        }
      }
    }
  ]
}

app.handle('Table', conv => {
  conv.add('This is a table.');
  conv.add(new Table({
    "title": "Table Title",
    "subtitle": "Table Subtitle",
    "image": new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
    }),
    "columns": [{
      "header": "Column A"
    }, {
      "header": "Column B"
    }, {
      "header": "Column C"
    }],
    "rows": [{
      "cells": [{
        "text": "A1"
      }, {
        "text": "B1"
      }, {
        "text": "C1"
      }]
    }, {
      "cells": [{
        "text": "A2"
      }, {
        "text": "B2"
      }, {
        "text": "C2"
      }]
    }, {
      "cells": [{
        "text": "A3"
      }, {
        "text": "B3"
      }, {
        "text": "C3"
      }]
    }]
  }));
});

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "table": {
          "button": {},
          "columns": [
            {
              "header": "Column A"
            },
            {
              "header": "Column B"
            },
            {
              "header": "Column C"
            }
          ],
          "image": {
            "alt": "Google Assistant logo",
            "height": 0,
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "width": 0
          },
          "rows": [
            {
              "cells": [
                {
                  "text": "A1"
                },
                {
                  "text": "B1"
                },
                {
                  "text": "C1"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A2"
                },
                {
                  "text": "B2"
                },
                {
                  "text": "C2"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A3"
                },
                {
                  "text": "B3"
                },
                {
                  "text": "C3"
                }
              ]
            }
          ],
          "subtitle": "Table Subtitle",
          "title": "Table Title"
        }
      },
      "firstSimple": {
        "speech": "This is a table.",
        "text": "This is a table."
      }
    }
  }
}

Antworten anpassen

Sie können die Darstellung Ihrer Rich-Antworten ändern, indem Sie ein benutzerdefiniertes Design für Ihr Actions-Projekt erstellen. Diese Anpassung kann nützlich sein, um dem Gespräch eine individuelle Note zu geben, wenn Nutzer Ihre Aktionen auf einer Oberfläche mit einem Bildschirm aufrufen.

So legen Sie ein benutzerdefiniertes Antwortdesign fest:

1. Gehen Sie in der Aktionskonsole zu Entwickeln > Design anpassen.
2. Legen Sie eine oder alle der folgenden Optionen fest:
   • Hintergrundfarbe: wird als Hintergrund Ihrer Karten verwendet Verwenden Sie in der Regel eine helle Farbe für den Hintergrund, um den Inhalt der Karte besser lesbar zu machen.
   • Primäre Farbe: Hauptfarbe der Titeltexte und Benutzeroberflächenelemente deiner Karten. Verwenden Sie im Allgemeinen eine dunklere Primärfarbe, um einen besseren Kontrast zur Hintergrundfarbe zu erzielen.
   • Schriftfamilie: Beschreibt die Schriftart für Titel und andere wichtige Textelemente.
   • Bildeckenstil: Ändert das Design der Ecken Ihrer Karten.
   • Hintergrundbild: Benutzerdefiniertes Bild, das anstelle der Hintergrundfarbe verwendet werden soll. Stellen Sie zwei unterschiedliche Bilder zur Verfügung, wenn sich das Gerät im Hoch- oder Querformat befindet. Wenn Sie ein Hintergrundbild verwenden, ist die Hauptfarbe Weiß.
3. Klicken Sie auf Speichern.