การตอบสนองที่สมบูรณ์จะเพิ่มองค์ประกอบภาพเพื่อปรับปรุงการโต้ตอบของผู้ใช้กับการดำเนินการของคุณ คุณใช้ประเภทการตอบกลับริชมีเดียต่อไปนี้เป็นส่วนหนึ่งของข้อความแจ้งได้
- บัตรพื้นฐาน
- การ์ดรูปภาพ
- การ์ดตาราง
เมื่อกำหนดการตอบกลับริชมีเดีย ให้ใช้ตัวเลือกที่มีความสามารถแพลตฟอร์ม RICH_RESPONSE
เพื่อให้ Google Assistant แสดงการตอบกลับริชมีเดียในอุปกรณ์ที่รองรับเท่านั้น คุณจะใช้การตอบกลับริชมีเดียได้เพียง 1 รายการต่อออบเจ็กต์ content
ในข้อความแจ้ง
บัตรพื้นฐาน
การ์ดพื้นฐานได้รับการออกแบบมาให้กระชับ เพื่อนำเสนอข้อมูลสำคัญ (หรือสรุป) แก่ผู้ใช้ และเพื่อให้ผู้ใช้ดูข้อมูลเพิ่มเติมได้หากต้องการ (โดยใช้ลิงก์เว็บ)
ใช้การ์ดพื้นฐานเพื่อวัตถุประสงค์ในการแสดงผลเป็นหลัก เนื่องจากการ์ดไม่มีความสามารถในการโต้ตอบ
ที่ไม่มีปุ่ม หากต้องการลิงก์ปุ่มกับเว็บ แพลตฟอร์มนั้นต้องมีฟังก์ชัน WEB_LINK
ด้วย
![ตัวอย่างการ์ดพื้นฐานในจออัจฉริยะ](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/basic-card.png?authuser=6&hl=th)
พร็อพเพอร์ตี้
ประเภทการตอบสนองของการ์ดพื้นฐานมีพร็อพเพอร์ตี้ต่อไปนี้
พร็อพเพอร์ตี้ | Type | ข้อกำหนด | คำอธิบาย |
---|---|---|---|
title |
สตริง | ไม่บังคับ | ชื่อการ์ดแบบข้อความธรรมดา ชื่อมีแบบอักษรและขนาดคงที่ โดยอักขระที่เลยบรรทัดแรกจะถูกตัดออก ความสูงของการ์ดจะยุบไปหากไม่มีการระบุชื่อ |
subtitle |
สตริง | ไม่บังคับ | ชื่อรองของการ์ดแบบข้อความธรรมดา ชื่อมีแบบอักษรและขนาดคงที่ โดยอักขระที่เลยบรรทัดแรกจะถูกตัดออก ความสูงของการ์ดจะยุบไปหากไม่ได้ระบุคำบรรยาย |
text |
สตริง | มีเงื่อนไข |
เนื้อหาข้อความธรรมดาของการ์ด ข้อความที่ยาวเกินไปจะถูกตัดที่ตัวแบ่งคำสุดท้ายด้วยจุดไข่ปลา ต้องระบุพร็อพเพอร์ตี้นี้เว้นแต่จะมี ที่พักนี้มีข้อจำกัดดังต่อไปนี้
ระบบรองรับชุดย่อยของมาร์กดาวน์แบบจำกัด ดังนี้
|
image |
Image |
ไม่บังคับ | รูปภาพที่แสดงในการ์ด รูปภาพต้องเป็นแบบ JPG, PNG และ GIF (ที่เป็นภาพเคลื่อนไหวและไม่เคลื่อนไหว) |
image_fill |
ImageFill |
ไม่บังคับ | เส้นขอบระหว่างการ์ดและคอนเทนเนอร์รูปภาพที่จะใช้เมื่ออัตราส่วนของรูปภาพไม่ตรงกับสัดส่วนภาพของคอนเทนเนอร์รูปภาพ |
button |
Link |
ไม่บังคับ | ปุ่มที่ลิงก์ผู้ใช้ไปยัง URL เมื่อแตะ ปุ่มต้องมีพร็อพเพอร์ตี้ name ที่มีข้อความของปุ่ม และพร็อพเพอร์ตี้ url ที่มี URL ของลิงก์ ข้อความบนปุ่มอาจไม่ทำให้เข้าใจผิด และได้รับการตรวจสอบระหว่างกระบวนการตรวจสอบ |
รหัสตัวอย่าง
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." } } } }
การ์ดรูปภาพ
การ์ดรูปภาพออกแบบมาให้เป็นทางเลือกที่เรียบง่ายกว่าการ์ดพื้นฐานที่มีรูปภาพด้วย ใช้การ์ดรูปภาพเมื่อต้องการนำเสนอรูปภาพ และไม่จำเป็นต้องมีข้อความสนับสนุนหรือคอมโพเนนต์แบบอินเทอร์แอกทีฟ
พร็อพเพอร์ตี้
ประเภทการตอบสนองของการ์ดรูปภาพมีคุณสมบัติดังต่อไปนี้
พร็อพเพอร์ตี้ | Type | ข้อกำหนด | คำอธิบาย |
---|---|---|---|
url |
สตริง | จำเป็น | URL แหล่งที่มาของรูปภาพ รูปภาพต้องเป็น JPG, PNG หรือ GIF (เคลื่อนไหวและไม่เคลื่อนไหว) |
alt |
สตริง | จำเป็น | ข้อความอธิบายรูปภาพที่จะใช้สำหรับการช่วยเหลือพิเศษ |
height |
int32 | ไม่บังคับ | ความสูงของรูปภาพเป็นพิกเซล |
width |
int32 | ไม่บังคับ | ความกว้างของรูปภาพเป็นพิกเซล |
รหัสตัวอย่าง
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." } } } }
การ์ดตาราง
การ์ดตารางช่วยให้คุณแสดงข้อมูลตารางในการตอบกลับ (เช่น ผลคะแนนกีฬา ผลการเลือกตั้ง และเที่ยวบิน) คุณกำหนดคอลัมน์และแถว (สูงสุด 3 แถว) ที่ Assistant จะแสดงในการ์ดตารางได้ นอกจากนี้คุณยังสามารถกำหนดคอลัมน์และแถวเพิ่มเติม รวมถึงการจัดลำดับความสำคัญได้
![ตัวอย่างการ์ดตารางในจออัจฉริยะ](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/table.png?authuser=6&hl=th)
ตารางแสดงข้อมูลคงที่และไม่สามารถโต้ตอบได้ สำหรับการตอบกลับการเลือกแบบอินเทอร์แอกทีฟ ให้ใช้การตอบกลับการเลือกภาพแทน
พร็อพเพอร์ตี้
ประเภทการตอบสนองของการ์ดตารางมีพร็อพเพอร์ตี้ต่อไปนี้
พร็อพเพอร์ตี้ | Type | ข้อกำหนด | คำอธิบาย |
---|---|---|---|
title |
สตริง | มีเงื่อนไข | ชื่อข้อความธรรมดาของตาราง ต้องระบุพร็อพเพอร์ตี้นี้หากมีการตั้งค่า subtitle |
subtitle |
สตริง | ไม่บังคับ | ชื่อรองของตารางธรรมดา คำบรรยายในการ์ดตารางจะไม่ได้รับผลกระทบจากการปรับแต่งธีม |
columns |
อาร์เรย์ของ TableColumn |
จำเป็น | ส่วนหัวและการจัดคอลัมน์ ออบเจ็กต์ TableColumn แต่ละรายการอธิบายส่วนหัวและการจัดแนวของคอลัมน์ที่ต่างกันในตารางเดียวกัน |
rows |
อาร์เรย์ของ TableRow |
จำเป็น |
ข้อมูลแถวของตาราง ระบบรับประกันว่า 3 แถวแรกจะได้แสดง แต่แถวอื่นๆ อาจไม่ปรากฏในบางแพลตฟอร์ม คุณทดสอบด้วยเครื่องจำลองได้เพื่อดูว่าแถวใดแสดงอยู่บนพื้นผิวหนึ่งๆ ออบเจ็กต์ |
image |
Image |
ไม่บังคับ | รูปภาพที่เชื่อมโยงกับตาราง |
button |
Link |
ไม่บังคับ | ปุ่มที่ลิงก์ผู้ใช้ไปยัง URL เมื่อแตะ ปุ่มต้องมีพร็อพเพอร์ตี้ name ที่มีข้อความของปุ่ม และพร็อพเพอร์ตี้ url ที่มี URL ของลิงก์ ข้อความบนปุ่มอาจไม่ทำให้เข้าใจผิด และได้รับการตรวจสอบระหว่างกระบวนการตรวจสอบ
|
รหัสตัวอย่าง
ข้อมูลโค้ดต่อไปนี้จะแสดงวิธีใช้การ์ดตาราง
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." } } } }
การปรับแต่งการตอบกลับ
คุณเปลี่ยนลักษณะของการตอบกลับที่มีริชมีเดียได้โดยสร้างธีมที่กำหนดเองสำหรับโปรเจ็กต์การดำเนินการของคุณ การปรับแต่งนี้มีประโยชน์สำหรับการกำหนดรูปลักษณ์และความรู้สึกที่เป็นเอกลักษณ์ของการสนทนาเมื่อผู้ใช้เรียกใช้การดำเนินการของคุณบนพื้นผิวด้วยหน้าจอ
หากต้องการตั้งค่าธีมการตอบกลับที่กำหนดเอง ให้ทำดังนี้
- ในคอนโซลการดำเนินการ ให้ไปที่พัฒนา > การปรับแต่งธีม
- ตั้งค่ารายการใดรายการหนึ่งหรือทั้งหมดต่อไปนี้
- สีพื้นหลัง: ใช้เป็นพื้นหลังของการ์ด โดยทั่วไปจะใช้สีอ่อนสำหรับพื้นหลังเพื่อให้อ่านเนื้อหาของการ์ดได้ง่ายขึ้น
- สีหลัก: สีหลักสำหรับข้อความส่วนหัวของการ์ดและองค์ประกอบอินเทอร์เฟซ โดยทั่วไป ให้ใช้สีหลักที่เข้มขึ้นเพื่อให้คอนทราสต์กับสีพื้นหลังได้ดียิ่งขึ้น
- ชุดแบบอักษร: อธิบายประเภทแบบอักษรที่ใช้สำหรับชื่อและองค์ประกอบข้อความอื่นๆ ที่โดดเด่น
- รูปแบบมุมของรูปภาพ: เปลี่ยนลักษณะของมุมการ์ด
- ภาพพื้นหลัง: รูปภาพที่กำหนดเองเพื่อใช้แทนสีพื้นหลัง ใส่รูปภาพ 2 รูปที่ต่างกันสำหรับอุปกรณ์ที่วางพื้นผิวในโหมดแนวนอนหรือแนวตั้ง หากคุณใช้ภาพพื้นหลัง สีหลักจะตั้งค่าเป็นสีขาว
- คลิกบันทึก
![การปรับแต่งธีมในคอนโซล Actions](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/theme-customization.png?authuser=6&hl=th)