Szczegółowe odpowiedzi dodają elementy wizualne, które zwiększają interakcje użytkowników z działaniem. W ramach potwierdzenia możesz używać tych typów odpowiedzi rozszerzonych:
- Karta podstawowa
- Karta obrazu
- Karta z tabelą
Podczas definiowania odpowiedzi z elementami rozszerzonymi korzystaj z kandydatów z możliwością interfejsu RICH_RESPONSE
, tak by Asystent Google zwracał tę odpowiedź tylko na obsługiwanych urządzeniach. Możesz wykonać tylko jedną odpowiedź na temat na content
obiekt.
Karta podstawowa
Karty podstawowe mają być zwięzłe, zawierają najważniejsze informacje (lub podsumowania) i pozwalają użytkownikom dowiedzieć się więcej (za pomocą linku internetowego).
Karty podstawowe mają służyć głównie do wyświetlania, ponieważ nie mają funkcji umożliwiających interakcję bez przycisku. Aby można było połączyć przycisk z internetem, platforma musi też mieć funkcję WEB_LINK
.

Usługi
Podstawowy typ odpowiedzi na karcie ma następujące właściwości:
Właściwość | Typ | Wymaganie | Opis |
---|---|---|---|
title |
tekst | Opcjonalna | Tytuł karty w postaci zwykłego tekstu. 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 | Opcjonalna | 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 podtytułu. |
text |
tekst | Warunkowy |
Zawartość zwykłego tekstu karty. Tekst, który jest za długi, jest obcinany przy ostatnim podziale słów za pomocą wielokropka. Ta właściwość jest wymagana, chyba że podano Ta usługa podlega tym ograniczeniom:
Obsługiwany jest ograniczony podzbiór formatu Markdown:
|
image |
Image |
Opcjonalna | Obraz wyświetlany na karcie. Obrazy mogą być w formacie JPG, PNG lub GIF (animowane i nieanimowane). |
image_fill |
ImageFill |
Opcjonalna | Obramowanie między kartą a kontenerem obrazu, które ma być używane, gdy współczynnik proporcji obrazu nie pasuje do współczynnika proporcji kontenera. |
button |
Link |
Opcjonalna | Przycisk kierujący użytkownika do adresu 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ą prostszym rozwiązaniem niż podstawowa karta z obrazem. Użyj karty graficznej, gdy chcesz prezentować obraz, a nie potrzebujesz tekstu ani komponentów interaktywnych.
Usługi
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 (animowane i nieanimowane). |
alt |
tekst | Wymagany | Opis obrazu używany na potrzeby ułatwień dostępu. |
height |
Int32 | Opcjonalna | Wysokość obrazu w pikselach. |
width |
Int32 | Opcjonalna | 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 w tabeli danych tabelarycznych (takich jak klasyfikacja sportowa, wyniki wyborów czy loty). Możesz zdefiniować kolumny (wiersze) (maksymalnie 3) na karcie tabeli. Możesz też zdefiniować dodatkowe kolumny i wiersze oraz określić ich priorytety.

Tabele zawierają dane statyczne i nie można ich używać. W przypadku interaktywnych odpowiedzi wybierz wizualną odpowiedź dotyczącą wyboru.
Usługi
Typ odpowiedzi karty tabeli ma następujące 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 | Opcjonalna | Podtytuł tekstowy tabeli. Dostosowywanie motywów na kartach tabel nie ma na to wpływu. |
columns |
tablica obiektu 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 obiektu TableRow |
Wymagany |
Dane wierszy tabeli. Pierwsze 3 wiersze są widoczne, ale niektóre mogą się nie pojawić. Możesz przeprowadzić test za pomocą symulatora, aby sprawdzić, które wiersze są wyświetlane w przypadku danej platformy. Każdy obiekt |
image |
Image |
Opcjonalna | Obraz powiązany z tabelą. |
button |
Link |
Opcjonalna | Przycisk kierujący użytkownika do adresu 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
Te sposoby pokazują, 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 swoich odpowiedzi rozszerzonych możesz zmienić, tworząc własny motyw dla projektu Actions. To dostosowanie może być przydatne do zdefiniowania niepowtarzalnego stylu rozmowy, gdy użytkownicy wywołują ją na ekranie.
Aby ustawić niestandardowy motyw odpowiedzi, wykonaj te czynności:
- W Konsoli Actions kliknij Programowanie > Dostosowywanie motywu.
- Ustaw dowolne lub wszystkie z tych ustawień:
- Kolor tła: używany jako tło kart. Ogólnie użyj jasnego koloru tła, aby zwiększyć czytelność treści karty.
- Kolor podstawowy: główny kolor nagłówków i elementów interfejsu kart. Ogólnie użyj ciemniejszego koloru podstawowego, aby lepiej kontrastować z kolorem tła.
- Rodzina czcionek: typ czcionki używanej w tytułach i innych widocznych elementach tekstowych.
- Styl narożników obrazu: zmienia wygląd narożników kart.
- Obraz tła: niestandardowy obraz używany zamiast koloru tła. Prześlij 2 różne obrazy do wyświetlania w orientacji poziomej lub pionowej. Jeśli użyjesz obrazu tła, kolor podstawowy zostanie ustawiony na biały.
- Kliknij Zapisz.
