התשובות העשירות מוסיפות רכיבים חזותיים לשיפור האינטראקציה של המשתמשים עם הפעולה. אפשר להשתמש בסוגים הבאים של תשובות עשירות כחלק מהודעה:
- כרטיס בסיסי
- כרטיס תמונה
- כרטיס טבלה
כשמגדירים תשובה עשירה, צריך להשתמש במועמד עם יכולת פני השטח RICH_RESPONSE
, כך ש-Google Assistant תחזיר את התשובה העשירה רק במכשירים נתמכים. אפשר להשתמש רק בתגובה עשירה אחת לכל אובייקט content
בבקשה.
כרטיס בסיסי
כרטיסים בסיסיים נועדו להיות תמציתיים, כדי להציג מידע חשוב (או סיכום) למשתמשים, ולאפשר להם לקבל מידע נוסף אם תבחרו בכך (באמצעות קישור אינטרנט).
מומלץ להשתמש בכרטיסים בסיסיים בעיקר למטרות תצוגה, מכיוון שאין להם יכולות אינטראקציה ללא לחצן. כדי לקשר לחצן לאינטרנט, למשטח צריכה להיות גם ההרשאה WEB_LINK
.
תכונות
לסוג התשובה הבסיסי של הכרטיס יש את המאפיינים הבאים:
נכס | תיאור | דרישה | התיאור |
---|---|---|---|
title |
מחרוזת | אופציונלי | כותרת טקסט פשוטה של הכרטיס. הכותרות מופיעות בגופן ובגודל קבועים, ותווים שמעבר לשורה הראשונה נחתכים. גובה הכרטיס מתכווץ אם לא מציינים כותרת. |
subtitle |
מחרוזת | אופציונלי | כותרת משנה של טקסט פשוט של הכרטיס. הכותרות מופיעות בגופן ובגודל קבועים, ותווים שמעבר לשורה הראשונה נחתכים. גובה הכרטיס מתכווץ אם לא צוינה כותרת משנה. |
text |
מחרוזת | משפטי תנאי |
תוכן טקסט פשוט של הכרטיס. טקסט ארוך מדי נחתך
במעבר המילה האחרונה בשלוש נקודות. המאפיין הזה נדרש, אלא אם
בנכס הזה חלות ההגבלות הבאות:
יש תמיכה בקבוצת משנה מוגבלת של Markdown:
|
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." } } } }
כרטיסי תמונה
כרטיסי תמונות נועדו להיות חלופה פשוטה יותר לכרטיס בסיסי שמכיל גם תמונה. אפשר להשתמש בכרטיס תמונה כשרוצים להציג תמונה, ללא צורך בטקסט תומך או ברכיבים אינטראקטיביים.
תכונות
לסוג התגובה של כרטיס התמונה יש את המאפיינים הבאים:
נכס | תיאור | דרישה | התיאור |
---|---|---|---|
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 תציג בכרטיס הטבלה. אפשר גם להגדיר עוד עמודות ושורות, יחד עם העדיפות שלהן.
בטבלאות מוצגים נתונים סטטיים ולא ניתן לבצע בהן פעולות. בתגובות בחירה אינטראקטיביות, צריך להשתמש במקום זאת בתגובת בחירה חזותית.
תכונות
לסוג התשובה של כרטיס הטבלה יש את המאפיינים הבאים:
נכס | תיאור | דרישה | התיאור |
---|---|---|---|
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." } } } }
התאמה אישית של התשובות
כדי לשנות את המראה של התשובות העשירות, תוכלו ליצור עיצוב מותאם אישית לפרויקט Actions. בעזרת ההתאמה האישית הזו אפשר להגדיר מראה ותחושה ייחודיים לשיחה, כשמשתמשים מפעילים את הפעולות על משטח עם מסך.
כדי להגדיר עיצוב מותאם אישית לתגובות, מבצעים את הפעולות הבאות:
- בקונסולה ל-Actions, עוברים אל פיתוח > התאמה אישית של העיצוב.
- מגדירים אחת מהאפשרויות הבאות או את כולן:
- צבע רקע: משמש כרקע של הכרטיסים. באופן כללי, כדאי לבחור צבע בהיר ברקע כדי שיהיה קל יותר לקרוא את תוכן הכרטיס.
- Primary color: הצבע הראשי לטקסטים של הכותרות ולרכיבי הממשק של הכרטיסים. באופן כללי, כדאי לבחור צבע ראשי כהה יותר כדי ליצור ניגודיות טובה יותר לצבע הרקע.
- משפחת גופנים: תיאור סוג הגופן המשמש בכותרות וברכיבי טקסט בולטים אחרים.
- סגנון הפינה של התמונה: שינוי המראה של פינות הכרטיסים.
- תמונת רקע: תמונה מותאמת אישית לשימוש במקום צבע הרקע. צריך לספק שתי תמונות שונות כשהמכשיר על פני השטח הוא בפריסה לרוחב או לאורך. אם משתמשים בתמונת רקע, הצבע הראשי מוגדר ללבן.
- לוחצים על שמירה.