複合式回應可為視覺元素加上操作，進一步吸引使用者與動作互動。你可以使用下列複合式搜尋結果類型做為 提示：
- 基本資訊卡
- 圖片資訊卡
- 資料表資訊卡
定義複合式回應時，請將候選與 RICH_RESPONSE 介面功能搭配使用，這樣 Google 助理就只會在支援的裝置上傳回複合式回應。提示訊息中，每個 content 物件只能使用一個複合式搜尋結果。
基本資訊卡
基本資訊卡的設計應簡明扼要，以便為使用者呈現主要 (或摘要) 資訊，並讓使用者選擇 (使用網頁連結) 瞭解詳情。
基本資訊卡應用於顯示，因為沒有按鈕沒有互動功能。如要將按鈕連結至網路，途徑必須具備 WEB_LINK 功能。
屬性
基本資訊卡回應類型包含下列屬性：
| 屬性 | 類型 | 必要性 | 說明 |
|---|---|---|---|
title |
字串 | 選用 | 資訊卡純文字。標題是固定字型和大小，而且第一行之後的字元會遭到截斷。如未指定標題，系統會收合資訊卡高度。 |
subtitle |
字串 | 選用 | 資訊卡純文字。標題是固定字型和大小，第一行以外的字元都會遭到截斷。如未指定子標題，資訊卡高度會收合。 |
text |
字串 | 須符合條件 |
資訊卡上的純文字。過長的文字在刪節號時會遭到截斷。除非有 這項資源設有下列限制：
僅支援部分 Markdown：
|
image |
Image |
選用 | 資訊卡中顯示的圖片。圖片可以是 JPG、PNG 和 GIF (動畫和非動畫)。 |
image_fill |
ImageFill |
選用 | 如果資訊卡的顯示比例與圖片容器的長寬比不符，資訊卡和圖片容器之間的邊界會設定。 |
button |
Link |
選用 | 使用者輕觸按鈕時，按鈕會連結至網址。按鈕的 name 屬性必須包含按鈕文字，以及包含連結網址的 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."
}
}
}
}
表格資訊卡
表格資訊卡可讓您在回應中顯示表格資料 (例如運動排名、選舉結果和航班)。您可以定義 Google 助理的資料表資訊卡欄和列 (最多 3 個)。您也可以定義其他資料欄和資料列，以及這些資料欄的優先順序。
資料表會顯示靜態資料，且無法進行互動。如需互動式選取回應，請改用視覺選取回應。
屬性
表格資訊卡回應類型包含下列屬性：
| 屬性 | 類型 | 必要性 | 說明 |
|---|---|---|---|
title |
字串 | 須符合條件 | 表格的純文字標題。如果設定了 subtitle，就必須提供這項屬性。 |
subtitle |
字串 | 選用 | 表格純文字。表格資訊卡中的字幕不會受到主題自訂功能影響。 |
columns |
TableColumn 的陣列 |
必要 | 資料欄的標題和對齊方式。每個 TableColumn 物件都會說明同一資料表中不同資料欄的標題和對齊方式。 |
rows |
TableRow 的陣列 |
必要 |
表格的資料列資料。前 3 列保證可以顯示，但其他資料列可能不會顯示在特定介面上。您可以使用模擬器來測試特定介面顯示的資料列。 每個 |
image |
Image |
選用 | 與表格相關聯的圖片。 |
button |
Link |
選用 | 使用者輕觸按鈕時，按鈕會連結至網址。按鈕的 name 屬性必須包含按鈕文字，以及包含連結網址的 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."
}
}
}
}
自訂回覆
您可以為動作專案建立自訂主題，以變更複合式搜尋結果的回應外觀。這項自訂功能可以在使用者使用螢幕上的途徑叫用操作時，定義獨特的外觀和風格。
如要設定自訂回應主題，請按照下列步驟操作：
- 在動作主控台中，依序前往「開發」>「主題自訂」。
- 設定以下任一項或所有設定：
- 背景顏色：做為資訊卡背景的背景。一般而言，背景會使用淺色顏色，讓資訊卡的內容更容易閱讀。
- 主要顏色：卡片標頭文字和介面元素的主要顏色。一般情況下，使用較深的主要顏色，以便與背景顏色形成對比。
- 字型系列：說明標題和其他醒目文字元素的字型類型。
- 圖片邊角樣式：變更卡片角落。
- 背景圖片：用來取代背景顏色的自訂圖片。提供兩種不同角度的途徑，當途徑裝置處於橫向或直向模式時。如果使用背景圖片，系統會將主要顏色設為白色。
- 按一下「儲存」。
