Respons yang lengkap menambahkan elemen visual untuk meningkatkan interaksi pengguna dengan Action Anda. Anda dapat menggunakan jenis respons multimedia berikut sebagai bagian dari prompt:
- Kartu dasar
- Kartu gambar
- Kartu tabel
Saat menentukan respons lengkap, gunakan kandidat dengan kemampuan platform
RICH_RESPONSE
sehingga Asisten Google hanya menampilkan respons lengkap di
perangkat yang didukung. Anda hanya dapat menggunakan satu respons kaya per objek content
dalam
perintah.
Kartu dasar
Kartu dasar dirancang agar ringkas, menyajikan informasi utama (atau ringkasan) kepada pengguna, dan memungkinkan pengguna mempelajari lebih lanjut jika Anda memilihnya (menggunakan link web).
Gunakan kartu dasar terutama untuk tujuan tampilan, karena kartu tersebut tidak memiliki kemampuan
interaksi tanpa tombol. Untuk menautkan tombol ke web, platform juga
harus memiliki kemampuan WEB_LINK
.
![Contoh kartu dasar di layar smart](https://developers.google.cn/static/assistant/conversational/images/smart-display/basic-card.png?authuser=6&hl=id)
Properti
Jenis respons kartu dasar memiliki properti berikut:
Properti | Jenis | Persyaratan | Deskripsi |
---|---|---|---|
title |
string | Opsional | Judul teks biasa kartu. Judul menggunakan font dan ukuran tetap, dan karakter yang melewati baris pertama akan dipotong. Tinggi kartu diciutkan jika tidak ada judul yang ditentukan. |
subtitle |
string | Opsional | Subtitel teks biasa pada kartu. Judul menggunakan font dan ukuran tetap, dan karakter yang melewati baris pertama akan dipotong. Tinggi kartu diciutkan jika tidak ada subtitel yang ditentukan. |
text |
string | Conditional |
Konten teks biasa pada kartu. Teks yang terlalu panjang akan dipotong di
pemisah kata terakhir dengan elipsis. Properti ini wajib ada kecuali jika
Properti ini memiliki batasan berikut:
Mendukung subset terbatas dari Markdown:
|
image |
Image |
Opsional | Gambar yang 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 aspek gambar tidak cocok dengan rasio aspek 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 akan 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 dirancang untuk menjadi alternatif yang lebih sederhana daripada kartu dasar yang juga berisi gambar. Gunakan kartu gambar jika Anda ingin menampilkan gambar, dan tidak perlu mendukung teks atau komponen interaktif.
Properti
Jenis respons kartu gambar memiliki properti berikut:
Properti | Jenis | 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 tabel 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. Anda juga dapat menentukan kolom dan baris tambahan, beserta prioritasnya.
![Contoh kartu meja di layar smart](https://developers.google.cn/static/assistant/conversational/images/smart-display/table.png?authuser=6&hl=id)
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 | Jenis | Persyaratan | Deskripsi |
---|---|---|---|
title |
string | Conditional | 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 dalam 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 platform tertentu. Setiap objek |
image |
Image |
Opsional | Gambar yang terkait dengan tabel. |
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 akan 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 lengkap dengan membuat tema kustom untuk project Action Anda. Penyesuaian ini dapat berguna untuk menentukan tampilan dan nuansa unik pada percakapan saat pengguna memanggil Action di platform dengan layar.
Untuk menetapkan tema respons kustom, lakukan hal berikut:
- Di Actions console, buka Develop > Theme biasanya.
- Tetapkan salah satu atau semua hal berikut:
- Warna latar belakang: Digunakan sebagai latar belakang kartu Anda. Secara umum, gunakan warna terang untuk latar belakang agar konten kartu lebih mudah dibaca.
- Warna primer: Warna utama untuk teks header dan elemen antarmuka kartu Anda. Secara umum, gunakan warna primer yang lebih gelap agar lebih kontras dengan warna latar belakang.
- Jenis font: Menjelaskan jenis font yang digunakan untuk judul dan elemen teks penting lainnya.
- Gaya sudut gambar: Mengubah tampilan sudut kartu.
- Gambar latar belakang: Gambar kustom untuk digunakan sebagai pengganti warna latar belakang. Berikan dua gambar yang berbeda saat perangkat platform dalam mode lanskap atau potret. Jika Anda menggunakan gambar latar, warna utama disetel ke putih.
- Klik Simpan.
![Menyesuaikan tema di konsol Actions](https://developers.google.cn/static/assistant/conversational/images/theme-customization.png?authuser=6&hl=id)