ใช้การตอบสนองการเลือกภาพหากต้องการให้ผู้ใช้เลือกตัวเลือกใดตัวเลือกหนึ่งเพื่อดำเนินการต่อ คุณใช้ประเภทคำตอบการเลือกภาพต่อไปนี้เป็นส่วนหนึ่งของข้อความแจ้งได้
- รายการ
- คอลเล็กชัน
- เรียกดูคอลเล็กชัน
เมื่อกำหนดคำตอบของการเลือกภาพ ให้ใช้ตัวเลือกที่มีความสามารถ
RICH_RESPONSE
Surface เพื่อให้ Google Assistant แสดงผลการตอบกลับในอุปกรณ์ที่รองรับเท่านั้น คุณสามารถใช้การตอบกลับด้วยริชมีเดียได้เพียง 1 ครั้งต่อออบเจ็กต์ content
ในพรอมต์
การเพิ่มคำตอบตัวเลือกภาพ
การตอบกลับการเลือกภาพจะใช้การเติมช่องในฉากเพื่อนำเสนอตัวเลือกที่ผู้ใช้สามารถเลือกและจัดการรายการที่เลือกได้ เมื่อผู้ใช้เลือกรายการ Assistant จะส่งค่ารายการที่เลือกไปยังเว็บฮุคเป็นอาร์กิวเมนต์ จากนั้น ในค่าอาร์กิวเมนต์ คุณจะได้รับคีย์สำหรับรายการที่เลือก
ก่อนใช้การตอบกลับการเลือกที่เป็นภาพ คุณต้องกำหนดประเภทซึ่งแสดงถึงการตอบกลับที่ผู้ใช้เลือกในภายหลัง ในเว็บฮุค คุณจะลบล้างเนื้อหา ที่ต้องการแสดงสำหรับการเลือก
หากต้องการเพิ่มการตอบสนองการเลือกภาพไปยังฉากใน Actions Builder ให้ทำตามขั้นตอนต่อไปนี้
- ในฉาก ให้เพิ่มช่องลงในส่วนการเติมช่อง
- เลือกประเภทที่กำหนดไว้ก่อนหน้าสำหรับการตอบสนองการเลือกภาพ แล้วตั้งชื่อ เว็บฮุคใช้ชื่อช่องโฆษณาเพื่ออ้างอิงประเภทในภายหลัง
- เลือกช่องเรียกใช้เว็บฮุคและระบุชื่อเครื่องจัดการเหตุการณ์ในเว็บฮุคที่คุณต้องการใช้สำหรับการตอบสนองการเลือกภาพ
- เลือกช่องส่งข้อความแจ้ง
- ในพรอมต์ ให้ระบุเนื้อหา JSON หรือ YAML ที่เหมาะสมตามการตอบสนองของการเลือกภาพที่คุณต้องการแสดงผล
- ในเว็บฮุค ให้ทำตามขั้นตอนในหัวข้อการจัดการรายการที่เลือก
ดูส่วนรายการ คอลเล็กชัน และการเรียกดูคอลเล็กชันด้านล่างเพื่อดูพร็อพเพอร์ตี้ข้อความแจ้งที่ใช้ได้และตัวอย่างของประเภทการลบล้าง
การจัดการรายการที่เลือก
การตอบกลับการเลือกภาพกำหนดให้คุณจัดการกับการเลือกของผู้ใช้ในโค้ดเว็บฮุค เมื่อผู้ใช้เลือกบางอย่างจากการตอบสนองด้วยภาพ Google Assistant จะเติมค่านั้นลงในช่อง
ในตัวอย่างต่อไปนี้ โค้ดเว็บฮุคจะได้รับและจัดเก็บตัวเลือกที่เลือกในตัวแปร
Node.js
app.handle('Option', conv => { // Note: 'prompt_option' is the name of the slot. const selectedOption = conv.session.params.prompt_option; conv.add(`You selected ${selectedOption}.`); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": { "prompt_option": "ITEM_1" } }, "prompt": { "override": false, "firstSimple": { "speech": "You selected ITEM_1.", "text": "You selected ITEM_1." } } } }
รายการ
![ตัวอย่างการตอบสนองการเลือกรายการในอุปกรณ์เคลื่อนที่](https://developers.google.cn/static/assistant/conversational/images/list.png?authuser=6&hl=th)
ชุดรายการจะแสดงรายการสินค้าต่างๆ ในแนวตั้งให้กับผู้ใช้และช่วยให้ผู้ใช้สามารถเลือกรายการด้วยการแตะหรือการป้อนข้อมูลด้วยเสียง เมื่อผู้ใช้เลือกรายการจากรายการ Assistant จะสร้างคำค้นหาของผู้ใช้ (บับเบิลแชท) ที่มีชื่อของรายการ
รายการเหมาะสำหรับเวลาที่จำเป็นต้องมีตัวเลือกที่ชัดเจน หรือเมื่อผู้ใช้ต้องเลือกตัวเลือกที่ต้องสแกนทั้งหมด เช่น คุณต้องพูดกับ "Peter" ฝ่ายไหนนะ Peter Jons หรือ Peter Hans
โดยรายการต้องมีอย่างน้อย 2 รายการและสูงสุด 30 รายการ จำนวนองค์ประกอบที่แสดงในตอนแรกจะขึ้นอยู่กับอุปกรณ์ของผู้ใช้ และตัวเลขเริ่มต้นทั่วไปคือ 10 รายการ
การสร้างรายการ
เมื่อสร้างรายการ ข้อความแจ้งจะมีเฉพาะคีย์สําหรับแต่ละรายการที่ผู้ใช้เลือกได้ ในเว็บฮุค คุณจะกำหนดรายการที่สอดคล้องกับคีย์เหล่านั้นตามประเภท Entry
รายการที่กำหนดเป็นออบเจ็กต์ Entry
มีลักษณะการแสดงผลดังต่อไปนี้
- ชื่อ
- แบบอักษรและขนาดคงที่
- ความยาวสูงสุด: 1 บรรทัด (ตัดด้วยจุดไข่ปลา...)
- ต้องไม่ซ้ำกัน (เพื่อรองรับการเลือกด้วยเสียง)
- คำอธิบาย (ไม่บังคับ)
- แบบอักษรและขนาดคงที่
- ความยาวสูงสุด: 2 บรรทัด (ตัดด้วยจุดไข่ปลา...)
- รูปภาพ (ไม่บังคับ)
- ขนาด: 48x48 พิกเซล
การตอบกลับการเลือกภาพกำหนดให้คุณลบล้างประเภทด้วยชื่อช่องโดยใช้ประเภทรันไทม์ในโหมด TYPE_REPLACE
ในเครื่องจัดการเหตุการณ์ของเว็บฮุค ให้อ้างอิงประเภทเพื่อลบล้างด้วยชื่อช่อง (กำหนดไว้ในการเพิ่มการตอบกลับการเลือก) ในพร็อพเพอร์ตี้ name
หลังจากเขียนทับประเภทแล้ว ประเภทผลลัพธ์จะแสดงรายการที่ผู้ใช้เลือกได้จาก Assistant ที่แสดง
พร็อพเพอร์ตี้
ประเภทการตอบสนองแบบรายการมีพร็อพเพอร์ตี้ต่อไปนี้
พร็อพเพอร์ตี้ | Type | ข้อกำหนด | คำอธิบาย |
---|---|---|---|
items |
อาร์เรย์ของ ListItem |
จำเป็น | แสดงรายการในรายการที่ผู้ใช้สามารถเลือกได้ ListItem แต่ละรายการจะมีคีย์ที่แมปกับประเภทที่อ้างอิงสำหรับรายการในลิสต์ |
title |
สตริง | ไม่บังคับ | ชื่อข้อความธรรมดาของรายการ ถูกจำกัดไว้ในบรรทัดเดียว หากไม่มีการระบุชื่อ ความสูงของการ์ดจะยุบไป |
subtitle |
สตริง | ไม่บังคับ | ชื่อรองรายการที่เป็นข้อความธรรมดา |
รหัสตัวอย่าง
ตัวอย่างต่อไปนี้กำหนดเนื้อหาข้อความแจ้งในโค้ดเว็บฮุคหรือใน JSONเว็บฮุคResponse อย่างไรก็ตาม คุณอาจกำหนดเนื้อหาข้อความแจ้งใน Actions Builder (เป็น YAML หรือ JSON) แทนก็ได้
Node.js
const ASSISTANT_LOGO_IMAGE = new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' }); app.handle('List', conv => { conv.add('This is a list.'); // Override type based on slot 'prompt_option' conv.session.typeOverrides = [{ name: 'prompt_option', mode: 'TYPE_REPLACE', synonym: { entries: [ { name: 'ITEM_1', synonyms: ['Item 1', 'First item'], display: { title: 'Item #1', description: 'Description of Item #1', image: ASSISTANT_LOGO_IMAGE, } }, { name: 'ITEM_2', synonyms: ['Item 2', 'Second item'], display: { title: 'Item #2', description: 'Description of Item #2', image: ASSISTANT_LOGO_IMAGE, } }, { name: 'ITEM_3', synonyms: ['Item 3', 'Third item'], display: { title: 'Item #3', description: 'Description of Item #3', image: ASSISTANT_LOGO_IMAGE, } }, { name: 'ITEM_4', synonyms: ['Item 4', 'Fourth item'], display: { title: 'Item #4', description: 'Description of Item #4', image: ASSISTANT_LOGO_IMAGE, } }, ] } }]; // Define prompt content using keys conv.add(new List({ title: 'List title', subtitle: 'List subtitle', items: [ { key: 'ITEM_1' }, { key: 'ITEM_2' }, { key: 'ITEM_3' }, { key: 'ITEM_4' } ], })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {}, "typeOverrides": [ { "name": "prompt_option", "synonym": { "entries": [ { "name": "ITEM_1", "synonyms": [ "Item 1", "First item" ], "display": { "title": "Item #1", "description": "Description of Item #1", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, { "name": "ITEM_2", "synonyms": [ "Item 2", "Second item" ], "display": { "title": "Item #2", "description": "Description of Item #2", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, { "name": "ITEM_3", "synonyms": [ "Item 3", "Third item" ], "display": { "title": "Item #3", "description": "Description of Item #3", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, { "name": "ITEM_4", "synonyms": [ "Item 4", "Fourth item" ], "display": { "title": "Item #4", "description": "Description of Item #4", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } } ] }, "typeOverrideMode": "TYPE_REPLACE" } ] }, "prompt": { "override": false, "content": { "list": { "items": [ { "key": "ITEM_1" }, { "key": "ITEM_2" }, { "key": "ITEM_3" }, { "key": "ITEM_4" } ], "subtitle": "List subtitle", "title": "List title" } }, "firstSimple": { "speech": "This is a list.", "text": "This is a list." } } } }
คอลเล็กชัน
คอลเล็กชันจะเลื่อนในแนวนอนและอนุญาตให้ผู้ใช้เลือก 1 รายการด้วยการแตะหรือการป้อนข้อมูลด้วยเสียง เมื่อเทียบกับรายการแล้ว คอลเล็กชันจะมีไทล์ขนาดใหญ่และ ช่วยให้เห็นเนื้อหาที่สมบูรณ์ยิ่งขึ้น การ์ดที่ประกอบเป็นคอลเล็กชันจะคล้ายกับการ์ดพื้นฐานที่มีรูปภาพ เมื่อผู้ใช้เลือกรายการจากคอลเล็กชัน Assistant จะสร้างคำค้นหาของผู้ใช้ (บับเบิลแชท) ที่มีชื่อของรายการ
คอลเล็กชันจะใช้งานได้ดีเมื่อนำเสนอตัวเลือกต่างๆ แก่ผู้ใช้ แต่ไม่จำเป็นต้องเปรียบเทียบโดยตรง (เทียบกับรายการ) โดยทั่วไปแล้ว แนะนำให้ใช้รายการเป็นคอลเล็กชัน เพราะรายการดังกล่าวช่วยให้สแกนด้วยสายตาและโต้ตอบด้วยเสียงได้ง่ายกว่า
คอลเล็กชันต้องมีไทล์อย่างน้อย 2 รายการและสูงสุด 10 รายการ ในอุปกรณ์ที่สามารถใช้งานจอแสดงผล ผู้ใช้จะเลื่อนไปทางซ้ายหรือขวาเพื่อเลื่อนผ่านการ์ดในคอลเล็กชันก่อนเลือกรายการได้
![ตัวอย่างการตอบสนองของการเลือกคอลเล็กชันในจออัจฉริยะ](https://developers.google.cn/static/assistant/conversational/images/smart-display/carousel.png?authuser=6&hl=th)
การสร้างคอลเล็กชัน
เมื่อสร้างคอลเล็กชัน ข้อความแจ้งจะมีเฉพาะคีย์สำหรับแต่ละรายการที่ผู้ใช้เลือกได้ ในเว็บฮุค คุณจะกำหนดรายการที่ตรงกับคีย์เหล่านั้นตามประเภท Entry
รายการคอลเล็กชันที่กำหนดเป็นออบเจ็กต์ Entry
มีลักษณะการแสดงผลดังต่อไปนี้
- รูปภาพ (ไม่บังคับ)
- บังคับรูปภาพให้สูง 128 dp x กว้าง 232 dp
- หากสัดส่วนภาพไม่ตรงกับกรอบล้อมรอบรูปภาพ แสดงว่ารูปภาพอยู่กึ่งกลางพร้อมแถบที่ด้านใดด้านหนึ่ง
- หากลิงก์รูปภาพเสีย ระบบจะใช้รูปภาพที่มีตัวยึดตำแหน่งแทน
- ชื่อ (ต้องระบุ)
- ข้อความธรรมดา ไม่รองรับมาร์กดาวน์ ตัวเลือกการจัดรูปแบบเหมือนกับ การตอบสนองแบบสมบูรณ์ของการ์ดแบบพื้นฐาน
- ความสูงของการ์ดจะยุบไปหากไม่มีการระบุชื่อ
- ต้องไม่ซ้ำกัน (เพื่อรองรับการเลือกด้วยเสียง)
- คำอธิบาย (ไม่บังคับ)
- ข้อความธรรมดา ไม่รองรับมาร์กดาวน์ ตัวเลือกการจัดรูปแบบเหมือนกับ การตอบสนองแบบสมบูรณ์ของการ์ดแบบพื้นฐาน
การตอบกลับการเลือกภาพกำหนดให้คุณลบล้างประเภทด้วยชื่อช่องโดยใช้ประเภทรันไทม์ในโหมด TYPE_REPLACE
ในเครื่องจัดการเหตุการณ์ของเว็บฮุค ให้อ้างอิงประเภทเพื่อลบล้างด้วยชื่อช่อง (กำหนดไว้ในการเพิ่มการตอบกลับการเลือก) ในพร็อพเพอร์ตี้ name
หลังจากเขียนทับประเภทแล้ว ประเภทผลลัพธ์จะแสดงคอลเล็กชันรายการที่ผู้ใช้สามารถเลือกได้จาก Assistant ที่แสดง
พร็อพเพอร์ตี้
ประเภทการตอบสนองของคอลเล็กชันมีพร็อพเพอร์ตี้ต่อไปนี้
พร็อพเพอร์ตี้ | Type | ข้อกำหนด | คำอธิบาย |
---|---|---|---|
items |
อาร์เรย์ของ CollectionItem |
จำเป็น | แสดงรายการในคอลเล็กชันที่ผู้ใช้สามารถเลือกได้ CollectionItem แต่ละรายการจะมีคีย์ที่แมปกับประเภทที่อ้างอิงสำหรับรายการในคอลเล็กชัน |
title |
สตริง | ไม่บังคับ | ชื่อคอลเล็กชันแบบข้อความธรรมดา ชื่อในคอลเล็กชันต้องไม่ซ้ำกันเพื่อรองรับการเลือกด้วยเสียง |
subtitle |
สตริง | ไม่บังคับ | ชื่อรองแบบข้อความธรรมดาของคอลเล็กชัน |
image_fill |
ImageFill |
ไม่บังคับ | เส้นขอบระหว่างการ์ดและคอนเทนเนอร์รูปภาพที่จะใช้เมื่ออัตราส่วนของรูปภาพไม่ตรงกับสัดส่วนภาพของคอนเทนเนอร์รูปภาพ |
รหัสตัวอย่าง
ตัวอย่างต่อไปนี้กำหนดเนื้อหาข้อความแจ้งในโค้ดของเว็บฮุคหรือในการตอบกลับเว็บฮุค JSON อย่างไรก็ตาม คุณอาจกำหนดเนื้อหาข้อความแจ้งใน Actions Builder (เป็น YAML หรือ JSON) แทนก็ได้
Node.js
const ASSISTANT_LOGO_IMAGE = new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' }); app.handle('Collection', conv => { conv.add("This is a collection."); // Override type based on slot 'prompt_option' conv.session.typeOverrides = [{ name: 'prompt_option', mode: 'TYPE_REPLACE', synonym: { entries: [ { name: 'ITEM_1', synonyms: ['Item 1', 'First item'], display: { title: 'Item #1', description: 'Description of Item #1', image: ASSISTANT_LOGO_IMAGE, } }, { name: 'ITEM_2', synonyms: ['Item 2', 'Second item'], display: { title: 'Item #2', description: 'Description of Item #2', image: ASSISTANT_LOGO_IMAGE, } }, { name: 'ITEM_3', synonyms: ['Item 3', 'Third item'], display: { title: 'Item #3', description: 'Description of Item #3', image: ASSISTANT_LOGO_IMAGE, } }, { name: 'ITEM_4', synonyms: ['Item 4', 'Fourth item'], display: { title: 'Item #4', description: 'Description of Item #4', image: ASSISTANT_LOGO_IMAGE, } }, ] } }]; // Define prompt content using keys conv.add(new Collection({ title: 'Collection Title', subtitle: 'Collection subtitle', items: [ { key: 'ITEM_1' }, { key: 'ITEM_2' }, { key: 'ITEM_3' }, { key: 'ITEM_4' } ], })); });
JSON
{ "responseJson": { "session": { "id": "ABwppHHz--uQEEy3CCOANyB0J58oF2Yw5JEX0oXwit3uxDlRwzbEIK3Bcz7hXteE6hWovrLX9Ahpqu8t-jYnQRFGpAUqSuYjZ70", "params": {}, "typeOverrides": [ { "name": "prompt_option", "synonym": { "entries": [ { "name": "ITEM_1", "synonyms": [ "Item 1", "First item" ], "display": { "title": "Item #1", "description": "Description of Item #1", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, { "name": "ITEM_2", "synonyms": [ "Item 2", "Second item" ], "display": { "title": "Item #2", "description": "Description of Item #2", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, { "name": "ITEM_3", "synonyms": [ "Item 3", "Third item" ], "display": { "title": "Item #3", "description": "Description of Item #3", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, { "name": "ITEM_4", "synonyms": [ "Item 4", "Fourth item" ], "display": { "title": "Item #4", "description": "Description of Item #4", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } } ] }, "typeOverrideMode": "TYPE_REPLACE" } ] }, "prompt": { "override": false, "content": { "collection": { "imageFill": "UNSPECIFIED", "items": [ { "key": "ITEM_1" }, { "key": "ITEM_2" }, { "key": "ITEM_3" }, { "key": "ITEM_4" } ], "subtitle": "Collection subtitle", "title": "Collection Title" } }, "firstSimple": { "speech": "This is a collection.", "text": "This is a collection." } } } }
เรียกดูคอลเล็กชัน
การเรียกดูคอลเล็กชันเป็นคำตอบที่สมบูรณ์ซึ่งช่วยให้ผู้ใช้เลื่อนดูการ์ดตัวเลือกได้เช่นเดียวกับคอลเล็กชัน การเรียกดูคอลเล็กชันออกแบบมาโดยเฉพาะสำหรับเนื้อหาเว็บ และเปิดการ์ดที่เลือกในเว็บเบราว์เซอร์ (หรือเบราว์เซอร์ AMP หากการ์ดทั้งหมดเปิดใช้ AMP)
คำตอบสำหรับการเรียกดูคอลเล็กชันมีอย่างน้อย 2 และสูงสุด 10 ไทล์ ในอุปกรณ์ที่สามารถใช้งานจอแสดงผล ผู้ใช้จะปัดขึ้นหรือลงเพื่อเลื่อนดูการ์ดก่อนเลือกรายการได้
การสร้างการเรียกดูคอลเล็กชัน
เมื่อสร้างการเรียกดูคอลเล็กชัน ให้พิจารณาวิธีที่ผู้ใช้โต้ตอบกับข้อความแจ้งนี้ แต่ละคอลเล็กชันที่เรียกดู item
จะเปิด URL ที่กำหนดไว้ ดังนั้นควรให้รายละเอียดที่เป็นประโยชน์แก่ผู้ใช้
รายการเรียกดูคอลเล็กชันมีลักษณะการแสดงผลดังต่อไปนี้
- รูปภาพ (ไม่บังคับ)
- บังคับรูปภาพให้สูง 128 dp x กว้าง 232 dp
- หากสัดส่วนภาพไม่ตรงกับกรอบล้อมรอบรูปภาพ รูปภาพจะถูกจัดกึ่งกลางด้วยแถบที่ด้านข้างหรือด้านบนและด้านล่าง สีของแถบจะกำหนดโดยพร็อพเพอร์ตี้
ImageFill
สำหรับการเรียกดูคอลเล็กชัน - หากลิงก์รูปภาพเสีย ระบบจะใช้รูปภาพที่มีตัวยึดตำแหน่งแทน
- ชื่อ (ต้องระบุ)
- ข้อความธรรมดา ไม่รองรับมาร์กดาวน์ จะใช้รูปแบบเดียวกับการตอบสนองที่สมบูรณ์ของการ์ดแบบพื้นฐาน
- ความสูงของการ์ดจะยุบไปหากไม่มีการระบุชื่อ
- คำอธิบาย (ไม่บังคับ)
- ข้อความธรรมดา ไม่รองรับมาร์กดาวน์ จะใช้รูปแบบเดียวกับการตอบสนองที่สมบูรณ์ของการ์ดแบบพื้นฐาน
- ส่วนท้าย (ไม่บังคับ)
- ข้อความธรรมดา ไม่รองรับมาร์กดาวน์
พร็อพเพอร์ตี้
ประเภทการตอบกลับการเรียกดูคอลเล็กชันมีพร็อพเพอร์ตี้ต่อไปนี้
พร็อพเพอร์ตี้ | Type | ข้อกำหนด | คำอธิบาย |
---|---|---|---|
item |
ออบเจ็กต์ | จำเป็น | แสดงรายการในคอลเล็กชันที่ผู้ใช้สามารถเลือกได้ |
image_fill |
ImageFill |
ไม่บังคับ | เส้นขอบระหว่างการ์ดและคอนเทนเนอร์รูปภาพที่จะใช้เมื่อสัดส่วนภาพของรูปภาพไม่ตรงกับสัดส่วนภาพของคอนเทนเนอร์รูปภาพ |
การเรียกดูคอลเล็กชัน item
มีพร็อพเพอร์ตี้ต่อไปนี้:
พร็อพเพอร์ตี้ | Type | ข้อกำหนด | คำอธิบาย |
---|---|---|---|
title |
สตริง | จำเป็น | ชื่อข้อความธรรมดาของรายการคอลเล็กชัน |
description |
สตริง | ไม่บังคับ | คำอธิบายของรายการคอลเล็กชัน |
footer |
สตริง | ไม่บังคับ | ข้อความส่วนท้ายสำหรับรายการคอลเล็กชันที่แสดงด้านล่างรายละเอียด |
image |
Image |
ไม่บังคับ | รูปภาพที่แสดงสำหรับรายการคอลเล็กชัน |
openUriAction |
OpenUrl |
จำเป็น | URI ที่จะเปิดเมื่อเลือกรายการคอลเล็กชัน |
รหัสตัวอย่าง
ตัวอย่างต่อไปนี้กำหนดเนื้อหาข้อความแจ้งในโค้ดของเว็บฮุคหรือในการตอบกลับเว็บฮุค JSON อย่างไรก็ตาม คุณอาจกำหนดเนื้อหาข้อความแจ้งใน Actions Builder (เป็น YAML หรือ JSON) แทนก็ได้
YAML
candidates: - first_simple: variants: - speech: This is a collection browse. content: collection_browse: items: - title: Item #1 description: Description of Item #1 footer: Footer of Item #1 image: url: 'https://developers.google.com/assistant/assistant_96.png' open_uri_action: url: 'https://www.example.com' - title: Item #2 description: Description of Item #2 footer: Footer of Item #2 image: url: 'https://developers.google.com/assistant/assistant_96.png' open_uri_action: url: 'https://www.example.com' image_fill: WHITE
JSON
{ "candidates": [ { "firstSimple": { "speech": "This is a collection browse.", "text": "This is a collection browse." }, "content": { "collectionBrowse": { "items": [ { "title": "Item #1", "description": "Description of Item #1", "footer": "Footer of Item #1", "image": { "url": "https://developers.google.com/assistant/assistant_96.png" }, "openUriAction": { "url": "https://www.example.com" } }, { "title": "Item #2", "description": "Description of Item #2", "footer": "Footer of Item #2", "image": { "url": "https://developers.google.com/assistant/assistant_96.png" }, "openUriAction": { "url": "https://www.example.com" } } ], "imageFill": "WHITE" } } } ] }
Node.js
// Collection Browse app.handle('collectionBrowse', (conv) => { conv.add('This is a collection browse.'); conv.add(new CollectionBrowse({ 'imageFill': 'WHITE', 'items': [ { 'title': 'Item #1', 'description': 'Description of Item #1', 'footer': 'Footer of Item #1', 'image': { 'url': 'https://developers.google.com/assistant/assistant_96.png' }, 'openUriAction': { 'url': 'https://www.example.com' } }, { 'title': 'Item #2', 'description': 'Description of Item #2', 'footer': 'Footer of Item #2', 'image': { 'url': 'https://developers.google.com/assistant/assistant_96.png' }, 'openUriAction': { 'url': 'https://www.example.com' } } ] })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {}, "languageCode": "" }, "prompt": { "override": false, "content": { "collectionBrowse": { "imageFill": "WHITE", "items": [ { "title": "Item #1", "description": "Description of Item #1", "footer": "Footer of Item #1", "image": { "url": "https://developers.google.com/assistant/assistant_96.png" }, "openUriAction": { "url": "https://www.example.com" } }, { "title": "Item #2", "description": "Description of Item #2", "footer": "Footer of Item #2", "image": { "url": "https://developers.google.com/assistant/assistant_96.png" }, "openUriAction": { "url": "https://www.example.com" } } ] } }, "firstSimple": { "speech": "This is a collection browse.", "text": "This is a collection browse." } } } }