Respons yang kaya menambahkan elemen visual untuk meningkatkan interaksi pengguna dengan Action Anda. Anda dapat menggunakan jenis respons kaya berikut sebagai bagian dari perintah:
- Kartu dasar
- Kartu gambar
- Kartu tabel
Saat menentukan respons yang kaya, gunakan kandidat dengan kemampuan platform RICH_RESPONSE
sehingga Asisten Google hanya menampilkan respons lengkap pada
perangkat yang didukung. Anda hanya dapat menggunakan satu respons lengkap per objek content dalam
perintah.
Kartu dasar
Kartu dasar dirancang agar ringkas, menyajikan informasi penting (atau ringkasan) kepada pengguna, dan memungkinkan pengguna mempelajari lebih lanjut jika Anda memilih (menggunakan link web).
Gunakan kartu dasar terutama untuk tujuan tampilan, karena tidak memiliki kemampuan
interaksi tanpa tombol. Untuk menautkan tombol ke web, platform juga
harus memiliki kemampuan WEB_LINK.
Properti
Jenis respons kartu dasar memiliki properti berikut:
| Properti | Type | Persyaratan | Deskripsi |
|---|---|---|---|
title |
string | Opsional | Judul teks biasa kartu. Judul menggunakan font dan ukuran yang tetap, dan karakter yang melewati baris pertama akan terpotong. Tinggi kartu diciutkan jika tidak ada judul yang ditentukan. |
subtitle |
string | Opsional | Subtitel teks biasa pada kartu. Judul memiliki fon dan ukuran tetap, dan karakter yang melewati baris pertama akan terpotong. Tinggi kartu diciutkan jika tidak ada subtitel yang ditentukan. |
text |
string | Kondisional |
Konten teks biasa pada kartu. Teks yang terlalu panjang terpotong pada
jeda kata terakhir dengan elipsis. Properti ini bersifat wajib kecuali jika
Properti ini memiliki batasan berikut:
Subkumpulan Markdown terbatas didukung:
|
image |
Image |
Opsional | Gambar ditampilkan di kartu. Gambar dapat berupa JPG, PNG, dan GIF (animasi dan non-animasi). |
image_fill |
ImageFill |
Opsional | Batas antara kartu dan penampung gambar yang akan digunakan jika rasio lebar tinggi gambar tidak cocok dengan rasio lebar tinggi penampung gambar. |
button |
Link |
Opsional | Tombol yang menautkan pengguna ke URL saat diketuk. Tombol harus memiliki
properti name yang berisi teks tombol, dan
properti url yang berisi URL link. Teks tombol
tidak boleh menyesatkan, dan diperiksa selama proses peninjauan. |
Kode contoh
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."
}
}
}
}
Kartu gambar
Kartu gambar didesain sebagai alternatif yang lebih sederhana dari kartu dasar yang juga berisi gambar. Gunakan kartu gambar saat Anda ingin menampilkan gambar, dan tidak memerlukan dukungan teks atau komponen interaktif.
Properti
Jenis respons kartu gambar memiliki properti berikut:
| Properti | Type | Persyaratan | Deskripsi |
|---|---|---|---|
url |
string | Wajib | URL sumber gambar. Gambar dapat berupa JPG, PNG, atau GIF (animasi dan non-animasi). |
alt |
string | Wajib | Deskripsi teks gambar yang akan digunakan untuk aksesibilitas. |
height |
int32 | Opsional | Tinggi gambar dalam piksel. |
width |
int32 | Opsional | Lebar gambar dalam piksel. |
Kode contoh
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."
}
}
}
}
Kartu tabel
Kartu tabel memungkinkan Anda menampilkan data tabulasi dalam respons (misalnya, klasemen olahraga, hasil pemilu, dan penerbangan). Anda dapat menentukan kolom dan baris (masing-masing hingga 3) yang ditampilkan Asisten di kartu tabel. Anda juga dapat menentukan kolom dan baris tambahan, beserta prioritasnya.
Tabel menampilkan data statis dan tidak dapat berinteraksi. Untuk respons pemilihan interaktif, gunakan respons pemilihan visual.
Properti
Jenis respons kartu tabel memiliki properti berikut:
| Properti | Type | Persyaratan | Deskripsi |
|---|---|---|---|
title |
string | Kondisional | Judul teks biasa pada tabel. Properti ini bersifat wajib jika
subtitle ditetapkan. |
subtitle |
string | Opsional | Subjudul teks biasa pada tabel. Subtitel dalam kartu tabel tidak terpengaruh oleh penyesuaian tema. |
columns |
array TableColumn |
Wajib | Header dan perataan kolom. Setiap objek TableColumn
menjelaskan header dan perataan kolom yang berbeda dalam tabel
yang sama. |
rows |
array TableRow |
Wajib |
Data baris tabel. Tiga baris pertama dijamin akan ditampilkan, tetapi baris lainnya mungkin tidak muncul di platform tertentu. Anda dapat melakukan pengujian dengan simulator untuk melihat baris mana yang ditampilkan untuk permukaan tertentu. Setiap objek |
image |
Image |
Opsional | Gambar yang terkait dengan tabel. |
button |
Link |
Opsional | Tombol yang menautkan pengguna ke URL saat diketuk. Tombol ini harus memiliki
properti name yang berisi teks tombol, dan
properti url yang berisi URL link. Teks tombol tidak boleh menyesatkan, dan diperiksa selama proses peninjauan.
|
Kode contoh
Cuplikan berikut menunjukkan cara menerapkan kartu tabel:
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."
}
}
}
}
Menyesuaikan respons Anda
Anda dapat mengubah tampilan respons yang kaya dengan membuat tema kustom untuk project Action Anda. Penyesuaian ini dapat berguna untuk menentukan tampilan dan nuansa unik pada percakapan saat pengguna memanggil Action Anda di platform dengan layar.
Untuk menetapkan tema respons kustom, lakukan hal berikut:
- Di konsol Actions, buka Mengembangkan > Penyesuaian tema.
- Tetapkan salah satu atau semua nilai berikut:
- Warna latar belakang: Digunakan sebagai latar belakang kartu. Secara umum, gunakan warna terang untuk latar belakang agar konten kartu lebih mudah dibaca.
- Warna utama: Warna utama untuk teks header dan elemen antarmuka kartu Anda. Secara umum, gunakan warna primer yang lebih gelap untuk lebih kontras dengan warna latar belakang.
- Jenis font: Menjelaskan jenis font yang digunakan untuk judul dan elemen teks yang jelas lainnya.
- Gaya sudut gambar: Mengubah tampilan sudut kartu Anda.
- Gambar latar: Gambar kustom yang akan digunakan sebagai pengganti warna latar belakang. Berikan dua gambar yang berbeda saat perangkat platform berada dalam mode lanskap atau potret. Jika Anda menggunakan gambar latar, warna utama akan disetel ke putih.
- Klik Simpan.
