本頁面由 Cloud Translation API 翻譯而成。

Switch to English

視覺呈現回應

如果您希望使用者在多個選項中選取一個選項，則使用視覺選取回應，以便繼續進行您的動作。您可以在提示中使用下列視覺化選項回應類型：

清單
集合
瀏覽珍藏內容

定義視覺選取回應時，請使用具備 RICH_RESPONSE 途徑功能的候選項目，讓 Google 助理只在支援的裝置上傳回回應。提示中，每個 content 物件只能使用一個複合式回應。

新增視覺呈現回應

視覺選取回應會使用場景中填入的版位，藉此呈現使用者可選取和處理所選項目的選項。當使用者選取某個項目時，Google 助理會將選取的項目值做為引數傳遞至 Webhook。接著，在引數值中，會收到選定項目的索引鍵。

使用視覺呈現回應之前，您必須先定義代表使用者日後選取的回應的「類型」。在 Webhook 中，您可以透過要顯示選項的內容覆寫該類型。

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

在場景中，在「運算單元填充」部分新增運算單元。
為視覺選取回應選取先前定義的「類型」，並為名稱命名。Webhook 日後會使用這個運算單元名稱參照類型。
勾選 [Call your Webhook] 方塊，並提供要在 Webhook 中用於視覺選取回應的事件處理常式名稱。
勾選 [傳送提示] 方塊。
在提示中，根據您想傳回的視覺選取回應，提供適當的 JSON 或 YAML 內容。
在 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 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 中的提示內容。不過，您也可以在動作建構工具中定義提示內容 (作為 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."
     }
   }
 }
}

集合

集合可水平捲動，使用者可透過輕觸或語音輸入的方式選取一個項目。與清單相比，集合具有大型圖塊，並允許顯示更豐富的內容。集合的圖塊，與含有圖片的基本資訊卡類似。當使用者從集合中選取項目時，Google 助理會產生包含該項目標題的使用者查詢 (即時通訊泡泡)。

當使用者看到各種選項時，集合就非常實用，但不需要選項直接比較 (而不是清單)。一般來說，建議將「清單」設為集合，因為清單比較容易掃描，並與語音互動。

產品素材資源集合中必須至少包含 2 個圖塊。在支援顯示裝置的裝置中，使用者只要向左或向右滑動，就可以在集合中捲動資訊卡。

建立集合

建立集合時，您的提示只會含有使用者可選取的所有項目的索引鍵。在 Webhook 中，您可以根據 Entry 類型定義與這些鍵對應的項目。

定義為 Entry 物件的集合項目包含下列顯示特性：

圖片 (選用)
- 圖片強制設為 128 dp 高 x 232 dp 寬
- 如果圖片長寬比與圖片的定界框不符，則圖片的兩側是長條的中間
- 如果圖片連結無效，系統會改用預留位置圖片
標題 (必填)
- 純文字，不支援 Markdown。格式選項與基本資訊卡複合式回應相同
- 如未指定標題，則會收合資訊卡高度。
- 不得重複 (需支援語音選項)
說明 (選填)
- 純文字，不支援 Markdown。格式選項與基本資訊卡複合式回應相同

覆寫類型後，結果類型代表使用者可從該 Google 助理顯示的項目集合。

屬性

集合回應類型具有以下屬性：

屬性	類型	條件	說明
`items`	`CollectionItem` 的陣列	必填	代表集合中的一個項目，供使用者選取。每個 `CollectionItem` 都包含一個索引鍵，該集合會對應至集合項目的參照類型。
`title`	字串	選用	產品素材資源集合的純文字文字。標題中的標題不得重複，以支援選取語音的功能。
`subtitle`	字串	選用	產品素材資源集合的純文字。
`image_fill`	`ImageFill`	選用	圖片與圖片容器之間的邊框，在圖片的長寬比與圖片容器的長寬比不符時使用。

程式碼範例

下列範例定義了 Webhook 程式碼或 JSON Webhook 回應中的提示內容。不過，您也可以在動作建構工具中定義提示內容 (作為 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。系統會使用與基本資訊卡複合式回應相同的格式。
- 如果沒有定義標題，資訊卡高度就會收合。
說明 (選填)
- 純文字，不支援 Markdown。系統會使用與基本資訊卡複合式回應相同的格式。
頁尾 (選填)
- 純文字；不支援 Markdown。

屬性

集合瀏覽回應類型具有以下屬性：

屬性	類型	條件	說明
`item`	物件	必填	代表集合中的一個項目，供使用者選取。
`image_fill`	`ImageFill`	選用	圖片與圖片容器之間的邊框，在圖片長寬比與圖片容器的長寬比不符時使用。

集合瀏覽「item」包含下列屬性：

屬性	類型	條件	說明
`title`	字串	必填	集合項目的純文字標題。
`description`	字串	選用	集合項目的說明。
`footer`	字串	選用	集合項目的頁尾文字，顯示在說明下方。
`image`	`Image`	選用	集合項目的圖片。
`openUriAction`	`OpenUrl`	必填	選取集合項目時要開啟的 URI。

程式碼範例

下列範例定義了 Webhook 程式碼或 JSON Webhook 回應中的提示內容。不過，您也可以在動作建構工具中定義提示內容 (作為 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."
      }
    }
  }
}