外觀選項的回覆

如果您希望使用者從多個選項中選取一個答案，請使用圖像選取回應 才能繼續執行動作。你可以使用以下圖片 選取回應類型做為提示的一部分：

  • 清單
  • 集合
  • 瀏覽最愛
，瞭解如何調查及移除這項存取權。

定義視覺選取回應時，請使用「候選」，搭配 RICH_RESPONSE 介面功能，確保 Google 助理只會傳回 回應。每個 content 只能使用一個複合式回應 傳回物件

新增圖像選取回應

視覺選擇回應會使用場景中的運算單元填充功能來顯示選項 能讓使用者選取及處理所選項目使用者選取某個項目時 Google 助理會將所選項目值做為引數傳遞給 Webhook。接著： ，您會收到所選項目的鍵。

使用視覺選取回應之前，您必須先定義類型 代表使用者稍後選取的回應在 Webhook 中，您將覆寫 然後輸入您希望顯示的內容

如要在 Actions Builder 中為場景新增視覺選取回應，請按照下列步驟操作 步驟：

  1. 在場景中，將時段新增至「Slot 填充」部分。
  2. 選取先前定義的類型做為視覺選擇回覆，然後 命名Webhook 稍後會使用這個運算單元名稱來參照類型。
  3. 勾選「Call your Webhook」方塊，並提供事件處理常式名稱 加入要用於視覺選取回應的 Webhook 中。
  4. 勾選「傳送提示」方塊。
  5. 在提示中，根據 要傳回的視覺選擇回應。
  6. 在 Webhook 中，按照「處理選取的項目」一節的步驟操作。

請參閱下方的清單、集合和集合瀏覽章節，查看可用的提示屬性和覆寫範例 。

處理所選項目

視覺選擇回應需要您處理使用者選取的選項 Webhook 程式碼當使用者從影像選取回覆中選取內容時， Google 助理會以這個值填滿版位。

在以下範例中，Webhook 程式碼會接收並儲存所選選項 變數中：

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."
      }
    }
  }
}

清單

行動裝置上的清單選取回應範例

清單會以垂直清單的形式，向使用者呈現多個項目的直向清單， 以輕觸或語音輸入的方式選取當使用者從清單中選取項目時 Google 助理會產生使用者查詢 (即時通訊泡泡)，其中包含清單的標題 項目。

清單適用於必須釐清選項的重要問題，或在使用者需要時 需要選擇掃描所有選項適用對象 例如，「Peter」你是不是要跟 Peter Jons 還是 Peter Hans 說話？

清單必須包含至少 2 個清單項目，最多 30 個。開啟 元素一開始顯示的 元素會視使用者的裝置而定，且常見的啟動條件 的數字會是 10 個項目。

建立名單

建立清單時，提示只包含使用者各個項目的鍵 選項。在 Webhook 中，您要定義與這些鍵相對應的項目 是根據 Entry 類型。

定義為 Entry 物件的清單項目會顯示以下顯示畫面 特性：

  • 標題
    • 固定字型和字型大小
    • 長度上限：1 行 (以刪節號截斷...)
    • 必要項目不得重複 (支援語音選項功能)
  • 說明 (選填)
    • 固定字型和字型大小
    • 長度上限：2 行 (以刪節號截斷...)
  • 圖片 (選用)
    • 大小：48x48 像素

視覺選擇回應需要您根據其運算單元名稱覆寫類型 處於TYPE_REPLACE模式下的執行階段類型。在您的 Webhook 中 事件處理常式，參照類型，依其版位名稱覆寫類型 ( 在 name 屬性中新增選取回應)。

覆寫類型後，結果類型代表項目清單 使用者可以選擇要使用的 Google 助理顯示畫面

屬性

清單回應類型包含下列屬性：

屬性 類型 需求 說明
items ListItem 陣列 必填 代表清單中使用者可以選取的項目。每項 ListItem 包含的鍵，會對應到 清單項目
title 字串 選用 清單的純文字標題，僅顯示一行。如果沒有標題 已指定資訊卡高度收合。
subtitle 字串 選用 清單的純文字副標題。

程式碼範例

下列範例定義在 Webhook 程式碼或 JSON WebhookResponse。不過，您可以改用 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."
     }
   }
 }
}

集合

集合會水平捲動，使用者輕觸一下就能選取項目 或語音輸入相較於 lists，集合有大型圖塊， 提供更豐富的內容構成集合的動態磚與 內含圖片的基本資訊卡當使用者從珍藏內容中選取項目時，Google 助理 會產生包含商品標題的使用者查詢 (即時通訊泡泡)。

向使用者提供不同選項時，集合就能派上用場。不過， 不需要直接比較名單和清單。一般來說， 清單納入珍藏內容，因為這類清單比較容易瀏覽 透過語音進行互動。

集合必須包含至少 2 個圖塊，最多 10 個。啟用 在支援顯示功能的裝置上，使用者只要向左或向右滑動，即可捲動瀏覽資訊卡 必須先嵌入集合，才能選取項目

建立最愛

建立集合時，提示只會包含對應下列項目的鍵： 供使用者選取在 Webhook 中，您要定義與這些項目對應的項目 採用的是 Entry 類型。

定義為 Entry 物件的集合項目會顯示以下顯示畫面 特性：

  • 圖片 (選用)
    • 圖片已強制調整為 128 dp 高 x 232 dp
    • 如果圖片的長寬比與圖片定界框不符 表示圖片置中，兩側皆有長條
    • 如果圖片連結損毀，系統會改用預留位置圖片
  • 標題 (必填)
    • 不支援純文字，例如 Markdown。格式選項與 基本資訊卡複合式回應
    • 如未指定標題，資訊卡高度會收合。
    • 必要項目不得重複 (支援語音選項功能)
  • 說明 (選填)
    • 不支援純文字，例如 Markdown。格式選項與 基本資訊卡複合式回應

視覺選擇回應需要您根據其運算單元名稱覆寫類型 處於TYPE_REPLACE模式下的執行階段類型。在您的 Webhook 中 事件處理常式，參照類型，依其版位名稱覆寫類型 ( 在 name 屬性中新增選取回應)。

覆寫型別後，結果類型代表 使用者可選擇的 Google 助理顯示項目。

屬性

集合回應類型包含下列屬性：

屬性 類型 需求 說明
items CollectionItem 陣列 必填 代表使用者可在集合中選取的項目。每項 CollectionItem 包含對應至參照類型的鍵 收藏項目
title 字串 選用 珍藏內容的純文字標題。標題在 來支援語音選項集合。
subtitle 字串 選用 珍藏內容的純文字副標題。
image_fill ImageFill 選用 資訊卡和映像檔容器之間的框線；當 圖片的長寬比與圖片容器的長寬比不符 比例。

程式碼範例

下列範例定義在 Webhook 程式碼或 JSON Webhook 回應。不過，您可以改用 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 都會開啟定義的網址，因此請盡量提供實用資訊 輸入要傳達的訊息

集合瀏覽項目具有下列顯示特性：

  • 圖片 (選用)
    • 圖片已強制調整為 128 dp 高 x 232 dp。
    • 如果圖片的長寬比與圖片定界框不相符，則圖片會 兩側、頂部和底部長條都置中。圖表的顏色 長條是由集合瀏覽 ImageFill 屬性決定。
    • 如果圖片連結損毀，則會使用預留位置圖片。
  • 標題 (必填)
  • 說明 (選填)
  • 頁尾 (選填)
    • 純文字；不支援 Markdown。

屬性

集合瀏覽回應類型具備下列屬性：

屬性 類型 需求 說明
item 物件 必填 代表使用者可在集合中選取的項目。
image_fill ImageFill 選用 圖片容器的顯示比例不符合圖片容器的顯示比例時，資訊卡和圖片容器之間的框線。

集合瀏覽 item 具備下列屬性：

屬性 類型 需求 說明
title 字串 必填 珍藏內容項目的純文字標題。
description 字串 選用 系列商品的說明。
footer 字串 選用 珍藏內容項目的頁尾文字，顯示在說明下方。
image Image 選用 已顯示系列作品項目的圖片。
openUriAction OpenUrl 必填 選取集合項目時要開啟的 URI。

程式碼範例

下列範例定義在 Webhook 程式碼或 JSON Webhook 回應。不過，您可以改用 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."
      }
    }
  }
}