คําตอบการเลือกภาพ

ใช้การตอบสนองการเลือกภาพหากต้องการให้ผู้ใช้เลือกตัวเลือกใดตัวเลือกหนึ่งเพื่อดำเนินการต่อ คุณใช้ประเภทคำตอบการเลือกภาพต่อไปนี้เป็นส่วนหนึ่งของข้อความแจ้งได้

• รายการ
• คอลเล็กชัน
• เรียกดูคอลเล็กชัน

เมื่อกำหนดคำตอบของการเลือกภาพ ให้ใช้ตัวเลือกที่มีความสามารถ RICH_RESPONSE Surface เพื่อให้ Google Assistant แสดงผลการตอบกลับในอุปกรณ์ที่รองรับเท่านั้น คุณสามารถใช้การตอบกลับด้วยริชมีเดียได้เพียง 1 ครั้งต่อออบเจ็กต์ content ในพรอมต์

การเพิ่มคำตอบตัวเลือกภาพ

การตอบกลับการเลือกภาพจะใช้การเติมช่องในฉากเพื่อนำเสนอตัวเลือกที่ผู้ใช้สามารถเลือกและจัดการรายการที่เลือกได้ เมื่อผู้ใช้เลือกรายการ Assistant จะส่งค่ารายการที่เลือกไปยังเว็บฮุคเป็นอาร์กิวเมนต์ จากนั้น ในค่าอาร์กิวเมนต์ คุณจะได้รับคีย์สำหรับรายการที่เลือก

ก่อนใช้การตอบกลับการเลือกที่เป็นภาพ คุณต้องกำหนดประเภทซึ่งแสดงถึงการตอบกลับที่ผู้ใช้เลือกในภายหลัง ในเว็บฮุค คุณจะลบล้างเนื้อหา ที่ต้องการแสดงสำหรับการเลือก

หากต้องการเพิ่มการตอบสนองการเลือกภาพไปยังฉากใน Actions Builder ให้ทำตามขั้นตอนต่อไปนี้

1. ในฉาก ให้เพิ่มช่องลงในส่วนการเติมช่อง
2. เลือกประเภทที่กำหนดไว้ก่อนหน้าสำหรับการตอบสนองการเลือกภาพ แล้วตั้งชื่อ เว็บฮุคใช้ชื่อช่องโฆษณาเพื่ออ้างอิงประเภทในภายหลัง
3. เลือกช่องเรียกใช้เว็บฮุคและระบุชื่อเครื่องจัดการเหตุการณ์ในเว็บฮุคที่คุณต้องการใช้สำหรับการตอบสนองการเลือกภาพ
4. เลือกช่องส่งข้อความแจ้ง
5. ในพรอมต์ ให้ระบุเนื้อหา JSON หรือ YAML ที่เหมาะสมตามการตอบสนองของการเลือกภาพที่คุณต้องการแสดงผล
6. ในเว็บฮุค ให้ทำตามขั้นตอนในหัวข้อการจัดการรายการที่เลือก

ดูส่วนรายการ คอลเล็กชัน และการเรียกดูคอลเล็กชันด้านล่างเพื่อดูพร็อพเพอร์ตี้ข้อความแจ้งที่ใช้ได้และตัวอย่างของประเภทการลบล้าง

การจัดการรายการที่เลือก

การตอบกลับการเลือกภาพกำหนดให้คุณจัดการกับการเลือกของผู้ใช้ในโค้ดเว็บฮุค เมื่อผู้ใช้เลือกบางอย่างจากการตอบสนองด้วยภาพ Google Assistant จะเติมค่านั้นลงในช่อง

ในตัวอย่างต่อไปนี้ โค้ดเว็บฮุคจะได้รับและจัดเก็บตัวเลือกที่เลือกในตัวแปร

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}.`);
});

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {
        "prompt_option": "ITEM_1"
      }
    },
    "prompt": {
      "override": false,
      "firstSimple": {
        "speech": "You selected ITEM_1.",
        "text": "You selected ITEM_1."
      }
    }
  }
}

รายการ

ชุดรายการจะแสดงรายการสินค้าต่างๆ ในแนวตั้งให้กับผู้ใช้และช่วยให้ผู้ใช้สามารถเลือกรายการด้วยการแตะหรือการป้อนข้อมูลด้วยเสียง เมื่อผู้ใช้เลือกรายการจากรายการ Assistant จะสร้างคำค้นหาของผู้ใช้ (บับเบิลแชท) ที่มีชื่อของรายการ

รายการเหมาะสำหรับเวลาที่จำเป็นต้องมีตัวเลือกที่ชัดเจน หรือเมื่อผู้ใช้ต้องเลือกตัวเลือกที่ต้องสแกนทั้งหมด เช่น คุณต้องพูดกับ "Peter" ฝ่ายไหนนะ Peter Jons หรือ Peter Hans

โดยรายการต้องมีอย่างน้อย 2 รายการและสูงสุด 30 รายการ จำนวนองค์ประกอบที่แสดงในตอนแรกจะขึ้นอยู่กับอุปกรณ์ของผู้ใช้ และตัวเลขเริ่มต้นทั่วไปคือ 10 รายการ

การสร้างรายการ

เมื่อสร้างรายการ ข้อความแจ้งจะมีเฉพาะคีย์สําหรับแต่ละรายการที่ผู้ใช้เลือกได้ ในเว็บฮุค คุณจะกำหนดรายการที่สอดคล้องกับคีย์เหล่านั้นตามประเภท Entry

รายการที่กำหนดเป็นออบเจ็กต์ Entry มีลักษณะการแสดงผลดังต่อไปนี้

• ชื่อ
  • แบบอักษรและขนาดคงที่
  • ความยาวสูงสุด: 1 บรรทัด (ตัดด้วยจุดไข่ปลา...)
  • ต้องไม่ซ้ำกัน (เพื่อรองรับการเลือกด้วยเสียง)
• คำอธิบาย (ไม่บังคับ)
  • แบบอักษรและขนาดคงที่
  • ความยาวสูงสุด: 2 บรรทัด (ตัดด้วยจุดไข่ปลา...)
• รูปภาพ (ไม่บังคับ)
  • ขนาด: 48x48 พิกเซล

การตอบกลับการเลือกภาพกำหนดให้คุณลบล้างประเภทด้วยชื่อช่องโดยใช้ประเภทรันไทม์ในโหมด TYPE_REPLACE ในเครื่องจัดการเหตุการณ์ของเว็บฮุค ให้อ้างอิงประเภทเพื่อลบล้างด้วยชื่อช่อง (กำหนดไว้ในการเพิ่มการตอบกลับการเลือก) ในพร็อพเพอร์ตี้ name

หลังจากเขียนทับประเภทแล้ว ประเภทผลลัพธ์จะแสดงรายการที่ผู้ใช้เลือกได้จาก Assistant ที่แสดง

พร็อพเพอร์ตี้

ประเภทการตอบสนองแบบรายการมีพร็อพเพอร์ตี้ต่อไปนี้

รหัสตัวอย่าง

ตัวอย่างต่อไปนี้กำหนดเนื้อหาข้อความแจ้งในโค้ดเว็บฮุคหรือใน JSONเว็บฮุคResponse อย่างไรก็ตาม คุณอาจกำหนดเนื้อหาข้อความแจ้งใน Actions Builder (เป็น YAML หรือ JSON) แทนก็ได้

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'
      }
    ],
  }));
});

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

คอลเล็กชัน

คอลเล็กชันจะเลื่อนในแนวนอนและอนุญาตให้ผู้ใช้เลือก 1 รายการด้วยการแตะหรือการป้อนข้อมูลด้วยเสียง เมื่อเทียบกับรายการแล้ว คอลเล็กชันจะมีไทล์ขนาดใหญ่และ ช่วยให้เห็นเนื้อหาที่สมบูรณ์ยิ่งขึ้น การ์ดที่ประกอบเป็นคอลเล็กชันจะคล้ายกับการ์ดพื้นฐานที่มีรูปภาพ เมื่อผู้ใช้เลือกรายการจากคอลเล็กชัน Assistant จะสร้างคำค้นหาของผู้ใช้ (บับเบิลแชท) ที่มีชื่อของรายการ

คอลเล็กชันจะใช้งานได้ดีเมื่อนำเสนอตัวเลือกต่างๆ แก่ผู้ใช้ แต่ไม่จำเป็นต้องเปรียบเทียบโดยตรง (เทียบกับรายการ) โดยทั่วไปแล้ว แนะนำให้ใช้รายการเป็นคอลเล็กชัน เพราะรายการดังกล่าวช่วยให้สแกนด้วยสายตาและโต้ตอบด้วยเสียงได้ง่ายกว่า

คอลเล็กชันต้องมีไทล์อย่างน้อย 2 รายการและสูงสุด 10 รายการ ในอุปกรณ์ที่สามารถใช้งานจอแสดงผล ผู้ใช้จะเลื่อนไปทางซ้ายหรือขวาเพื่อเลื่อนผ่านการ์ดในคอลเล็กชันก่อนเลือกรายการได้

การสร้างคอลเล็กชัน

เมื่อสร้างคอลเล็กชัน ข้อความแจ้งจะมีเฉพาะคีย์สำหรับแต่ละรายการที่ผู้ใช้เลือกได้ ในเว็บฮุค คุณจะกำหนดรายการที่ตรงกับคีย์เหล่านั้นตามประเภท Entry

รายการคอลเล็กชันที่กำหนดเป็นออบเจ็กต์ Entry มีลักษณะการแสดงผลดังต่อไปนี้

• รูปภาพ (ไม่บังคับ)
  • บังคับรูปภาพให้สูง 128 dp x กว้าง 232 dp
  • หากสัดส่วนภาพไม่ตรงกับกรอบล้อมรอบรูปภาพ แสดงว่ารูปภาพอยู่กึ่งกลางพร้อมแถบที่ด้านใดด้านหนึ่ง
  • หากลิงก์รูปภาพเสีย ระบบจะใช้รูปภาพที่มีตัวยึดตำแหน่งแทน
• ชื่อ (ต้องระบุ)
  • ข้อความธรรมดา ไม่รองรับมาร์กดาวน์ ตัวเลือกการจัดรูปแบบเหมือนกับ การตอบสนองแบบสมบูรณ์ของการ์ดแบบพื้นฐาน
  • ความสูงของการ์ดจะยุบไปหากไม่มีการระบุชื่อ
  • ต้องไม่ซ้ำกัน (เพื่อรองรับการเลือกด้วยเสียง)
• คำอธิบาย (ไม่บังคับ)
  • ข้อความธรรมดา ไม่รองรับมาร์กดาวน์ ตัวเลือกการจัดรูปแบบเหมือนกับ การตอบสนองแบบสมบูรณ์ของการ์ดแบบพื้นฐาน

การตอบกลับการเลือกภาพกำหนดให้คุณลบล้างประเภทด้วยชื่อช่องโดยใช้ประเภทรันไทม์ในโหมด TYPE_REPLACE ในเครื่องจัดการเหตุการณ์ของเว็บฮุค ให้อ้างอิงประเภทเพื่อลบล้างด้วยชื่อช่อง (กำหนดไว้ในการเพิ่มการตอบกลับการเลือก) ในพร็อพเพอร์ตี้ name

หลังจากเขียนทับประเภทแล้ว ประเภทผลลัพธ์จะแสดงคอลเล็กชันรายการที่ผู้ใช้สามารถเลือกได้จาก Assistant ที่แสดง

พร็อพเพอร์ตี้

ประเภทการตอบสนองของคอลเล็กชันมีพร็อพเพอร์ตี้ต่อไปนี้

รหัสตัวอย่าง

ตัวอย่างต่อไปนี้กำหนดเนื้อหาข้อความแจ้งในโค้ดของเว็บฮุคหรือในการตอบกลับเว็บฮุค JSON อย่างไรก็ตาม คุณอาจกำหนดเนื้อหาข้อความแจ้งใน Actions Builder (เป็น YAML หรือ JSON) แทนก็ได้

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'
      }
    ],
  }));
});

{
  "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 จะเปิด URL ที่กำหนดไว้ ดังนั้นควรให้รายละเอียดที่เป็นประโยชน์แก่ผู้ใช้

รายการเรียกดูคอลเล็กชันมีลักษณะการแสดงผลดังต่อไปนี้

• รูปภาพ (ไม่บังคับ)
  • บังคับรูปภาพให้สูง 128 dp x กว้าง 232 dp
  • หากสัดส่วนภาพไม่ตรงกับกรอบล้อมรอบรูปภาพ รูปภาพจะถูกจัดกึ่งกลางด้วยแถบที่ด้านข้างหรือด้านบนและด้านล่าง สีของแถบจะกำหนดโดยพร็อพเพอร์ตี้ ImageFill สำหรับการเรียกดูคอลเล็กชัน
  • หากลิงก์รูปภาพเสีย ระบบจะใช้รูปภาพที่มีตัวยึดตำแหน่งแทน
• ชื่อ (ต้องระบุ)
  • ข้อความธรรมดา ไม่รองรับมาร์กดาวน์ จะใช้รูปแบบเดียวกับการตอบสนองที่สมบูรณ์ของการ์ดแบบพื้นฐาน
  • ความสูงของการ์ดจะยุบไปหากไม่มีการระบุชื่อ
• คำอธิบาย (ไม่บังคับ)
  • ข้อความธรรมดา ไม่รองรับมาร์กดาวน์ จะใช้รูปแบบเดียวกับการตอบสนองที่สมบูรณ์ของการ์ดแบบพื้นฐาน
• ส่วนท้าย (ไม่บังคับ)
  • ข้อความธรรมดา ไม่รองรับมาร์กดาวน์

พร็อพเพอร์ตี้

ประเภทการตอบกลับการเรียกดูคอลเล็กชันมีพร็อพเพอร์ตี้ต่อไปนี้

การเรียกดูคอลเล็กชัน item มีพร็อพเพอร์ตี้ต่อไปนี้:

รหัสตัวอย่าง

ตัวอย่างต่อไปนี้กำหนดเนื้อหาข้อความแจ้งในโค้ดของเว็บฮุคหรือในการตอบกลับเว็บฮุค JSON อย่างไรก็ตาม คุณอาจกำหนดเนื้อหาข้อความแจ้งใน Actions Builder (เป็น YAML หรือ JSON) แทนก็ได้

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

{
 "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"
       }
     }
   }
 ]
}

// 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'
          }
        }
      ]
  }));
});

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