विज़ुअल चुनने पर मिलने वाले जवाब

अगर आप चाहते हैं कि उपयोगकर्ता आपकी सेट की गई कार्रवाई को जारी रखने के लिए, कई विकल्पों में से कोई एक विकल्प चुनें, तो विज़ुअल जवाब का इस्तेमाल करें. अनुरोध के हिस्से के तौर पर, नीचे दिए गए विज़ुअल चुनने के जवाब इस्तेमाल किए जा सकते हैं:

  • सूची
  • डेटा इकट्ठा करना
  • कलेक्शन ब्राउज़ करें

विज़ुअल चुनने के लिए रिस्पॉन्स तय करते समय, RICH_RESPONSE सरफ़ेस क्षमता वाले कैंडिडेट का इस्तेमाल करें, ताकि Google Assistant सिर्फ़ उन डिवाइसों पर जवाब दे पाए जिन पर यह सुविधा काम करती है. प्रॉम्प्ट में, हर content ऑब्जेक्ट के लिए सिर्फ़ एक रिच रिस्पॉन्स का इस्तेमाल किया जा सकता है.

विज़ुअल चुनने के लिए जवाब जोड़ा जा रहा है

विज़ुअल चुनने के रिस्पॉन्स, किसी सीन को भरने के लिए स्लॉट का इस्तेमाल करते हैं. इन दोनों में, ऐसे विकल्प पेश किए जाते हैं जिन्हें उपयोगकर्ता चुना जा सकता है और चुने गए आइटम को हैंडल कर सकता है. जब उपयोगकर्ता किसी आइटम को चुनते हैं, तो Assistant चुने गए आइटम की वैल्यू को तर्क के तौर पर आपके वेबहुक पर भेजती है. फिर, आर्ग्यूमेंट वैल्यू में, आपको चुने गए आइटम के लिए कुंजी मिलती है.

विज़ुअल चुनने के रिस्पॉन्स का इस्तेमाल करने से पहले, आपको एक टाइप तय करना होगा जो उपयोगकर्ता के चुने गए जवाब को दिखाए. अपने वेबहुक में, उस टाइप को उस कॉन्टेंट से बदल दिया जाता है जिसे आपको चुनने के लिए दिखाना है.

Actions Builder में किसी सीन में विज़ुअल चुनने का रिस्पॉन्स जोड़ने के लिए, यह तरीका अपनाएं:

  1. सीन में, स्लॉट फ़िल सेक्शन में एक स्लॉट जोड़ें.
  2. विज़ुअल चुनने के जवाब के लिए, पहले से तय किया गया टाइप चुनें और उसे एक नाम दें. आपका वेबहुक इस स्लॉट नाम का इस्तेमाल बाद में टाइप के बारे में बताने के लिए करता है.
  3. अपने वेबहुक को कॉल करें बॉक्स को चुनें और अपने वेबहुक में उस इवेंट हैंडलर का नाम दें जिसका इस्तेमाल आपको विज़ुअल चुनने के जवाब के लिए करना है.
  4. प्रॉम्प्ट भेजें बॉक्स पर सही का निशान लगाएं.
  5. प्रॉम्प्ट में, आपको जो विज़ुअल चुनने के रिस्पॉन्स चाहिए उनके आधार पर, सही JSON या YAML कॉन्टेंट दें.
  6. अपने वेबहुक में, चुने गए आइटम को मैनेज करने में दिया गया तरीका अपनाएं.

उपलब्ध प्रॉम्प्ट प्रॉपर्टी और बदलाव करने के तरीकों के उदाहरणों के लिए, नीचे सूची, कलेक्शन, और कलेक्शन ब्राउज़ करें सेक्शन देखें.

चुने गए आइटम मैनेज करना

विज़ुअल चुनने के रिस्पॉन्स के लिए, आपको अपने वेबहुक कोड में उपयोगकर्ता के चुने गए विकल्प को मैनेज करना होगा. जब उपयोगकर्ता विज़ुअल चुनने के जवाब से कुछ चुनता है, तो Google Assistant उस स्लॉट में वैल्यू डाल देती है.

यहां दिए गए उदाहरण में, वेबहुक कोड चुने गए विकल्प को एक वैरिएबल में लेता है और सेव करता है:

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

सूची

मोबाइल डिवाइस पर सूची चुनने के जवाब का उदाहरण

यह सूची, उपयोगकर्ताओं को कई आइटम की वर्टिकल सूची दिखाती है. इसकी मदद से, वे किसी एक आइटम को छूकर या वॉइस इनपुट से चुन सकते हैं. जब कोई उपयोगकर्ता सूची में से कोई आइटम चुनता है, तो Assistant एक उपयोगकर्ता क्वेरी (चैट बबल) जनरेट करती है, जिसमें सूची के आइटम का नाम होता है.

सूचियों का इस्तेमाल तब करना चाहिए, जब विकल्पों को साफ़ तौर पर बताना ज़रूरी हो या जब उपयोगकर्ता को ऐसे विकल्पों में से किसी एक को चुनना हो जिन्हें पूरी तरह से स्कैन करने की ज़रूरत है. जैसे आपको किस "पीटर" से बात करनी है, पीटर जॉन्स या पीटर हैंस?

सूचियों में कम से कम 2 और ज़्यादा से ज़्यादा 30 सूची आइटम होने चाहिए. शुरुआत में दिखाए गए एलिमेंट की संख्या, उपयोगकर्ता के डिवाइस पर निर्भर करती है. शुरुआत में दिखने वाली एलिमेंट की संख्या 10 आइटम होती है.

सूची बनाना

सूची बनाते समय, आपके प्रॉम्प्ट में हर उस आइटम के लिए सिर्फ़ कुंजियां होती हैं जिन्हें उपयोगकर्ता चुन सकता है. अपने वेबहुक में, Entry टाइप के आधार पर उन कुंजियों से जुड़े आइटम तय किए जाते हैं.

Entry ऑब्जेक्ट के तौर पर बताए गए सूची आइटम में, डिसप्ले की ये विशेषताएं होती हैं:

  • टाइटल
    • तय फ़ॉन्ट और फ़ॉन्ट साइज़
    • अधिकतम लंबाई: 1 पंक्ति (एलिप्सिस के साथ काटा गया...)
    • यूनीक होना ज़रूरी है, ताकि आवाज़ चुनने की सुविधा काम कर सके
  • जानकारी (ज़रूरी नहीं)
    • तय फ़ॉन्ट और फ़ॉन्ट साइज़
    • ज़्यादा से ज़्यादा लंबाई: 2 लाइनें (एलिप्सिस के साथ कटी हुई...)
  • इमेज (ज़रूरी नहीं)
    • साइज़: 48x48 पिक्सल

विज़ुअल चुनने के रिस्पॉन्स के लिए, आपको TYPE_REPLACE मोड में रनटाइम टाइप का इस्तेमाल करके, एक टाइप को उसके स्लॉट के नाम से बदलना होगा. अपने वेबहुक इवेंट हैंडलर में, name प्रॉपर्टी में उस टाइप के बारे में बताएं जिसे आपको स्लॉट के नाम से बदलना है. इसके बारे में चुनने के जवाब जोड़ना में बताया गया है.

टाइप को ओवरराइट करने के बाद, नतीजे के तौर पर दिखने वाले टाइप में उन आइटम की सूची दिखती है जिन्हें आपका उपयोगकर्ता Assistant की मदद से दिखा सकते हैं.

प्रॉपर्टी

सूची रिस्पॉन्स टाइप में ये प्रॉपर्टी होती हैं:

प्रॉपर्टी Type ज़रूरी शर्त ब्यौरा
items ListItem की कैटगरी ज़रूरी है सूची में वह आइटम दिखाता है जिसे उपयोगकर्ता चुन सकते हैं. हर ListItem में एक कुंजी होती है, जो सूची के आइटम के लिए रेफ़र किए गए टाइप के हिसाब से मैप करती है.
title स्ट्रिंग ज़रूरी नहीं सूची का सादा टेक्स्ट टाइटल, एक लाइन तक सीमित. अगर कोई टाइटल नहीं बताया गया है, तो कार्ड की ऊंचाई कम हो जाती है.
subtitle स्ट्रिंग ज़रूरी नहीं सूची का सामान्य टेक्स्ट सबटाइटल.

नमूना कोड

नीचे दिए गए सैंपल, वेबहुक कोड या JSON वेबहुक रिस्पॉन्स में प्रॉम्प्ट कॉन्टेंट को तय करते हैं. हालांकि, इसके बजाय ऐक्शन बिल्डर में प्रॉम्प्ट कॉन्टेंट को (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."
     }
   }
 }
}

डेटा इकट्ठा करना

कलेक्शन को हॉरिज़ॉन्टल रूप से स्क्रोल किया जाता है. इसकी मदद से, लोग टच या बोलकर एक आइटम को चुन सकते हैं. सूचियों के मुकाबले, संग्रह में बड़ी टाइल होती हैं और इनकी मदद से बेहतर कॉन्टेंट मिलता है. कलेक्शन बनाने वाली टाइल, इमेज वाले बेसिक कार्ड जैसी ही होती हैं. जब उपयोगकर्ता संग्रह से कोई आइटम चुनते हैं, तो Assistant उस आइटम के नाम वाली उपयोगकर्ता क्वेरी (चैट बबल) जनरेट करती है.

जब लोगों को कई विकल्प दिए जाते हैं, तो कलेक्शन दिखाना अच्छा होता है. हालांकि, उनमें से सीधे तौर पर तुलना करने की ज़रूरत नहीं होती, क्योंकि न कि सूचियों की तुलना की जाती है. आम तौर पर, कलेक्शन के लिए सूचियों को प्राथमिकता दें, क्योंकि सूचियों को विज़ुअल तौर पर स्कैन करना और बोलकर उनसे इंटरैक्ट करना आसान होता है.

कलेक्शन में, कम से कम 2 और ज़्यादा से ज़्यादा 10 टाइल होनी चाहिए. डिसप्ले की सुविधा वाले डिवाइसों पर, उपयोगकर्ता किसी आइटम को चुनने से पहले उस कलेक्शन में मौजूद कार्ड को स्क्रोल करने के लिए बाईं या दाईं ओर स्वाइप कर सकते हैं.

संग्रह बनाया जा रहा है

कलेक्शन बनाते समय, आपके प्रॉम्प्ट में हर उस आइटम के लिए सिर्फ़ कुंजियां होती हैं जिन्हें उपयोगकर्ता चुन सकता है. अपने वेबहुक में, Entry टाइप के आधार पर उन कुंजियों से जुड़े आइटम तय किए जाते हैं.

Entry ऑब्जेक्ट के तौर पर बताए गए कलेक्शन आइटम में, डिसप्ले की ये विशेषताएं होती हैं:

  • इमेज (ज़रूरी नहीं)
    • इमेज को 128 dp लंबा x 232 dp चौड़ा किया गया है
    • अगर इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात), इमेज बाउंडिंग बॉक्स से मेल नहीं खाता तो इमेज के बीच में बार के दोनों ओर बार
    • अगर इमेज का लिंक टूट जाता है, तो प्लेसहोल्डर इमेज का इस्तेमाल किया जाता है
  • टाइटल (ज़रूरी है)
    • सादा टेक्स्ट, Markdown फ़ाइल का इस्तेमाल नहीं किया जा सकता. फ़ॉर्मैटिंग के वही विकल्प होते हैं जो बुनियादी कार्ड के रिच रिस्पॉन्स में होते हैं
    • अगर कोई टाइटल नहीं दिया गया है, तो कार्ड की ऊंचाई कम हो जाती है.
    • यूनीक होना ज़रूरी है, ताकि आवाज़ चुनने की सुविधा काम कर सके
  • जानकारी (ज़रूरी नहीं)
    • सादा टेक्स्ट, Markdown फ़ाइल का इस्तेमाल नहीं किया जा सकता. फ़ॉर्मैटिंग के वही विकल्प होते हैं जो बुनियादी कार्ड के रिच रिस्पॉन्स में होते हैं

विज़ुअल चुनने के रिस्पॉन्स के लिए, आपको TYPE_REPLACE मोड में रनटाइम टाइप का इस्तेमाल करके, एक टाइप को उसके स्लॉट के नाम से बदलना होगा. अपने वेबहुक इवेंट हैंडलर में, name प्रॉपर्टी में उस टाइप के बारे में बताएं जिसे आपको स्लॉट के नाम से बदलना है. इसके बारे में चुनने के जवाब जोड़ना में बताया गया है.

टाइप को ओवरराइट करने के बाद, नतीजे के तौर पर दिखने वाले टाइप में उन आइटम के कलेक्शन के बारे में बताया जाता है जिन्हें आपका उपयोगकर्ता, Assistant की मदद से दिखाए जाने वाले आइटम में से चुन सकता है.

प्रॉपर्टी

कलेक्शन रिस्पॉन्स टाइप में ये प्रॉपर्टी होती हैं:

प्रॉपर्टी Type ज़रूरी शर्त ब्यौरा
items CollectionItem की कैटगरी ज़रूरी है संग्रह में वह आइटम दिखाता है जिसे उपयोगकर्ता चुन सकते हैं. हर CollectionItem में एक कुंजी होती है, जो कलेक्शन आइटम के लिए बताए गए टाइप के हिसाब से मैप करती है.
title स्ट्रिंग ज़रूरी नहीं कलेक्शन के लिए सादा टेक्स्ट टाइटल. कलेक्शन में अलग-अलग टाइटल होने चाहिए, ताकि आवाज़ चुनने में आसानी हो.
subtitle स्ट्रिंग ज़रूरी नहीं कलेक्शन का सामान्य टेक्स्ट सबटाइटल.
image_fill ImageFill ज़रूरी नहीं कार्ड और इमेज कंटेनर के बीच के बॉर्डर का इस्तेमाल तब करें, जब इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) इमेज कंटेनर के आसपेक्ट रेशियो से मेल न खाता हो.

नमूना कोड

नीचे दिए गए सैंपल, वेबहुक कोड या JSON वेबहुक रिस्पॉन्स में प्रॉम्प्ट कॉन्टेंट को तय करते हैं. हालांकि, इसके बजाय ऐक्शन बिल्डर में प्रॉम्प्ट कॉन्टेंट को (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."
      }
    }
  }
}

कलेक्शन ब्राउज़ करें

कलेक्शन की तरह ही, कलेक्शन ब्राउज़ एक रिच रिस्पॉन्स है, जो उपयोगकर्ताओं को विकल्प कार्ड में स्क्रोल करने की सुविधा देता है. कलेक्शन ब्राउज़ को खास तौर पर वेब कॉन्टेंट के लिए डिज़ाइन किया गया है. इससे चुनी गई टाइल किसी वेब ब्राउज़र या अगर सभी टाइल पर एएमपी की सुविधा चालू हो, तो किसी एएमपी ब्राउज़र में खुलती है.

कलेक्शन ब्राउज़ करने के विकल्पों में, कम से कम 2 और ज़्यादा से ज़्यादा 10 टाइल हो सकती हैं. डिसप्ले की सुविधा वाले डिवाइसों पर, उपयोगकर्ता किसी आइटम को चुनने से पहले ऊपर या नीचे स्वाइप करके कार्ड पर स्क्रोल कर सकते हैं.

कलेक्शन ब्राउज़ किया जा रहा है

कोई संग्रह ब्राउज़ करते समय, इस बात पर ध्यान दें कि उपयोगकर्ता इस प्रॉम्प्ट से कैसे इंटरैक्ट करेंगे. हर संग्रह ब्राउज़ item अपने तय किए गए यूआरएल को खोलता है, इसलिए उपयोगकर्ता को उपयोगी जानकारी दें.

संग्रह ब्राउज़ आइटम में ये विशेषताएं होती हैं:

  • इमेज (ज़रूरी नहीं)
    • इमेज को 128 dp लंबा x 232 dp चौड़ा किया गया.
    • अगर इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात), इमेज बाउंडिंग बॉक्स से मेल नहीं खाता है, तो इमेज को किनारों के बीच में या ऊपर और नीचे बार में दिखाया जाता है. बार का रंग, कलेक्शन की ब्राउज़िंग ImageFill प्रॉपर्टी के हिसाब से तय होता है.
    • अगर इमेज का लिंक टूट जाता है, तो उसकी जगह पर प्लेसहोल्डर इमेज का इस्तेमाल किया जाता है.
  • टाइटल (ज़रूरी है)
    • सादा टेक्स्ट, Markdown फ़ाइल का इस्तेमाल नहीं किया जा सकता. उसी फ़ॉर्मैट का इस्तेमाल किया जाता है जो बेसिक कार्ड रिच रिस्पॉन्स में किया जाता है.
    • कोई टाइटल तय न करने पर, कार्ड की ऊंचाई कम हो जाती है.
  • जानकारी (ज़रूरी नहीं)
    • सादा टेक्स्ट, Markdown फ़ाइल का इस्तेमाल नहीं किया जा सकता. उसी फ़ॉर्मैट का इस्तेमाल किया जाता है जो बेसिक कार्ड रिच रिस्पॉन्स में किया जाता है.
  • फ़ुटर (ज़रूरी नहीं)
    • सादा टेक्स्ट/सामान्य टेक्स्ट; Markdown सुविधा का इस्तेमाल नहीं किया जा सकता.

प्रॉपर्टी

कलेक्शन ब्राउज़ करने के रिस्पॉन्स के टाइप में ये प्रॉपर्टी शामिल हैं:

प्रॉपर्टी Type ज़रूरी शर्त ब्यौरा
item ऑब्जेक्ट ज़रूरी है संग्रह में वह आइटम दिखाता है जिसे उपयोगकर्ता चुन सकते हैं.
image_fill ImageFill ज़रूरी नहीं कार्ड और इमेज कंटेनर के बीच के बॉर्डर का इस्तेमाल तब करें, जब इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) इमेज कंटेनर के आसपेक्ट रेशियो से मेल न खाता हो.

संग्रह ब्राउज़ item में ये प्रॉपर्टी हैं:

प्रॉपर्टी Type ज़रूरी शर्त ब्यौरा
title स्ट्रिंग ज़रूरी है कलेक्शन के आइटम का सामान्य टेक्स्ट टाइटल
description स्ट्रिंग ज़रूरी नहीं कलेक्शन के आइटम की जानकारी.
footer स्ट्रिंग ज़रूरी नहीं कलेक्शन आइटम के लिए फ़ुटर टेक्स्ट, जो ब्यौरे के नीचे दिखाया जाता है.
image Image ज़रूरी नहीं कलेक्शन आइटम के लिए इमेज दिखाई गई.
openUriAction OpenUrl ज़रूरी है कलेक्शन के आइटम को चुने जाने के बाद, खोलने के लिए यूआरआई.

नमूना कोड

नीचे दिए गए सैंपल, वेबहुक कोड या JSON वेबहुक रिस्पॉन्स में प्रॉम्प्ट कॉन्टेंट को तय करते हैं. हालांकि, इसके बजाय ऐक्शन बिल्डर में प्रॉम्प्ट कॉन्टेंट को (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

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