Phản hồi lựa chọn bằng hình ảnh

Sử dụng phản hồi lựa chọn hình ảnh nếu bạn muốn người dùng chọn một trong nhiều tuỳ chọn để tiếp tục thao tác với Hành động của bạn. Bạn có thể sử dụng các loại phản hồi lựa chọn hình ảnh sau đây trong lời nhắc:

  • Danh sách
  • Bộ sưu tập
  • Duyệt xem bộ sưu tập

Khi xác định phản hồi lựa chọn hình ảnh, hãy sử dụng một đề xuất có chức năng nền tảng RICH_RESPONSE để Trợ lý Google chỉ trả về phản hồi trên các thiết bị được hỗ trợ. Bạn chỉ có thể sử dụng một phản hồi nhiều định dạng cho mỗi đối tượng content trong câu lệnh.

Thêm phản hồi lựa chọn bằng hình ảnh

Phản hồi lựa chọn hình ảnh sử dụng tính năng điền vị trí vào cảnh để hiển thị các tuỳ chọn mà người dùng có thể chọn và xử lý mục đã chọn. Khi người dùng chọn một mục, Trợ lý sẽ chuyển giá trị mục đã chọn đến webhook của bạn để làm đối số. Sau đó, trong giá trị đối số, bạn sẽ nhận được khoá cho mục đã chọn.

Trước khi có thể sử dụng phản hồi lựa chọn hình ảnh, bạn phải xác định một loại đại diện cho phản hồi mà người dùng chọn sau đó. Trong webhook, hãy ghi đè loại đó bằng nội dung mà bạn muốn hiển thị để lựa chọn.

Để thêm phản hồi lựa chọn hình ảnh vào một cảnh trong Trình tạo hành động, hãy làm theo các bước sau:

  1. Trong cảnh đó, hãy thêm một ô vào phần Lấp đầy khoảng trống.
  2. Chọn một loại đã xác định trước đó cho phản hồi lựa chọn hình ảnh và đặt tên cho kiểu đó. Webhook của bạn sử dụng tên vị trí này để tham chiếu loại này sau.
  3. Đánh dấu vào hộp Gọi webhook và cung cấp tên của trình xử lý sự kiện trong webhook mà bạn muốn sử dụng cho phản hồi lựa chọn hình ảnh.
  4. Đánh dấu vào hộp Gửi lời nhắc.
  5. Trong lời nhắc, hãy cung cấp nội dung JSON hoặc YAML phù hợp dựa trên phản hồi lựa chọn hình ảnh mà bạn muốn trả về.
  6. Trong webhook, hãy làm theo các bước trong phần Xử lý các mục đã chọn.

Hãy xem các phần danh sách, bộ sưu tậpduyệt xem bộ sưu tập bên dưới để biết các thuộc tính lời nhắc có sẵn và ví dụ về các loại ghi đè.

Xử lý các mục đã chọn

Phản hồi lựa chọn hình ảnh yêu cầu bạn xử lý lựa chọn của người dùng trong mã webhook. Khi người dùng chọn nội dung nào đó trong phản hồi lựa chọn bằng hình ảnh, Trợ lý Google sẽ lấp đầy ô bằng giá trị đó.

Trong ví dụ sau, mã webhook nhận và lưu trữ tuỳ chọn đã chọn trong một biến:

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

Danh sách

Ví dụ về phản hồi lựa chọn danh sách trên thiết bị di động

Danh sách sẽ hiển thị cho người dùng một danh sách dọc gồm nhiều mục và cho phép họ chọn một mục bằng cách chạm hoặc nhập bằng giọng nói. Khi người dùng chọn một mục trong danh sách, Trợ lý sẽ tạo một truy vấn của người dùng (bong bóng trò chuyện) chứa tiêu đề của mục đó trong danh sách.

Danh sách phù hợp khi cần phải phân biệt các tuỳ chọn hoặc khi người dùng cần chọn giữa các tuỳ chọn cần được quét toàn bộ. Ví dụ: bạn cần nói chuyện với "Peter" nào, Peter Jons hay Peter Hans?

Danh sách phải chứa tối thiểu 2 và tối đa 30 mục trong danh sách. Số lượng phần tử hiển thị ban đầu tuỳ thuộc vào thiết bị của người dùng và số bắt đầu phổ biến là 10 mục.

Tạo danh sách

Khi tạo một danh sách, lời nhắc của bạn chỉ chứa các khoá cho mỗi mục mà người dùng có thể chọn. Trong webhook, bạn sẽ xác định các mục tương ứng với các khoá đó dựa trên loại Entry.

Các mục trong danh sách được xác định là đối tượng Entry có các đặc điểm hiển thị sau:

  • Tiêu đề
    • Phông chữ và cỡ chữ cố định
    • Độ dài tối đa: 1 dòng (bị cắt bớt bằng dấu ba chấm...)
    • Bắt buộc phải là duy nhất (để hỗ trợ lựa chọn giọng nói)
  • Nội dung mô tả (không bắt buộc)
    • Phông chữ và cỡ chữ cố định
    • Độ dài tối đa: 2 dòng (bị cắt bớt bằng dấu ba chấm...)
  • Hình ảnh (không bắt buộc)
    • Kích thước: 48x48 px

Phản hồi lựa chọn hình ảnh yêu cầu bạn ghi đè một loại theo tên vị trí bằng cách sử dụng loại thời gian chạy ở chế độ TYPE_REPLACE. Trong trình xử lý sự kiện webhook, hãy tham chiếu loại cần ghi đè bằng tên vị trí (được xác định trong phần Thêm phản hồi lựa chọn) trong thuộc tính name.

Sau khi một loại bị ghi đè, loại kết quả sẽ đại diện cho danh sách các mục mà người dùng có thể chọn trong số các mục mà Trợ lý hiển thị.

Thuộc tính

Loại phản hồi cho danh sách có các thuộc tính sau:

Tài sản Loại Yêu cầu Nội dung mô tả
items mảng ListItem Bắt buộc Đại diện cho một mục trong danh sách mà người dùng có thể chọn. Mỗi ListItem chứa một khoá liên kết tới một loại được tham chiếu cho mục trong danh sách.
title string Không bắt buộc Tiêu đề văn bản thuần tuý của danh sách, giới hạn ở một dòng. Nếu bạn không chỉ định tiêu đề, thì chiều cao thẻ sẽ thu gọn.
subtitle string Không bắt buộc Tiêu đề phụ bằng văn bản thuần tuý của danh sách.

Mã mẫu

Các mẫu sau đây xác định nội dung lời nhắc trong mã webhook hoặc trong JSON webhookResponse. Tuy nhiên, bạn cũng có thể xác định nội dung lời nhắc trong Trình tạo hành động (dưới dạng YAML hoặc 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."
     }
   }
 }
}

Bộ sưu tập

Một bộ sưu tập sẽ cuộn theo chiều ngang và cho phép người dùng chọn một mục bằng cách chạm hoặc nhập bằng giọng nói. So với danh sách, bộ sưu tập có các ô lớn và cho phép nội dung phong phú hơn. Các thẻ thông tin tạo nên một bộ sưu tập tương tự như thẻ cơ bản có hình ảnh. Khi người dùng chọn một mục trong bộ sưu tập, Trợ lý sẽ tạo một truy vấn của người dùng (bong bóng trò chuyện) chứa tiêu đề của mục đó.

Bộ sưu tập là bộ sưu tập phù hợp khi người dùng hiển thị nhiều tuỳ chọn, nhưng không bắt buộc phải so sánh trực tiếp (so với danh sách). Nhìn chung, hãy ưu tiên danh sách hơn bộ sưu tập vì danh sách dễ quét và tương tác bằng giọng nói hơn.

Bộ sưu tập phải chứa tối thiểu 2 và tối đa 10 ô. Trên các thiết bị có khả năng hiển thị, người dùng có thể vuốt sang trái hoặc sang phải để cuộn qua các thẻ trong một bộ sưu tập trước khi chọn một mục.

Tạo bộ sưu tập

Khi tạo một tập hợp, lời nhắc của bạn chỉ chứa khoá cho mỗi mục mà người dùng có thể chọn. Trong webhook, bạn sẽ xác định các mục tương ứng với các khoá đó dựa trên loại Entry.

Các mục của bộ sưu tập được xác định là đối tượng Entry có các đặc điểm hiển thị sau:

  • Hình ảnh (không bắt buộc)
    • Hình ảnh bắt buộc phải có kích thước cao 128 dp x rộng 232 dp
    • Nếu tỷ lệ khung hình không khớp với hộp giới hạn hình ảnh, thì hình ảnh sẽ được căn giữa với các thanh ở hai bên
    • Nếu đường liên kết của hình ảnh bị hỏng, thì hệ thống sẽ sử dụng hình ảnh giữ chỗ
  • Tiêu đề (bắt buộc)
    • Văn bản thuần tuý, Markdown không được hỗ trợ. Các tuỳ chọn định dạng giống như phản hồi nhiều định dạng về thẻ cơ bản
    • Chiều cao thẻ sẽ thu gọn nếu bạn không chỉ định tiêu đề.
    • Bắt buộc phải là duy nhất (để hỗ trợ lựa chọn giọng nói)
  • Nội dung mô tả (không bắt buộc)
    • Văn bản thuần tuý, Markdown không được hỗ trợ. Các tuỳ chọn định dạng giống như phản hồi nhiều định dạng về thẻ cơ bản

Phản hồi lựa chọn hình ảnh yêu cầu bạn ghi đè một loại theo tên vị trí bằng cách sử dụng loại thời gian chạy ở chế độ TYPE_REPLACE. Trong trình xử lý sự kiện webhook, hãy tham chiếu loại cần ghi đè bằng tên vị trí (được xác định trong phần Thêm phản hồi lựa chọn) trong thuộc tính name.

Sau khi một loại bị ghi đè, loại kết quả sẽ biểu thị tập hợp các mục mà người dùng có thể chọn trong số các mục mà Trợ lý hiển thị.

Thuộc tính

Loại phản hồi của bộ sưu tập có các thuộc tính sau:

Tài sản Loại Yêu cầu Nội dung mô tả
items mảng CollectionItem Bắt buộc Đại diện cho một mục trong tập hợp mà người dùng có thể chọn. Mỗi CollectionItem chứa một khoá liên kết tới một loại được tham chiếu cho mục trong bộ sưu tập.
title string Không bắt buộc Tiêu đề ở dạng văn bản thuần tuý của bộ sưu tập. Tiêu đề phải là duy nhất trong một bộ sưu tập để hỗ trợ việc lựa chọn giọng nói.
subtitle string Không bắt buộc Tiêu đề phụ ở dạng văn bản thuần tuý của bộ sưu tập.
image_fill ImageFill Không bắt buộc Đường viền giữa thẻ và vùng chứa hình ảnh sẽ được sử dụng khi tỷ lệ khung hình của hình ảnh không khớp với tỷ lệ khung hình của vùng chứa hình ảnh.

Mã mẫu

Các mẫu sau đây xác định nội dung lời nhắc trong mã webhook hoặc trong phản hồi webhook. Tuy nhiên, bạn cũng có thể xác định nội dung lời nhắc trong Trình tạo hành động (dưới dạng YAML hoặc 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."
      }
    }
  }
}

Duyệt xem bộ sưu tập

Tương tự như một bộ sưu tập, tính năng duyệt xem bộ sưu tập là một phản hồi đa dạng thức cho phép người dùng cuộn qua các thẻ tuỳ chọn. Tính năng duyệt qua bộ sưu tập được thiết kế riêng cho nội dung web và sẽ mở ô đã chọn trong trình duyệt web (hoặc trình duyệt AMP nếu tất cả các ô đều hỗ trợ AMP).

Phản hồi duyệt qua bộ sưu tập chứa tối thiểu 2 và tối đa 10 ô. Trên các thiết bị có khả năng hiển thị, người dùng có thể vuốt lên hoặc xuống để cuộn qua các thẻ trước khi chọn một mục.

Tạo duyệt qua bộ sưu tập

Khi tạo một trình duyệt bộ sưu tập, hãy cân nhắc cách người dùng sẽ tương tác với lời nhắc này. Mỗi khi duyệt qua bộ sưu tập item sẽ mở URL đã xác định, vì vậy, hãy cung cấp thông tin chi tiết hữu ích cho người dùng.

Các mục duyệt qua bộ sưu tập có các đặc điểm hiển thị sau:

  • Hình ảnh (không bắt buộc)
    • Hình ảnh bắt buộc phải có kích thước cao 128 dp x rộng 232 dp.
    • Nếu tỷ lệ khung hình không khớp với hộp giới hạn hình ảnh, thì hình ảnh sẽ được đặt ở giữa với các thanh ở hai bên hoặc trên cùng và dưới cùng. Màu của thanh được xác định theo thuộc tính ImageFill duyệt qua bộ sưu tập.
    • Nếu đường liên kết của hình ảnh bị hỏng, thì hình ảnh của phần giữ chỗ sẽ được dùng để thay thế.
  • Tiêu đề (bắt buộc)
    • Văn bản thuần tuý, Markdown không được hỗ trợ. Định dạng giống như phản hồi nhiều định dạng thẻ cơ bản được sử dụng.
    • Chiều cao thẻ sẽ thu gọn nếu không có tiêu đề nào được xác định.
  • Nội dung mô tả (không bắt buộc)
  • Chân trang (không bắt buộc)
    • Văn bản thuần tuý; Không hỗ trợ Markdown.

Thuộc tính

Loại phản hồi duyệt qua bộ sưu tập có các thuộc tính sau:

Tài sản Loại Yêu cầu Nội dung mô tả
item đối tượng Bắt buộc Đại diện cho một mục trong tập hợp mà người dùng có thể chọn.
image_fill ImageFill Không bắt buộc Đường viền giữa thẻ và vùng chứa hình ảnh sẽ được sử dụng khi tỷ lệ khung hình của hình ảnh không khớp với tỷ lệ khung hình của vùng chứa hình ảnh.

Tính năng duyệt qua bộ sưu tập item có các thuộc tính sau:

Tài sản Loại Yêu cầu Nội dung mô tả
title string Bắt buộc Tiêu đề ở dạng văn bản thuần tuý của mục trong bộ sưu tập.
description string Không bắt buộc Nội dung mô tả về mục bộ sưu tập.
footer string Không bắt buộc Văn bản chân trang cho mục trong bộ sưu tập, hiển thị bên dưới phần mô tả.
image Image Không bắt buộc Hình ảnh hiển thị cho mục trong bộ sưu tập.
openUriAction OpenUrl Bắt buộc URI sẽ mở khi mục trong bộ sưu tập được chọn.

Mã mẫu

Các mẫu sau đây xác định nội dung lời nhắc trong mã webhook hoặc trong phản hồi webhook. Tuy nhiên, bạn cũng có thể xác định nội dung lời nhắc trong Trình tạo hành động (dưới dạng YAML hoặc JSON).

Hàm 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."
      }
    }
  }
}