Odpowiedzi rozszerzone dodają elementy wizualne, które zwiększają interakcję użytkowników z Twoją akcją. W prośbie możesz użyć tych typów odpowiedzi rozszerzonych:
- Karta podstawowa
- Karta graficzna
- Karta z tabelą
Podczas definiowania odpowiedzi z elementami rozszerzonymi korzystaj z kandydatów z funkcją interfejsu RICH_RESPONSE
, tak by Asystent Google zwracał tylko szczegółową odpowiedź na obsługiwanych urządzeniach. W potwierdzeniu możesz użyć tylko 1 odpowiedzi z elementami rozszerzonymi na każdy obiekt content
.
Karta podstawowa
Karty podstawowe mają być zwięzłe i zawierać najważniejsze informacje (z podsumowaniem), a także pozwalają użytkownikom dowiedzieć się więcej (jeśli używają linku internetowego).
Korzystaj z kart podstawowych przede wszystkim do celów wyświetlania, ponieważ nie mają one przycisku interakcji. Aby można było połączyć przycisk z internetem, przestrzeń musi też mieć funkcję WEB_LINK
.

Właściwości
Podstawowy typ odpowiedzi karty ma te właściwości:
Właściwość | Typ | Wymaganie | Opis |
---|---|---|---|
title |
tekst | Opcjonalnie | Tytuł zwykłego tekstu karty. Tytuły mają stałą czcionkę i rozmiar, a znaki po pierwszym wierszu są obcinane. Wysokość karty zwija się, jeśli nie określono tytułu. |
subtitle |
tekst | Opcjonalnie | Podtytuł tekstowy karty. Tytuły mają stałą czcionkę i rozmiar, a znaki po pierwszym wierszu są obcinane. Wysokość karty zwija się, jeśli nie określono napisów. |
text |
tekst | Warunkowy |
Zawartość zwykłego tekstu na karcie. Zbyt długi tekst zostanie skrócony na początku ostatniego fragmentu z wielokropkiem. Ta właściwość jest wymagana, chyba że podano Ta usługa ma następujące ograniczenia:
Ograniczony podzbiór Markdown jest obsługiwany:
|
image |
Image |
Opcjonalnie | Obraz wyświetlany na karcie. Obrazy mogą być w formacie JPG, PNG lub GIF (animowanym lub nieanimowanym). |
image_fill |
ImageFill |
Opcjonalnie | Obramowanie między kartą a kontenerem obrazu, które ma być stosowane, gdy współczynnik proporcji obrazu nie odpowiada współczynnikowi proporcji kontenera obrazu. |
button |
Link |
Opcjonalnie | Przycisk łączący użytkownika z adresem URL po kliknięciu. Przycisk musi mieć właściwość name , która zawiera tekst przycisku, oraz właściwość url , która zawiera adres URL linku. Tekst przycisku nie może wprowadzać w błąd i jest sprawdzany podczas procesu sprawdzania. |
Przykładowy kod
YAML
candidates: - first_simple: variants: - speech: This is a card. text: This is a card. content: card: title: Card Title subtitle: Card Subtitle text: Card Content image: url: 'https://developers.google.com/assistant/assistant_96.png' alt: Google Assistant logo
JSON
{ "candidates": [ { "first_simple": { "variants": [ { "speech": "This is a card.", "text": "This is a card." } ] }, "content": { "card": { "title": "Card Title", "subtitle": "Card Subtitle", "text": "Card Content", "image": { "url": "https://developers.google.com/assistant/assistant_96.png", "alt": "Google Assistant logo" } } } } ] }
Node.js
app.handle('Card', conv => { conv.add('This is a card.'); conv.add(new Card({ "title": "Card Title", "subtitle": "Card Subtitle", "text": "Card Content", "image": new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' }) })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {} }, "prompt": { "override": false, "content": { "card": { "title": "Card Title", "subtitle": "Card Subtitle", "text": "Card Content", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, "firstSimple": { "speech": "This is a card.", "text": "This is a card." } } } }
Karty graficzne
Karty graficzne są zaprojektowane tak, by były prostszą alternatywą dla podstawowej karty z obrazem. Gdy chcesz prezentować obraz, nie potrzebujesz karty graficznej i nie potrzebujesz obsługi komponentów tekstowych ani interaktywnych.
Właściwości
Typ odpowiedzi karty graficznej ma te właściwości:
Właściwość | Typ | Wymaganie | Opis |
---|---|---|---|
url |
tekst | Wymagany | Źródłowy adres URL obrazu. Obrazy mogą być w formacie JPG, PNG lub GIF (animowanym lub nieanimowanym). |
alt |
tekst | Wymagany | Opis obrazu używany do ułatwień dostępu. |
height |
int32, | Opcjonalnie | Wysokość obrazu w pikselach. |
width |
int32, | Opcjonalnie | Szerokość obrazu w pikselach. |
Przykładowy kod
YAML
candidates: - first_simple: variants: - speech: This is an image prompt. text: This is an image prompt. content: image: alt: Google Assistant logo url: 'https://developers.google.com/assistant/assistant_96.png'
JSON
{ "candidates": [ { "first_simple": { "variants": [ { "speech": "This is an image prompt.", "text": "This is an image prompt." } ] }, "content": { "image": { "alt": "Google Assistant logo", "url": "https://developers.google.com/assistant/assistant_96.png" } } } ] }
Node.js
app.handle('Image', conv => { conv.add("This is an image prompt!"); conv.add(new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {} }, "prompt": { "override": false, "content": { "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } }, "firstSimple": { "speech": "This is an image prompt.", "text": "This is an image prompt." } } } }
Karty tabel
Karty tabel umożliwiają wyświetlanie danych tabelarycznych w odpowiedzi (na przykład wyników sportowych, wyników wyborów i lotów). Możesz określać kolumny i wiersze (maksymalnie 3) wyświetlane przez Asystenta na karcie tabeli. Możesz też zdefiniować dodatkowe kolumny i wiersze oraz określić ich priorytety.

Tabele wyświetlają dane statyczne i nie można z nich korzystać. W przypadku interaktywnych odpowiedzi wyboru użyj wizualnej odpowiedzi do wyboru.
Właściwości
Typ odpowiedzi karty tabeli ma te właściwości:
Właściwość | Typ | Wymaganie | Opis |
---|---|---|---|
title |
tekst | Warunkowy | Tytuł zwykłego tekstu tabeli. Ta właściwość jest wymagana, jeśli ustawiono subtitle . |
subtitle |
tekst | Opcjonalnie | Podtytuł tekstowy tabeli. Dostosowywanie motywów nie ma wpływu na napisy na kartach tabel. |
columns |
tablica TableColumn |
Wymagany | Nagłówki i wyrównanie kolumn. Każdy obiekt TableColumn opisuje nagłówek i wyrównanie innej kolumny w tej samej tabeli. |
rows |
tablica TableRow |
Wymagany |
Dane wiersza z tabeli. Pierwsze 3 wiersze mogą być wyświetlane, ale w niektórych miejscach mogą się nie wyświetlać. Korzystając z symulatora, możesz sprawdzić, które wiersze są wyświetlane na danej powierzchni. Każdy obiekt |
image |
Image |
Opcjonalnie | Obraz powiązany z tabelą. |
button |
Link |
Opcjonalnie | Przycisk łączący użytkownika z adresem URL po kliknięciu. Przycisk musi mieć właściwość name , która zawiera tekst przycisku, oraz właściwość url , która zawiera adres URL linku. Tekst przycisku nie może wprowadzać w błąd i jest sprawdzany podczas sprawdzania.
|
Przykładowy kod
Z tych fragmentów kodu dowiesz się, jak wdrożyć kartę tabeli:
YAML
candidates: - first_simple: variants: - speech: This is a table. text: This is a table. content: table: title: Table Title subtitle: Table Subtitle columns: - header: Column A - header: Column B - header: Column C rows: - cells: - text: A1 - text: B1 - text: C1 - cells: - text: A2 - text: B2 - text: C2 - cells: - text: A3 - text: B3 - text: C3 image: alt: Google Assistant logo url: 'https://developers.google.com/assistant/assistant_96.png'
JSON
{ "candidates": [ { "first_simple": { "variants": [ { "speech": "This is a table.", "text": "This is a table." } ] }, "content": { "table": { "title": "Table Title", "subtitle": "Table Subtitle", "columns": [ { "header": "Column A" }, { "header": "Column B" }, { "header": "Column C" } ], "rows": [ { "cells": [ { "text": "A1" }, { "text": "B1" }, { "text": "C1" } ] }, { "cells": [ { "text": "A2" }, { "text": "B2" }, { "text": "C2" } ] }, { "cells": [ { "text": "A3" }, { "text": "B3" }, { "text": "C3" } ] } ], "image": { "alt": "Google Assistant logo", "url": "https://developers.google.com/assistant/assistant_96.png" } } } } ] }
Node.js
app.handle('Table', conv => { conv.add('This is a table.'); conv.add(new Table({ "title": "Table Title", "subtitle": "Table Subtitle", "image": new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' }), "columns": [{ "header": "Column A" }, { "header": "Column B" }, { "header": "Column C" }], "rows": [{ "cells": [{ "text": "A1" }, { "text": "B1" }, { "text": "C1" }] }, { "cells": [{ "text": "A2" }, { "text": "B2" }, { "text": "C2" }] }, { "cells": [{ "text": "A3" }, { "text": "B3" }, { "text": "C3" }] }] })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {} }, "prompt": { "override": false, "content": { "table": { "button": {}, "columns": [ { "header": "Column A" }, { "header": "Column B" }, { "header": "Column C" } ], "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 }, "rows": [ { "cells": [ { "text": "A1" }, { "text": "B1" }, { "text": "C1" } ] }, { "cells": [ { "text": "A2" }, { "text": "B2" }, { "text": "C2" } ] }, { "cells": [ { "text": "A3" }, { "text": "B3" }, { "text": "C3" } ] } ], "subtitle": "Table Subtitle", "title": "Table Title" } }, "firstSimple": { "speech": "This is a table.", "text": "This is a table." } } } }
Dostosowywanie odpowiedzi
Wygląd odpowiedzi rozszerzonych możesz zmienić, tworząc motyw niestandardowy dla projektu Actions. To dostosowanie może być przydatne do zdefiniowania unikalnego stylu rozmowy, gdy użytkownicy wywołują ją na ekranie.
Aby ustawić niestandardowy motyw odpowiedzi, wykonaj te czynności:
- W konsoli Actions kliknij Develop > thethe adjustments (Dostosowywanie motywu).
- Ustaw dowolną z tych opcji:
- Kolor tła: używany jako tło kart. Ogólnie używaj jasnego koloru tła, aby treść karty była bardziej czytelna.
- Kolor podstawowy: główny kolor nagłówków i elementów interfejsu kart. Ogólnie w ciemniejszym kolorze lepiej jest kontrastować z tłem.
- Rodzina czcionek: opisuje typ czcionki używany w tytułach i innych widocznych elementach tekstowych.
- Styl narożnika obrazu: zmienia wygląd rogów kart.
- Obraz tła: niestandardowy obraz, który zastępuje kolor tła. Prześlij 2 różne obrazy do wyświetlania w urządzeniach w orientacji poziomej lub pionowej. Jeśli używasz obrazu tła, kolor główny jest ustawiony na biały.
- Kliknij Zapisz.
