Odpowiedzi rozszerzone zawierają elementy wizualne, które ulepszają interakcje użytkowników z akcją. W prompcie możesz użyć tych typów odpowiedzi rozszerzonych:
- Karta podstawowa
- Karta obrazu
- Karta z tabelą
Podczas definiowania odpowiedzi rozszerzonych użyj kandydatów z interfejsem RICH_RESPONSE. Dzięki temu Asystent Google będzie zwracał odpowiedzi rozszerzone tylko na obsługiwanych urządzeniach. W prośbie możesz użyć tylko 1 odpowiedzi z elementami rozszerzonymi na obiekt content.
Karta podstawowa
Karty podstawowe powinny być zwięzłe i prezentować użytkownikom najważniejsze (lub podsumowanie) informacje oraz umożliwiać im uzyskanie dodatkowych informacji (przy użyciu linku).
Podstawowe karty powinny być używane głównie do wyświetlania, ponieważ nie wymagają interakcji bez przycisku. Aby można było połączyć przycisk z internetem, platforma musi też obsługiwać funkcję WEB_LINK.
Właściwości
Podstawowy typ odpowiedzi karty ma te właściwości:
| Właściwość | Typ | Wymaganie | Opis |
|---|---|---|---|
title |
ciąg znaków | Opcjonalnie | Zwykły tekst tytułu karty. Tytuły mają stałą czcionkę i mają stały rozmiar, a znaki wykraczające poza pierwszą linię są obcinane. Wysokość karty zwija się, jeśli nie określono tytułu. |
subtitle |
ciąg znaków | Opcjonalnie | Podtytuł karty ze zwykłym tekstem. Tytuły mają stałą czcionkę i mają stały rozmiar, a znaki wykraczające poza pierwszą linię są obcinane. Wysokość karty zwija się, jeśli nie określono podtytułu. |
text |
ciąg znaków | Warunkowy |
Na karcie znajduje się zwykły tekst. Zbyt długi tekst jest przycinany do ostatniego słowa za pomocą wielokropka. Ta właściwość jest wymagana, chyba że podano Ta usługa ma następujące ograniczenia:
Obsługiwany jest ograniczony podzbiór formatu Markdown:
|
image |
Image |
Opcjonalnie | Obraz wyświetlany na karcie. Obrazy mogą być w formacie JPG, PNG lub GIF (animowane lub nieanimowane). |
image_fill |
ImageFill |
Opcjonalnie | Obramowanie między kartą a kontenerem obrazu, używane, gdy współczynnik proporcji obrazu nie jest zgodny ze współczynnikiem proporcji kontenera obrazów. |
button |
Link |
Opcjonalnie | Przycisk, który po kliknięciu przekierowuje użytkownika do adresu URL. Przycisk musi mieć właściwość name zawierającą tekst przycisku i właściwość url zawierającą adres URL linku. Tekst przycisku nie może wprowadzać w błąd. Jest on 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 zaprojektowano tak, aby były prostszą alternatywą dla podstawowej karty, która również zawiera obraz. Jeśli chcesz zaprezentować obraz i nie potrzebujesz dodatkowych tekstów ani komponentów interaktywnych, użyj karty obrazu.
Właściwości
Typ odpowiedzi karty graficznej ma te właściwości:
| Właściwość | Typ | Wymaganie | Opis |
|---|---|---|---|
url |
ciąg znaków | Wymagane | Źródłowy adres URL obrazu. Obrazy mogą być w formacie JPG, PNG lub GIF (animowane lub nieanimowane). |
alt |
ciąg znaków | Wymagane | Opis tekstowy obrazu, który ma być używany na potrzeby 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 stołowe
Karty tabel umożliwiają wyświetlanie w odpowiedzi danych tabelarycznych (np. rankingów sportowych, wyników wyborów czy lotów). Możesz zdefiniować kolumny i wiersze (maksymalnie po 3 wiersze), które Asystent będzie wyświetlać 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 korzystaj z wizualnej odpowiedzi wyboru.
Właściwości
Typ odpowiedzi karty tabeli ma te właściwości:
| Właściwość | Typ | Wymaganie | Opis |
|---|---|---|---|
title |
ciąg znaków | Warunkowy | Zwykły tytuł tabeli. Ta właściwość jest wymagana, jeśli ustawiona jest właściwość subtitle. |
subtitle |
ciąg znaków | Opcjonalnie | Podtytuł tabeli ze zwykłym tekstem. Dostosowywanie motywu nie ma wpływu na napisy w kartach tabel. |
columns |
tablica TableColumn |
Wymagane | 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 |
Wymagane |
Dane w wierszach tabeli. Pierwsze 3 wiersze są widoczne na pewno, ale inne mogą nie pojawiać się na niektórych platformach. Za pomocą symulatora możesz sprawdzić, które wiersze są wyświetlane w przypadku danej platformy. Każdy obiekt |
image |
Image |
Opcjonalnie | Obraz powiązany z tabelą. |
button |
Link |
Opcjonalnie | Przycisk, który po kliknięciu przekierowuje użytkownika do adresu URL. Przycisk musi mieć właściwość name zawierającą tekst przycisku i właściwości url – adres URL linku. Tekst przycisku nie może wprowadzać w błąd. Jest on sprawdzany podczas procesu sprawdzania.
|
Przykładowy kod
Poniższe fragmenty kodu 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 odpowiedzi z elementami rozszerzonymi możesz zmienić, tworząc niestandardowy motyw dla projektu w Actions. To dostosowanie może być przydatne do definiowania niepowtarzalnego stylu rozmowy, gdy użytkownicy wywołują akcje w miejscu z ekranem.
Aby ustawić niestandardowy motyw odpowiedzi, wykonaj te czynności:
- W Konsoli Actions kliknij Programowanie > Dostosowywanie motywu.
- Skonfiguruj dowolne lub wszystkie z tych ustawień:
- Kolor tła: używany jako tło kart. Tło powinno być zazwyczaj jasne, aby zwiększyć czytelność treści karty.
- Kolor podstawowy: główny kolor tekstów nagłówków kart i elementów interfejsu. Aby uzyskać lepszy kontrast z kolorem tła, użyj ciemniejszego koloru podstawowego.
- Rodzina czcionek: określa typ czcionki użytej w tytułach i innych widocznych elementach tekstu.
- Styl narożnika obrazu: zmienia wygląd rogów kart.
- Obraz tła: niestandardowy obraz używany zamiast koloru tła. Prześlij 2 różne obrazy, które będą używane, gdy powierzchnia urządzenia jest orientacja pozioma lub pionowa. Jeśli używasz obrazu tła, kolorem podstawowym jest biały.
- Kliknij Zapisz.
