Jelajahi di Dialogflow
Klik Continue untuk mengimpor contoh Respons kami di Dialogflow. Kemudian, ikuti langkah-langkah di bawah ini untuk men-deploy dan menguji sampel:
- Masukkan nama agen dan buat agen Dialogflow baru untuk contoh.
- Setelah agen selesai mengimpor, klik Buka agen.
- Dari menu navigasi utama, buka Fulfillment.
- Aktifkan Inline Editor, lalu klik Deploy. Editor berisi kode contoh.
- Dari menu navigasi utama, buka Integrations, lalu klik Google Assistant.
- Di jendela modal yang muncul, aktifkan Perubahan pratinjau otomatis, lalu klik Uji untuk membuka simulator Action.
- Pada simulator, masukkan
Talk to my test appuntuk menguji sampel.
Gunakan respons lengkap jika Anda ingin menampilkan elemen visual untuk meningkatkan interaksi pengguna dengan Action Anda. Elemen visual ini dapat memberikan petunjuk tentang cara untuk melanjutkan percakapan.
Respons yang beragam dapat muncul di pengalaman layar saja atau audio dan layar. Class tersebut dapat berisi komponen berikut:
- Satu atau dua respons sederhana (balon chat).
- Kartu dasar opsional.
- Chip saran opsional.
- Chip link-out opsional.
Anda juga dapat meninjau panduan desain percakapan kami untuk mempelajari cara menyertakan elemen visual ini dalam Action Anda.
Properti
Respons kaya memiliki persyaratan dan properti opsional berikut yang dapat Anda konfigurasi:
- Didukung pada platform dengan kemampuan
actions.capability.SCREEN_OUTPUT. - Item pertama dalam respons kaya harus berupa respons sederhana.
- Maksimal dua respons sederhana.
- Maksimal satu kartu dasar atau
StructuredResponse. - Maksimal 8 chip saran.
- Chip saran tidak diizinkan di
FinalResponse - Menautkan ke web dari layar smart saat ini tidak didukung.
Bagian berikut menunjukkan cara membuat berbagai jenis respons multimedia.
Kartu dasar
Kartu dasar menampilkan informasi yang dapat mencakup hal berikut:
- Gambar
- Judul
- Subtitel
- Isi teks
- Tombol link
- Border
Gunakan kartu dasar terutama untuk tujuan tampilan. Link tersebut dirancang agar ringkas, menyajikan informasi utama (atau ringkasan) kepada pengguna, dan memungkinkan pengguna mempelajari lebih lanjut jika Anda memilihnya (menggunakan link web).
Pada umumnya, Anda harus menambahkan chip saran di bawah kartu untuk melanjutkan atau mengubah percakapan.
Hindari mengulangi informasi yang ditampilkan dalam kartu dalam balon chat dengan segala biaya.
Properti
Jenis respons kartu dasar memiliki persyaratan dan properti opsional berikut yang dapat Anda konfigurasi:
- Didukung pada platform dengan kemampuan
actions.capability.SCREEN_OUTPUT. - Teks berformat (wajib jika tidak ada gambar)
- Teks biasa secara default.
- Tidak boleh berisi link.
- Batas 10 baris dengan gambar, batas 15 baris tanpa gambar. Jumlah karakternya sekitar 500 (dengan gambar) atau 750 (tanpa gambar). Ponsel dengan layar yang lebih kecil juga memotong teks lebih awal dari ponsel dengan layar yang lebih besar. Jika teks berisi terlalu banyak baris, teks akan dipotong di jeda kata terakhir dengan elipsis.
- subset terbatas dari markdown didukung:
- Baris baru dengan spasi ganda diikuti dengan \n
**bold***italics*
- Gambar (wajib jika tidak ada teks yang diformat)
- Semua gambar harus setinggi 192 dp.
- Jika rasio aspek gambar berbeda dengan layar, gambar akan dipusatkan dengan batang abu-abu di tepi vertikal atau horizontal.
- Sumber gambar adalah URL.
- GIF Gerakan diizinkan.
Opsional
- Judul
- Teks biasa.
- Font dan ukuran tetap.
- Maksimal satu baris; karakter tambahan terpotong.
- Tinggi kartu diciutkan jika tidak ada judul yang ditentukan.
- Subtitel
- Teks biasa.
- Font dan ukuran font tetap.
- Maksimal satu baris; karakter tambahan terpotong.
- Tinggi kartu diciutkan jika tidak ada subtitel yang ditentukan.
- Tombol tautkan
- Judul link wajib diisi
- Maksimal satu link
- Link ke situs di luar domain developer diizinkan.
- Teks link tidak boleh menyesatkan. Hal ini diperiksa dalam proses persetujuan.
- Kartu dasar tidak memiliki kemampuan interaksi tanpa link. Mengetuk link akan mengarahkan pengguna ke link tersebut, sementara bagian utama kartu tetap tidak aktif.
- Batas
- Batas antara kartu dan penampung gambar dapat disesuaikan untuk menyesuaikan penyajian kartu dasar Anda.
- Dikonfigurasi dengan menetapkan properti string JSON
imageDisplayOptions
Kode contoh
Node.js
app.intent('Basic Card', (conv) => {
if (!conv.screen) {
conv.ask('Sorry, try this on a screen device or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask(`Here's an example of a basic card.`);
conv.ask(new BasicCard({
text: `This is a basic card. Text in a basic card can include "quotes" and
most other unicode characters including emojis. Basic cards also support
some markdown formatting like *emphasis* or _italics_, **strong** or
__bold__, and ***bold itallic*** or ___strong emphasis___ as well as other
things like line \nbreaks`, // Note the two spaces before '\n' required for
// a line break to be rendered in the card.
subtitle: 'This is a subtitle',
title: 'Title: this is a title',
buttons: new Button({
title: 'This is a button',
url: 'https://assistant.google.com/',
}),
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Image alternate text',
}),
display: 'CROPPED',
}));
conv.ask('Which response would you like to see next?');
});
Java
@ForIntent("Basic Card")
public ActionResponse basicCard(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
// Prepare formatted text for card
String text =
"This is a basic card. Text in a basic card can include \"quotes\" and\n"
+ " most other unicode characters including emoji \uD83D\uDCF1. Basic cards also support\n"
+ " some markdown formatting like *emphasis* or _italics_, **strong** or\n"
+ " __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n"
+ " things like line \\nbreaks"; // Note the two spaces before '\n' required for
// a line break to be rendered in the card.
responseBuilder
.add("Here's an example of a basic card.")
.add(
new BasicCard()
.setTitle("Title: this is a title")
.setSubtitle("This is a subtitle")
.setFormattedText(text)
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Image alternate text"))
.setImageDisplayOptions("CROPPED")
.setButtons(
new ArrayList<Button>(
Arrays.asList(
new Button()
.setTitle("This is a Button")
.setOpenUrlAction(
new OpenUrlAction().setUrl("https://assistant.google.com"))))))
.add("Which response would you like to see next?");
return responseBuilder.build();
}
Node.js
if (!conv.screen) {
conv.ask('Sorry, try this on a screen device or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask(`Here's an example of a basic card.`);
conv.ask(new BasicCard({
text: `This is a basic card. Text in a basic card can include "quotes" and
most other unicode characters including emojis. Basic cards also support
some markdown formatting like *emphasis* or _italics_, **strong** or
__bold__, and ***bold itallic*** or ___strong emphasis___ as well as other
things like line \nbreaks`, // Note the two spaces before '\n' required for
// a line break to be rendered in the card.
subtitle: 'This is a subtitle',
title: 'Title: this is a title',
buttons: new Button({
title: 'This is a button',
url: 'https://assistant.google.com/',
}),
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Image alternate text',
}),
display: 'CROPPED',
}));
conv.ask('Which response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
// Prepare formatted text for card
String text =
"This is a basic card. Text in a basic card can include \"quotes\" and\n"
+ " most other unicode characters including emoji \uD83D\uDCF1. Basic cards also support\n"
+ " some markdown formatting like *emphasis* or _italics_, **strong** or\n"
+ " __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n"
+ " things like line \\nbreaks"; // Note the two spaces before '\n' required for
// a line break to be rendered in the card.
responseBuilder
.add("Here's an example of a basic card.")
.add(
new BasicCard()
.setTitle("Title: this is a title")
.setSubtitle("This is a subtitle")
.setFormattedText(text)
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Image alternate text"))
.setImageDisplayOptions("CROPPED")
.setButtons(
new ArrayList<Button>(
Arrays.asList(
new Button()
.setTitle("This is a Button")
.setOpenUrlAction(
new OpenUrlAction().setUrl("https://assistant.google.com"))))))
.add("Which response would you like to see next?");
return responseBuilder.build();
JSON
Perhatikan bahwa JSON di bawah menjelaskan respons webhook.
{
"payload": {
"google": {
"expectUserResponse": true,
"richResponse": {
"items": [
{
"simpleResponse": {
"textToSpeech": "Here's an example of a basic card."
}
},
{
"basicCard": {
"title": "Title: this is a title",
"subtitle": "This is a subtitle",
"formattedText": "This is a basic card. Text in a basic card can include \"quotes\" and\n most other unicode characters including emojis. Basic cards also support\n some markdown formatting like *emphasis* or _italics_, **strong** or\n __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n things like line \nbreaks",
"image": {
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
"accessibilityText": "Image alternate text"
},
"buttons": [
{
"title": "This is a button",
"openUrlAction": {
"url": "https://assistant.google.com/"
}
}
],
"imageDisplayOptions": "CROPPED"
}
},
{
"simpleResponse": {
"textToSpeech": "Which response would you like to see next?"
}
}
]
}
}
}
}
JSON
Perhatikan bahwa JSON di bawah menjelaskan respons webhook.
{
"expectUserResponse": true,
"expectedInputs": [
{
"possibleIntents": [
{
"intent": "actions.intent.TEXT"
}
],
"inputPrompt": {
"richInitialPrompt": {
"items": [
{
"simpleResponse": {
"textToSpeech": "Here's an example of a basic card."
}
},
{
"basicCard": {
"title": "Title: this is a title",
"subtitle": "This is a subtitle",
"formattedText": "This is a basic card. Text in a basic card can include \"quotes\" and\n most other unicode characters including emojis. Basic cards also support\n some markdown formatting like *emphasis* or _italics_, **strong** or\n __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n things like line \nbreaks",
"image": {
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
"accessibilityText": "Image alternate text"
},
"buttons": [
{
"title": "This is a button",
"openUrlAction": {
"url": "https://assistant.google.com/"
}
}
],
"imageDisplayOptions": "CROPPED"
}
},
{
"simpleResponse": {
"textToSpeech": "Which response would you like to see next?"
}
}
]
}
}
}
]
}
Carousel penjelajahan
Carousel penjelajahan adalah respons lengkap yang memungkinkan pengguna men-scroll secara vertikal dan memilih kartu dalam koleksi. Carousel penjelajahan didesain khusus untuk konten web dengan membuka kartu yang dipilih di browser web (atau browser AMP jika semua kartu mendukung AMP). Carousel penjelajahan juga tetap ada di platform Asisten pengguna untuk menjelajah nanti.
Properti
Jenis respons carousel penjelajahan memiliki persyaratan dan properti opsional berikut yang dapat Anda konfigurasi:
- Didukung pada platform yang memiliki kemampuan
actions.capability.SCREEN_OUTPUTdanactions.capability.WEB_BROWSER. Jenis respons ini saat ini tidak tersedia di layar smart. - Carousel penjelajahan
- Maksimum sepuluh ubin.
- Minimal dua ubin.
- Kartu di carousel harus semuanya tertaut ke konten web (konten AMP
direkomendasikan).
- Agar pengguna diarahkan ke AMP viewer,
urlHintTypepada kartu konten AMP harus ditetapkan ke "AMP_CONTENT".
- Agar pengguna diarahkan ke AMP viewer,
- Menjelajahi kartu carousel
- Konsistensi kartu (wajib):
- Semua kartu dalam carousel penjelajahan harus memiliki komponen yang sama. Misalnya, jika satu kartu memiliki kolom gambar, kartu lainnya di carousel juga harus memiliki kolom gambar.
- Jika semua kartu di carousel penjelajahan terhubung ke konten yang mendukung AMP, pengguna akan diarahkan ke browser AMP dengan fungsi tambahan. Jika ada kartu yang ditautkan ke konten non-AMP, semua kartu akan mengarahkan pengguna ke browser web.
- Gambar (opsional)
- Gambar dipaksa memiliki tinggi 128 dp x lebar 232 dp.
- Jika rasio aspek gambar tidak cocok dengan kotak pembatas gambar, gambar akan dipusatkan dengan batang di kedua sisinya. Pada smartphone, gambar dipusatkan dalam persegi dengan sudut membulat.
- Jika link gambar rusak, gambar placeholder akan digunakan.
- Teks alternatif diperlukan pada gambar.
- Judul (wajib diisi)
- Opsi pemformatan yang sama seperti kartu teks dasar.
- Judul harus unik (untuk mendukung pemilihan suara).
- Maksimum dua baris teks.
- Ukuran font 16 sp.
- Deskripsi (opsional)
- Opsi pemformatan yang sama seperti kartu teks dasar.
- Maksimum empat baris teks.
- Dipotong dengan elipsis (...)
- Ukuran font 14sp, warna abu-abu.
- Footer (opsional)
- Font dan ukuran font tetap.
- Maksimum satu baris teks.
- Dipotong dengan elipsis (...)
- Ditambatkan di bagian bawah, sehingga kartu dengan baris teks isi yang lebih sedikit mungkin memiliki ruang putih di atas sub-teks.
- Ukuran font 14sp, warna abu-abu.
- Konsistensi kartu (wajib):
- Interaksi
- Pengguna dapat men-scroll secara vertikal untuk melihat item.
- Kartu ketuk: Mengetuk item akan membawa pengguna ke browser, menampilkan halaman tertaut.
- Input suara
- Perilaku mikrofon
- Mikrofon tidak akan terbuka kembali saat carousel penjelajahan dikirim ke pengguna.
- Pengguna masih dapat mengetuk mikrofon atau memanggil Asisten ("Ok Google") untuk membuka kembali mikrofon.
- Perilaku mikrofon
Panduan
Secara default, mikrofon tetap tertutup setelah carousel penjelajahan dikirim. Jika Anda ingin melanjutkan percakapan setelahnya, sebaiknya tambahkan chip saran di bawah carousel.
Jangan mengulangi opsi yang ditampilkan dalam daftar sebagai chip saran. Chip dalam konteks ini digunakan untuk mengubah percakapan (bukan untuk pemilihan pilihan).
Sama seperti daftar, balon chat yang menyertai kartu carousel adalah sebagian audio (TTS/SSML). Audio (TTS/SSML) di sini mengintegrasikan kartu pertama di carousel, dan juga sangat tidak disarankan untuk membaca semua elemen dari carousel. Sebaiknya sebutkan item pertama dan alasannya (misalnya, item yang paling populer, paling baru dibeli, dan paling dibicarakan).
Kode contoh
Node.js
app.intent('Browsing Carousel', (conv) => {
if (!conv.screen
|| !conv.surface.capabilities.has('actions.capability.WEB_BROWSER')) {
conv.ask('Sorry, try this on a phone or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask(`Here's an example of a browsing carousel.`);
conv.ask(new BrowseCarousel({
items: [
new BrowseCarouselItem({
title: 'Title of item 1',
url: 'https://example.com',
description: 'Description of item 1',
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Image alternate text',
}),
footer: 'Item 1 footer',
}),
new BrowseCarouselItem({
title: 'Title of item 2',
url: 'https://example.com',
description: 'Description of item 2',
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Image alternate text',
}),
footer: 'Item 2 footer',
}),
],
}));
});
Java
@ForIntent("Browsing Carousel")
public ActionResponse browseCarousel(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())
|| !request.hasCapability(Capability.WEB_BROWSER.getValue())) {
return responseBuilder
.add("Sorry, try this on a phone or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("Here's an example of a browsing carousel.")
.add(
new CarouselBrowse()
.setItems(
new ArrayList<CarouselBrowseItem>(
Arrays.asList(
new CarouselBrowseItem()
.setTitle("Title of item 1")
.setDescription("Description of item 1")
.setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Image alternate text"))
.setFooter("Item 1 footer"),
new CarouselBrowseItem()
.setTitle("Title of item 2")
.setDescription("Description of item 2")
.setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Image alternate text"))
.setFooter("Item 2 footer")))));
return responseBuilder.build();
}
Node.js
if (!conv.screen
|| !conv.surface.capabilities.has('actions.capability.WEB_BROWSER')) {
conv.ask('Sorry, try this on a phone or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask(`Here's an example of a browsing carousel.`);
conv.ask(new BrowseCarousel({
items: [
new BrowseCarouselItem({
title: 'Title of item 1',
url: 'https://example.com',
description: 'Description of item 1',
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Image alternate text',
}),
footer: 'Item 1 footer',
}),
new BrowseCarouselItem({
title: 'Title of item 2',
url: 'https://example.com',
description: 'Description of item 2',
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Image alternate text',
}),
footer: 'Item 2 footer',
}),
],
}));
Java
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())
|| !request.hasCapability(Capability.WEB_BROWSER.getValue())) {
return responseBuilder
.add("Sorry, try this on a phone or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("Here's an example of a browsing carousel.")
.add(
new CarouselBrowse()
.setItems(
new ArrayList<CarouselBrowseItem>(
Arrays.asList(
new CarouselBrowseItem()
.setTitle("Title of item 1")
.setDescription("Description of item 1")
.setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Image alternate text"))
.setFooter("Item 1 footer"),
new CarouselBrowseItem()
.setTitle("Title of item 2")
.setDescription("Description of item 2")
.setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Image alternate text"))
.setFooter("Item 2 footer")))));
return responseBuilder.build();
JSON
Perhatikan bahwa JSON di bawah menjelaskan respons webhook.
{
"payload": {
"google": {
"expectUserResponse": true,
"richResponse": {
"items": [
{
"simpleResponse": {
"textToSpeech": "Here's an example of a browsing carousel."
}
},
{
"carouselBrowse": {
"items": [
{
"title": "Title of item 1",
"openUrlAction": {
"url": "https://example.com"
},
"description": "Description of item 1",
"footer": "Item 1 footer",
"image": {
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
"accessibilityText": "Image alternate text"
}
},
{
"title": "Title of item 2",
"openUrlAction": {
"url": "https://example.com"
},
"description": "Description of item 2",
"footer": "Item 2 footer",
"image": {
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
"accessibilityText": "Image alternate text"
}
}
]
}
}
]
}
}
}
}
JSON
Perhatikan bahwa JSON di bawah menjelaskan respons webhook.
{
"expectUserResponse": true,
"expectedInputs": [
{
"inputPrompt": {
"richInitialPrompt": {
"items": [
{
"simpleResponse": {
"textToSpeech": "Here's an example of a browsing carousel."
}
},
{
"carouselBrowse": {
"items": [
{
"description": "Description of item 1",
"footer": "Item 1 footer",
"image": {
"accessibilityText": "Image alternate text",
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png"
},
"openUrlAction": {
"url": "https://example.com"
},
"title": "Title of item 1"
},
{
"description": "Description of item 2",
"footer": "Item 2 footer",
"image": {
"accessibilityText": "Image alternate text",
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png"
},
"openUrlAction": {
"url": "https://example.com"
},
"title": "Title of item 2"
}
]
}
}
]
}
},
"possibleIntents": [
{
"intent": "actions.intent.TEXT"
}
]
}
]
}
Menangani item yang dipilih
Tidak ada fulfillment tindak lanjut yang diperlukan untuk interaksi pengguna dengan item carousel jelajah, karena carousel menangani handoff browser. Perlu diingat bahwa mikrofon tidak akan dibuka kembali setelah pengguna berinteraksi dengan item carousel penjelajahan, jadi Anda harus mengakhiri percakapan atau menyertakan chip saran dalam respons Anda sesuai dengan panduan di atas.
Chip saran
Gunakan chip saran untuk mengisyaratkan respons guna melanjutkan atau mengubah percakapan. Jika selama percakapan ada pesan ajakan (CTA) utama, pertimbangkan untuk mencantumkannya sebagai chip saran pertama.
Jika memungkinkan, Anda harus memasukkan satu saran utama sebagai bagian dari balon chat, tetapi lakukan hanya jika respons atau percakapan chat terasa alami.
Properti
Chip saran memiliki persyaratan dan properti opsional berikut yang dapat Anda konfigurasi:
- Didukung pada platform dengan kemampuan
actions.capability.SCREEN_OUTPUT. - Untuk menautkan chip saran ke web, platform juga harus memiliki
kemampuan
actions.capability.WEB_BROWSER. Kemampuan ini saat ini belum tersedia di layar smart. - Maksimum delapan chip.
- Panjang teks maksimum 25 karakter.
Hanya mendukung teks biasa.
Kode contoh
Node.js
app.intent('Suggestion Chips', (conv) => {
if (!conv.screen) {
conv.ask('Chips can be demonstrated on screen devices.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('These are suggestion chips.');
conv.ask(new Suggestions('Suggestion 1'));
conv.ask(new Suggestions(['Suggestion 2', 'Suggestion 3']));
conv.ask(new LinkOutSuggestion({
name: 'Suggestion Link',
url: 'https://assistant.google.com/',
}));
conv.ask('Which type of response would you like to see next?'); ;
});
Java
@ForIntent("Suggestion Chips")
public ActionResponse suggestionChips(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("These are suggestion chips.")
.addSuggestions(new String[] {"Suggestion 1", "Suggestion 2", "Suggestion 3"})
.add(
new LinkOutSuggestion()
.setDestinationName("Suggestion Link")
.setUrl("https://assistant.google.com/"))
.add("Which type of response would you like to see next?");
return responseBuilder.build();
}
Node.js
if (!conv.screen) {
conv.ask('Chips can be demonstrated on screen devices.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('These are suggestion chips.');
conv.ask(new Suggestions('Suggestion 1'));
conv.ask(new Suggestions(['Suggestion 2', 'Suggestion 3']));
conv.ask(new LinkOutSuggestion({
name: 'Suggestion Link',
url: 'https://assistant.google.com/',
}));
conv.ask('Which type of response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("These are suggestion chips.")
.addSuggestions(new String[] {"Suggestion 1", "Suggestion 2", "Suggestion 3"})
.add(
new LinkOutSuggestion()
.setDestinationName("Suggestion Link")
.setUrl("https://assistant.google.com/"))
.add("Which type of response would you like to see next?");
return responseBuilder.build();
JSON
Perhatikan bahwa JSON di bawah menjelaskan respons webhook.
{
"payload": {
"google": {
"expectUserResponse": true,
"richResponse": {
"items": [
{
"simpleResponse": {
"textToSpeech": "These are suggestion chips."
}
},
{
"simpleResponse": {
"textToSpeech": "Which type of response would you like to see next?"
}
}
],
"suggestions": [
{
"title": "Suggestion 1"
},
{
"title": "Suggestion 2"
},
{
"title": "Suggestion 3"
}
],
"linkOutSuggestion": {
"destinationName": "Suggestion Link",
"url": "https://assistant.google.com/"
}
}
}
}
}
JSON
Perhatikan bahwa JSON di bawah menjelaskan respons webhook.
{
"expectUserResponse": true,
"expectedInputs": [
{
"possibleIntents": [
{
"intent": "actions.intent.TEXT"
}
],
"inputPrompt": {
"richInitialPrompt": {
"items": [
{
"simpleResponse": {
"textToSpeech": "These are suggestion chips."
}
},
{
"simpleResponse": {
"textToSpeech": "Which type of response would you like to see next?"
}
}
],
"suggestions": [
{
"title": "Suggestion 1"
},
{
"title": "Suggestion 2"
},
{
"title": "Suggestion 3"
}
],
"linkOutSuggestion": {
"destinationName": "Suggestion Link",
"url": "https://assistant.google.com/"
}
}
}
}
]
}
Respons media
Respons media memungkinkan Action Anda memutar konten audio dengan durasi pemutaran lebih lama dari batas SSML 240 detik. Komponen utama respons media adalah kartu trek tunggal. Kartu ini memungkinkan pengguna melakukan operasi berikut:
- Putar ulang 10 detik terakhir.
- Maju selama 30 detik.
- Melihat total panjang konten media.
- Melihat indikator kemajuan untuk pemutaran audio.
- Melihat waktu pemutaran yang berlalu.
Tanggapan media mendukung kontrol audio berikut untuk interaksi suara:
- “Ok Google, putar”.
- “Ok Google, jeda”.
- “Ok Google, berhenti”.
- “Ok Google, mulai dari awal.”
Pengguna juga dapat mengontrol volume dengan mengucapkan frasa seperti, "Ok Google, naikkan volume" atau "Ok Google, setel volume ke 50 persen". Intent dalam Action Anda akan diprioritaskan jika menangani frasa pelatihan yang serupa. Izinkan Asisten menangani permintaan pengguna ini kecuali jika Action Anda memiliki alasan khusus.
Properti
Respons media memiliki persyaratan dan properti opsional berikut yang dapat Anda konfigurasi:
- Didukung pada platform dengan kemampuan
actions.capability.MEDIA_RESPONSE_AUDIO. - Audio untuk pemutaran harus dalam file
.mp3yang diformat dengan benar. Live streaming tidak didukung. - File media untuk pemutaran harus ditentukan sebagai URL HTTPS.
- Gambar (opsional)
- Anda dapat memilih untuk menyertakan ikon atau gambar.
- Ikon
- Ikon Anda akan muncul sebagai thumbnail tanpa bingkai di sebelah kanan kartu pemutar media.
- Ukuran harus 36 x 36 dp. Gambar berukuran lebih besar akan diubah ukurannya agar sesuai.
- Gambar
- Tinggi penampung gambar akan sebesar 192 dp.
- Gambar Anda akan muncul di bagian atas kartu pemutar media, dan memenuhi lebar penuh kartu. Sebagian besar gambar akan muncul dengan batang di sepanjang bagian atas atau samping.
- GIF Gerakan diizinkan.
- Anda harus menentukan sumber gambar sebagai URL.
- Teks alternatif diperlukan pada semua gambar.
Perilaku di platform
Respons media didukung di ponsel Android dan Google Home. Perilaku respons media bergantung pada platform tempat pengguna berinteraksi dengan Action Anda.
Di ponsel Android, pengguna dapat melihat respons media saat salah satu kondisi berikut terpenuhi:
- Asisten Google ada di latar depan, dan layar ponsel aktif.
- Pengguna keluar dari Asisten Google saat audio diputar dan kembali ke Asisten Google dalam waktu 10 menit setelah pemutaran selesai. Saat kembali ke Asisten Google, pengguna akan melihat kartu media dan chip saran.
- Asisten memungkinkan pengguna mengontrol volume perangkat dalam Action percakapan Anda dengan mengucapkan hal-hal seperti "naikkan volume" atau "setel volume ke 50 persen". Jika Anda memiliki intent yang menangani frasa pelatihan serupa, intent Anda akan diprioritaskan. Sebaiknya izinkan Asisten menangani permintaan pengguna ini kecuali jika Action Anda memiliki alasan khusus.
Kontrol media tersedia saat ponsel terkunci. Di Android, kontrol juga muncul di area notifikasi.
Kode contoh
Contoh kode berikut menunjukkan cara memperbarui respons lengkap untuk menyertakan media.
Node.js
app.intent('Media Response', (conv) => {
if (!conv.surface.capabilities
.has('actions.capability.MEDIA_RESPONSE_AUDIO')) {
conv.ask('Sorry, this device does not support audio playback.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('This is a media response example.');
conv.ask(new MediaObject({
name: 'Jazz in Paris',
url: 'https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3',
description: 'A funky Jazz tune',
icon: new Image({
url: 'https://storage.googleapis.com/automotive-media/album_art.jpg',
alt: 'Album cover of an ocean view',
}),
}));
conv.ask(new Suggestions(['Basic Card', 'List',
'Carousel', 'Browsing Carousel']));
});
Java
@ForIntent("Media Response")
public ActionResponse mediaResponse(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.MEDIA_RESPONSE_AUDIO.getValue())) {
return responseBuilder
.add("Sorry, this device does not support audio playback.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("This is a media response example.")
.add(
new MediaResponse()
.setMediaObjects(
new ArrayList<MediaObject>(
Arrays.asList(
new MediaObject()
.setName("Jazz in Paris")
.setDescription("A funky Jazz tune")
.setContentUrl(
"https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3")
.setIcon(
new Image()
.setUrl(
"https://storage.googleapis.com/automotive-media/album_art.jpg")
.setAccessibilityText("Album cover of an ocean view")))))
.setMediaType("AUDIO"))
.addSuggestions(new String[] {"Basic Card", "List", "Carousel", "Browsing Carousel"});
return responseBuilder.build();
}
Node.js
if (!conv.surface.capabilities
.has('actions.capability.MEDIA_RESPONSE_AUDIO')) {
conv.ask('Sorry, this device does not support audio playback.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('This is a media response example.');
conv.ask(new MediaObject({
name: 'Jazz in Paris',
url: 'https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3',
description: 'A funky Jazz tune',
icon: new Image({
url: 'https://storage.googleapis.com/automotive-media/album_art.jpg',
alt: 'Album cover of an ocean view',
}),
}));
conv.ask(new Suggestions(['Basic Card', 'List',
'Carousel', 'Browsing Carousel']));
Java
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.MEDIA_RESPONSE_AUDIO.getValue())) {
return responseBuilder
.add("Sorry, this device does not support audio playback.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("This is a media response example.")
.add(
new MediaResponse()
.setMediaObjects(
new ArrayList<MediaObject>(
Arrays.asList(
new MediaObject()
.setName("Jazz in Paris")
.setDescription("A funky Jazz tune")
.setContentUrl(
"https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3")
.setIcon(
new Image()
.setUrl(
"https://storage.googleapis.com/automotive-media/album_art.jpg")
.setAccessibilityText("Album cover of an ocean view")))))
.setMediaType("AUDIO"))
.addSuggestions(new String[] {"Basic Card", "List", "Carousel", "Browsing Carousel"});
return responseBuilder.build();
JSON
Perhatikan bahwa JSON di bawah menjelaskan respons webhook.
{
"payload": {
"google": {
"expectUserResponse": true,
"richResponse": {
"items": [
{
"simpleResponse": {
"textToSpeech": "This is a media response example."
}
},
{
"mediaResponse": {
"mediaType": "AUDIO",
"mediaObjects": [
{
"contentUrl": "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3",
"description": "A funky Jazz tune",
"icon": {
"url": "https://storage.googleapis.com/automotive-media/album_art.jpg",
"accessibilityText": "Album cover of an ocean view"
},
"name": "Jazz in Paris"
}
]
}
}
],
"suggestions": [
{
"title": "Basic Card"
},
{
"title": "List"
},
{
"title": "Carousel"
},
{
"title": "Browsing Carousel"
}
]
}
}
}
}
JSON
Perhatikan bahwa JSON di bawah menjelaskan respons webhook.
{
"expectUserResponse": true,
"expectedInputs": [
{
"possibleIntents": [
{
"intent": "actions.intent.TEXT"
}
],
"inputPrompt": {
"richInitialPrompt": {
"items": [
{
"simpleResponse": {
"textToSpeech": "This is a media response example."
}
},
{
"mediaResponse": {
"mediaType": "AUDIO",
"mediaObjects": [
{
"contentUrl": "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3",
"description": "A funky Jazz tune",
"icon": {
"url": "https://storage.googleapis.com/automotive-media/album_art.jpg",
"accessibilityText": "Album cover of an ocean view"
},
"name": "Jazz in Paris"
}
]
}
}
],
"suggestions": [
{
"title": "Basic Card"
},
{
"title": "List"
},
{
"title": "Carousel"
},
{
"title": "Browsing Carousel"
}
]
}
}
}
]
}
Panduan
Respons Anda harus menyertakan mediaResponse dengan mediaType AUDIO dan
berisi mediaObject dalam array item respons kaya. Respons
media mendukung satu objek media. Objek media harus menyertakan URL
konten dari file audio. Objek media secara opsional dapat menyertakan nama, sub-teks
(deskripsi), dan ikon atau URL gambar.
Di ponsel dan Google Home, saat Action Anda menyelesaikan pemutaran audio,
Asisten Google akan memeriksa apakah respons medianya adalah FinalResponse.
Jika tidak, metode ini akan mengirimkan callback ke fulfillment Anda, sehingga Anda dapat merespons
pengguna.
Action Anda harus menyertakan chip saran jika
respons bukan FinalResponse.
Menangani callback setelah pemutaran selesai
Action Anda harus menangani intent actions.intent.MEDIA_STATUS untuk meminta
pengguna melakukan tindak lanjut (misalnya, memutar lagu lain). Action Anda menerima
callback ini setelah pemutaran media selesai. Dalam callback, argumen MEDIA_STATUS berisi informasi status tentang media saat ini. Nilai
statusnya akan berupa FINISHED atau STATUS_UNSPECIFIED.
Menggunakan Dialogflow
Jika ingin melakukan cabang percakapan di Dialogflow, Anda harus
menyiapkan konteks input actions_capability_media_response_audio pada
intent untuk memastikannya hanya dipicu pada platform yang mendukung respons media.
Membangun fulfillment Anda
Cuplikan kode di bawah ini menunjukkan cara menulis kode fulfillment untuk
Action Anda. Jika Anda menggunakan Dialogflow, ganti actions.intent.MEDIA_STATUS
dengan nama tindakan yang ditentukan dalam intent yang menerima
peristiwa actions_intent_MEDIA_STATUS, (misalnya, "media.status.update").
Node.js
app.intent('Media Status', (conv) => {
const mediaStatus = conv.arguments.get('MEDIA_STATUS');
let response = 'Unknown media status received.';
if (mediaStatus && mediaStatus.status === 'FINISHED') {
response = 'Hope you enjoyed the tune!';
}
conv.ask(response);
conv.ask('Which response would you like to see next?');
});
Java
@ForIntent("Media Status")
public ActionResponse mediaStatus(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
String mediaStatus = request.getMediaStatus();
String response = "Unknown media status received.";
if (mediaStatus != null && mediaStatus.equals("FINISHED")) {
response = "Hope you enjoyed the tune!";
}
responseBuilder.add(response);
responseBuilder.add("Which response would you like to see next?");
return responseBuilder.build();
}
Node.js
app.intent('actions.intent.MEDIA_STATUS', (conv) => {
const mediaStatus = conv.arguments.get('MEDIA_STATUS');
let response = 'Unknown media status received.';
if (mediaStatus && mediaStatus.status === 'FINISHED') {
response = 'Hope you enjoyed the tune!';
}
conv.ask(response);
conv.ask('Which response would you like to see next?');
});
Java
@ForIntent("actions.intent.MEDIA_STATUS")
public ActionResponse mediaStatus(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
String mediaStatus = request.getMediaStatus();
String response = "Unknown media status received.";
if (mediaStatus != null && mediaStatus.equals("FINISHED")) {
response = "Hope you enjoyed the tune!";
}
responseBuilder.add(response);
responseBuilder.add("Which response would you like to see next?");
return responseBuilder.build();
}
JSON
Perhatikan bahwa JSON di bawah menjelaskan permintaan webhook.
{
"responseId": "151b68df-98de-41fb-94b5-caeace90a7e9-21947381",
"queryResult": {
"queryText": "actions_intent_MEDIA_STATUS",
"parameters": {},
"allRequiredParamsPresent": true,
"fulfillmentText": "Webhook failed for intent: Media Status",
"fulfillmentMessages": [
{
"text": {
"text": [
"Webhook failed for intent: Media Status"
]
}
}
],
"outputContexts": [
{
"name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_media_response_audio"
},
{
"name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_account_linking"
},
{
"name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_web_browser"
},
{
"name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_screen_output"
},
{
"name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_audio_output"
},
{
"name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/google_assistant_input_type_voice"
},
{
"name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_intent_media_status",
"parameters": {
"MEDIA_STATUS": {
"@type": "type.googleapis.com/google.actions.v2.MediaStatus",
"status": "FINISHED"
}
}
}
],
"intent": {
"name": "projects/df-responses-kohler/agent/intents/068b27d3-c148-4044-bfab-dfa37eebd90d",
"displayName": "Media Status"
},
"intentDetectionConfidence": 1,
"languageCode": "en"
},
"originalDetectIntentRequest": {
"source": "google",
"version": "2",
"payload": {
"user": {
"locale": "en-US",
"lastSeen": "2019-08-04T23:57:15Z",
"userVerificationStatus": "VERIFIED"
},
"conversation": {
"conversationId": "ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA",
"type": "ACTIVE",
"conversationToken": "[]"
},
"inputs": [
{
"intent": "actions.intent.MEDIA_STATUS",
"rawInputs": [
{
"inputType": "VOICE"
}
],
"arguments": [
{
"name": "MEDIA_STATUS",
"extension": {
"@type": "type.googleapis.com/google.actions.v2.MediaStatus",
"status": "FINISHED"
}
}
]
}
],
"surface": {
"capabilities": [
{
"name": "actions.capability.MEDIA_RESPONSE_AUDIO"
},
{
"name": "actions.capability.ACCOUNT_LINKING"
},
{
"name": "actions.capability.WEB_BROWSER"
},
{
"name": "actions.capability.SCREEN_OUTPUT"
},
{
"name": "actions.capability.AUDIO_OUTPUT"
}
]
},
"isInSandbox": true,
"availableSurfaces": [
{
"capabilities": [
{
"name": "actions.capability.WEB_BROWSER"
},
{
"name": "actions.capability.AUDIO_OUTPUT"
},
{
"name": "actions.capability.SCREEN_OUTPUT"
}
]
}
],
"requestType": "SIMULATOR"
}
},
"session": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA"
}
JSON
Perhatikan bahwa JSON di bawah menjelaskan permintaan webhook.
{
"user": {
"locale": "en-US",
"lastSeen": "2019-08-06T07:38:40Z",
"userVerificationStatus": "VERIFIED"
},
"conversation": {
"conversationId": "ABwppHGcqunXh1M6IE0lu2sVqXdpJfdpC5FWMkMSXQskK1nzb4IkSUSRqQzoEr0Ly0z_G3mwyZlk5rFtd1w",
"type": "NEW"
},
"inputs": [
{
"intent": "actions.intent.MEDIA_STATUS",
"rawInputs": [
{
"inputType": "VOICE"
}
],
"arguments": [
{
"name": "MEDIA_STATUS",
"extension": {
"@type": "type.googleapis.com/google.actions.v2.MediaStatus",
"status": "FINISHED"
}
}
]
}
],
"surface": {
"capabilities": [
{
"name": "actions.capability.SCREEN_OUTPUT"
},
{
"name": "actions.capability.WEB_BROWSER"
},
{
"name": "actions.capability.AUDIO_OUTPUT"
},
{
"name": "actions.capability.MEDIA_RESPONSE_AUDIO"
},
{
"name": "actions.capability.ACCOUNT_LINKING"
}
]
},
"isInSandbox": true,
"availableSurfaces": [
{
"capabilities": [
{
"name": "actions.capability.WEB_BROWSER"
},
{
"name": "actions.capability.AUDIO_OUTPUT"
},
{
"name": "actions.capability.SCREEN_OUTPUT"
}
]
}
],
"requestType": "SIMULATOR"
}
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 perlu ditampilkan Asisten di kartu tabel Anda. Anda juga dapat menentukan kolom dan baris tambahan beserta prioritasnya.
Tabel berbeda dengan daftar vertikal karena tabel menampilkan data statis dan tidak dapat berinteraksi, seperti elemen daftar.
Properti
Kartu tabel memiliki persyaratan dan properti opsional berikut yang dapat Anda konfigurasi:
- Didukung pada platform dengan kemampuan
actions.capability.SCREEN_OUTPUT.
Bagian berikut merangkum cara menyesuaikan elemen dalam kartu tabel.
| Nama | Opsional | Dapat Disesuaikan | Catatan Penyesuaian |
|---|---|---|---|
title |
Ya | Ya | Judul tabel secara keseluruhan. Harus disetel jika subtitel sudah disetel. Anda dapat menyesuaikan jenis dan warna font. |
subtitle |
Ya | Tidak | Subtitel untuk tabel. |
image |
Ya | Ya | Gambar yang terkait dengan tabel. |
Row |
Tidak | Ya |
Data baris dalam tabel. Terdiri dari array objek Tiga baris pertama dijamin akan ditampilkan, tetapi baris lainnya mungkin tidak muncul di platform tertentu. Uji dengan simulator untuk melihat baris mana yang ditampilkan untuk
platform tertentu. Pada platform yang mendukung kemampuan |
ColumnProperties |
Ya | Ya | Header dan perataan untuk kolom. Terdiri dari properti header (yang mewakili teks header untuk kolom) dan properti horizontal_alignment (dari jenis HorizontalAlignment). |
Cell |
Tidak | Ya | Menjelaskan sel secara berurutan. Setiap sel berisi string yang mewakili nilai teks. Anda dapat menyesuaikan teks di dalam sel. |
Button |
Ya | Ya | Objek tombol yang biasanya muncul di bagian bawah kartu. Kartu tabel hanya boleh memiliki 1 tombol. Anda dapat menyesuaikan warna tombol. |
HorizontalAlignment |
Ya | Ya | Perataan horizontal konten dalam sel. Nilai dapat berupa
LEADING, CENTER, atau TRAILING. Jika
tidak ditentukan, konten disejajarkan dengan tepi depan sel. |
Kode contoh
Cuplikan berikut menunjukkan cara menerapkan kartu tabel sederhana:
Node.js
app.intent('Simple Table Card', (conv) => {
if (!conv.screen) {
conv.ask('Sorry, try this on a screen device or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('This is a simple table example.');
conv.ask(new Table({
dividers: true,
columns: ['header 1', 'header 2', 'header 3'],
rows: [
['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
],
}));
conv.ask('Which response would you like to see next?');
});
Java
@ForIntent("Simple Table Card")
public ActionResponse simpleTable(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("This is a simple table example.")
.add(
new TableCard()
.setColumnProperties(
Arrays.asList(
new TableCardColumnProperties().setHeader("header 1"),
new TableCardColumnProperties().setHeader("header 2"),
new TableCardColumnProperties().setHeader("header 3")))
.setRows(
Arrays.asList(
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 1 item 1"),
new TableCardCell().setText("row 1 item 2"),
new TableCardCell().setText("row 1 item 3"))),
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 2 item 1"),
new TableCardCell().setText("row 2 item 2"),
new TableCardCell().setText("row 2 item 3"))))));
return responseBuilder.build();
}
Node.js
if (!conv.screen) {
conv.ask('Sorry, try this on a screen device or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('This is a simple table example.');
conv.ask(new Table({
dividers: true,
columns: ['header 1', 'header 2', 'header 3'],
rows: [
['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
],
}));
conv.ask('Which response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("This is a simple table example.")
.add(
new TableCard()
.setColumnProperties(
Arrays.asList(
new TableCardColumnProperties().setHeader("header 1"),
new TableCardColumnProperties().setHeader("header 2"),
new TableCardColumnProperties().setHeader("header 3")))
.setRows(
Arrays.asList(
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 1 item 1"),
new TableCardCell().setText("row 1 item 2"),
new TableCardCell().setText("row 1 item 3"))),
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 2 item 1"),
new TableCardCell().setText("row 2 item 2"),
new TableCardCell().setText("row 2 item 3"))))));
return responseBuilder.build();
JSON
Perhatikan bahwa JSON di bawah menjelaskan respons webhook.
{
"payload": {
"google": {
"expectUserResponse": true,
"richResponse": {
"items": [
{
"simpleResponse": {
"textToSpeech": "This is a simple table example."
}
},
{
"tableCard": {
"rows": [
{
"cells": [
{
"text": "row 1 item 1"
},
{
"text": "row 1 item 2"
},
{
"text": "row 1 item 3"
}
],
"dividerAfter": true
},
{
"cells": [
{
"text": "row 2 item 1"
},
{
"text": "row 2 item 2"
},
{
"text": "row 2 item 3"
}
],
"dividerAfter": true
}
],
"columnProperties": [
{
"header": "header 1"
},
{
"header": "header 2"
},
{
"header": "header 3"
}
]
}
},
{
"simpleResponse": {
"textToSpeech": "Which response would you like to see next?"
}
}
]
}
}
}
}
JSON
Perhatikan bahwa JSON di bawah menjelaskan respons webhook.
{
"expectUserResponse": true,
"expectedInputs": [
{
"inputPrompt": {
"richInitialPrompt": {
"items": [
{
"simpleResponse": {
"textToSpeech": "This is a simple table example."
}
},
{
"tableCard": {
"columnProperties": [
{
"header": "header 1"
},
{
"header": "header 2"
},
{
"header": "header 3"
}
],
"rows": [
{
"cells": [
{
"text": "row 1 item 1"
},
{
"text": "row 1 item 2"
},
{
"text": "row 1 item 3"
}
],
"dividerAfter": true
},
{
"cells": [
{
"text": "row 2 item 1"
},
{
"text": "row 2 item 2"
},
{
"text": "row 2 item 3"
}
],
"dividerAfter": true
}
]
}
},
{
"simpleResponse": {
"textToSpeech": "Which response would you like to see next?"
}
}
]
}
},
"possibleIntents": [
{
"intent": "actions.intent.TEXT"
}
]
}
]
}
Cuplikan berikut menunjukkan cara menerapkan kartu tabel yang kompleks:
Node.js
app.intent('Advanced Table Card', (conv) => {
if (!conv.screen) {
conv.ask('Sorry, try this on a screen device or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('This is a table with all the possible fields.');
conv.ask(new Table({
title: 'Table Title',
subtitle: 'Table Subtitle',
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Alt Text',
}),
columns: [
{
header: 'header 1',
align: 'CENTER',
},
{
header: 'header 2',
align: 'LEADING',
},
{
header: 'header 3',
align: 'TRAILING',
},
],
rows: [
{
cells: ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
dividerAfter: false,
},
{
cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
dividerAfter: true,
},
{
cells: ['row 3 item 1', 'row 3 item 2', 'row 3 item 3'],
},
],
buttons: new Button({
title: 'Button Text',
url: 'https://assistant.google.com',
}),
}));
conv.ask('Which response would you like to see next?');
});
Java
@ForIntent("Advanced Table Card")
public ActionResponse advancedTable(ActionRequest request) {
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("This is a table with all the possible fields.")
.add(
new TableCard()
.setTitle("Table Title")
.setSubtitle("Table Subtitle")
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Alt text"))
.setButtons(
Arrays.asList(
new Button()
.setTitle("Button Text")
.setOpenUrlAction(
new OpenUrlAction().setUrl("https://assistant.google.com"))))
.setColumnProperties(
Arrays.asList(
new TableCardColumnProperties()
.setHeader("header 1")
.setHorizontalAlignment("CENTER"),
new TableCardColumnProperties()
.setHeader("header 2")
.setHorizontalAlignment("LEADING"),
new TableCardColumnProperties()
.setHeader("header 3")
.setHorizontalAlignment("TRAILING")))
.setRows(
Arrays.asList(
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 1 item 1"),
new TableCardCell().setText("row 1 item 2"),
new TableCardCell().setText("row 1 item 3")))
.setDividerAfter(false),
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 2 item 1"),
new TableCardCell().setText("row 2 item 2"),
new TableCardCell().setText("row 2 item 3")))
.setDividerAfter(true),
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 2 item 1"),
new TableCardCell().setText("row 2 item 2"),
new TableCardCell().setText("row 2 item 3"))))));
return responseBuilder.build();
}
Node.js
if (!conv.screen) {
conv.ask('Sorry, try this on a screen device or select the ' +
'phone surface in the simulator.');
conv.ask('Which response would you like to see next?');
return;
}
conv.ask('This is a table with all the possible fields.');
conv.ask(new Table({
title: 'Table Title',
subtitle: 'Table Subtitle',
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Alt Text',
}),
columns: [
{
header: 'header 1',
align: 'CENTER',
},
{
header: 'header 2',
align: 'LEADING',
},
{
header: 'header 3',
align: 'TRAILING',
},
],
rows: [
{
cells: ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
dividerAfter: false,
},
{
cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
dividerAfter: true,
},
{
cells: ['row 3 item 1', 'row 3 item 2', 'row 3 item 3'],
},
],
buttons: new Button({
title: 'Button Text',
url: 'https://assistant.google.com',
}),
}));
conv.ask('Which response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
return responseBuilder
.add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
.add("Which response would you like to see next?")
.build();
}
responseBuilder
.add("This is a table with all the possible fields.")
.add(
new TableCard()
.setTitle("Table Title")
.setSubtitle("Table Subtitle")
.setImage(
new Image()
.setUrl(
"https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
.setAccessibilityText("Alt text"))
.setButtons(
Arrays.asList(
new Button()
.setTitle("Button Text")
.setOpenUrlAction(
new OpenUrlAction().setUrl("https://assistant.google.com"))))
.setColumnProperties(
Arrays.asList(
new TableCardColumnProperties()
.setHeader("header 1")
.setHorizontalAlignment("CENTER"),
new TableCardColumnProperties()
.setHeader("header 2")
.setHorizontalAlignment("LEADING"),
new TableCardColumnProperties()
.setHeader("header 3")
.setHorizontalAlignment("TRAILING")))
.setRows(
Arrays.asList(
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 1 item 1"),
new TableCardCell().setText("row 1 item 2"),
new TableCardCell().setText("row 1 item 3")))
.setDividerAfter(false),
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 2 item 1"),
new TableCardCell().setText("row 2 item 2"),
new TableCardCell().setText("row 2 item 3")))
.setDividerAfter(true),
new TableCardRow()
.setCells(
Arrays.asList(
new TableCardCell().setText("row 2 item 1"),
new TableCardCell().setText("row 2 item 2"),
new TableCardCell().setText("row 2 item 3"))))));
return responseBuilder.build();
JSON
Perhatikan bahwa JSON di bawah menjelaskan respons webhook.
{
"payload": {
"google": {
"expectUserResponse": true,
"richResponse": {
"items": [
{
"simpleResponse": {
"textToSpeech": "This is a table with all the possible fields."
}
},
{
"tableCard": {
"title": "Table Title",
"subtitle": "Table Subtitle",
"image": {
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
"accessibilityText": "Alt Text"
},
"rows": [
{
"cells": [
{
"text": "row 1 item 1"
},
{
"text": "row 1 item 2"
},
{
"text": "row 1 item 3"
}
],
"dividerAfter": false
},
{
"cells": [
{
"text": "row 2 item 1"
},
{
"text": "row 2 item 2"
},
{
"text": "row 2 item 3"
}
],
"dividerAfter": true
},
{
"cells": [
{
"text": "row 3 item 1"
},
{
"text": "row 3 item 2"
},
{
"text": "row 3 item 3"
}
]
}
],
"columnProperties": [
{
"header": "header 1",
"horizontalAlignment": "CENTER"
},
{
"header": "header 2",
"horizontalAlignment": "LEADING"
},
{
"header": "header 3",
"horizontalAlignment": "TRAILING"
}
],
"buttons": [
{
"title": "Button Text",
"openUrlAction": {
"url": "https://assistant.google.com"
}
}
]
}
},
{
"simpleResponse": {
"textToSpeech": "Which response would you like to see next?"
}
}
]
}
}
}
}
JSON
Perhatikan bahwa JSON di bawah menjelaskan respons webhook.
{
"expectUserResponse": true,
"expectedInputs": [
{
"possibleIntents": [
{
"intent": "actions.intent.TEXT"
}
],
"inputPrompt": {
"richInitialPrompt": {
"items": [
{
"simpleResponse": {
"textToSpeech": "This is a table with all the possible fields."
}
},
{
"tableCard": {
"title": "Table Title",
"subtitle": "Table Subtitle",
"image": {
"url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
"accessibilityText": "Alt Text"
},
"rows": [
{
"cells": [
{
"text": "row 1 item 1"
},
{
"text": "row 1 item 2"
},
{
"text": "row 1 item 3"
}
],
"dividerAfter": false
},
{
"cells": [
{
"text": "row 2 item 1"
},
{
"text": "row 2 item 2"
},
{
"text": "row 2 item 3"
}
],
"dividerAfter": true
},
{
"cells": [
{
"text": "row 3 item 1"
},
{
"text": "row 3 item 2"
},
{
"text": "row 3 item 3"
}
]
}
],
"columnProperties": [
{
"header": "header 1",
"horizontalAlignment": "CENTER"
},
{
"header": "header 2",
"horizontalAlignment": "LEADING"
},
{
"header": "header 3",
"horizontalAlignment": "TRAILING"
}
],
"buttons": [
{
"title": "Button Text",
"openUrlAction": {
"url": "https://assistant.google.com"
}
}
]
}
},
{
"simpleResponse": {
"textToSpeech": "Which response would you like to see next?"
}
}
]
}
}
}
]
}
Menyesuaikan respons Anda
Anda dapat mengubah tampilan respons multimedia dengan membuat tema kustom. Jika Anda menentukan tema untuk project Action Anda, respons yang lengkap di seluruh Action project Anda akan diberi gaya sesuai dengan tema Anda. Branding kustom ini dapat berguna untuk menentukan tampilan dan nuansa unik pada percakapan saat pengguna memanggil Action Anda pada 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 yang akan digunakan sebagai latar belakang kartu Anda. Secara umum, Anda harus menggunakan warna terang untuk latar belakang agar konten kartu mudah dibaca.
- Warna primer adalah warna utama untuk teks header dan elemen UI kartu Anda. Secara umum, Anda harus menggunakan warna primer yang lebih gelap agar kontras dengan latar belakang.
- Jenis font menjelaskan jenis font yang digunakan untuk judul dan elemen teks penting lainnya.
- Gaya sudut gambar dapat mengubah tampilan sudut kartu.
- Gambar latar belakang menggunakan gambar kustom sebagai pengganti warna latar belakang. Anda harus menyediakan dua gambar yang berbeda saat perangkat platform berada dalam mode lanskap atau potret. Perhatikan bahwa jika Anda menggunakan gambar latar, warna primer akan disetel ke putih.
- Klik Simpan.
