ज़्यादा बेहतर जवाब

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

  • बुनियादी कार्ड
  • इमेज कार्ड
  • टेबल कार्ड

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

बुनियादी कार्ड

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

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

स्मार्ट डिसप्ले पर, सामान्य कार्ड का उदाहरण

प्रॉपर्टी

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

प्रॉपर्टी Type ज़रूरी शर्त ब्यौरा
title स्ट्रिंग ज़रूरी नहीं कार्ड का सामान्य टेक्स्ट टाइटल शीर्षक एक तय फ़ॉन्ट और साइज़ के होते हैं. साथ ही, पहली लाइन के बाद के वर्णों को काट दिया जाता है. अगर कोई टाइटल नहीं दिया जाता है, तो कार्ड की ऊंचाई कम हो जाती है.
subtitle स्ट्रिंग ज़रूरी नहीं कार्ड का सामान्य टेक्स्ट सबटाइटल. शीर्षक का फ़ॉन्ट और साइज़ तय होता है. साथ ही, पहली लाइन के बाद वाले वर्णों को काट दिया जाता है. अगर कोई सबटाइटल नहीं दिया जाता है, तो कार्ड की ऊंचाई कम हो जाती है.
text स्ट्रिंग कंडीशनल

कार्ड का सामान्य टेक्स्ट कॉन्टेंट. बहुत लंबे टेक्स्ट को आखिरी शब्द के ब्रेक में एलिप्सिस से छोटा कर दिया जाता है. अगर image मौजूद नहीं है, तो यह प्रॉपर्टी ज़रूरी है.

इस प्रॉपर्टी पर ये पाबंदियां लागू हैं:

  • इमेज के बिना ज़्यादा से ज़्यादा 15 लाइनें या image के साथ 10 लाइन. इसमें करीब 750 (बिना इमेज के) या 500 (इमेज के साथ) वर्ण होते हैं. ध्यान दें कि मोबाइल डिवाइस, बड़ी स्क्रीन वाली स्क्रीन से पहले टेक्स्ट को काट देते हैं.
  • टेक्स्ट में लिंक नहीं होना चाहिए.

Markdown का एक सीमित सबसेट इस्तेमाल किया जा सकता है:

  • डबल स्पेस वाली नई लाइन के बाद, \n है
  • **bold**
  • *italics*
image Image ज़रूरी नहीं कार्ड में दिखाई गई इमेज. इमेज JPG, PNG, और GIF (ऐनिमेटेड और नॉन-ऐनिमेटेड) की जा सकती हैं.
image_fill ImageFill ज़रूरी नहीं कार्ड और इमेज कंटेनर के बीच के बॉर्डर का इस्तेमाल तब करें, जब इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) इमेज कंटेनर के आसपेक्ट रेशियो से मेल न खाता हो.
button Link ज़रूरी नहीं ऐसा बटन जिस पर टैप करने पर उपयोगकर्ता, यूआरएल से लिंक हो जाता है. बटन में name प्रॉपर्टी होनी चाहिए, जिसमें बटन का टेक्स्ट और url प्रॉपर्टी होनी चाहिए. इस प्रॉपर्टी में, लिंक का यूआरएल शामिल होना चाहिए. बटन का टेक्स्ट गुमराह करने वाला नहीं होना चाहिए. समीक्षा के दौरान इसकी जांच की जाती है.

नमूना कोड

वाईएएमएल

candidates:
  - first_simple:
      variants:
        - speech: This is a card.
          text: This is a card.
    content:
      card:
        title: Card Title
        subtitle: Card Subtitle
        text: Card Content
        image:
          url: 'https://developers.google.com/assistant/assistant_96.png'
          alt: Google Assistant logo

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is a card.",
            "text": "This is a card."
          }
        ]
      },
      "content": {
        "card": {
          "title": "Card Title",
          "subtitle": "Card Subtitle",
          "text": "Card Content",
          "image": {
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "alt": "Google Assistant logo"
          }
        }
      }
    }
  ]
}

Node.js

app.handle('Card', conv => {
  conv.add('This is a card.');
  conv.add(new Card({
    "title": "Card Title",
    "subtitle": "Card Subtitle",
    "text": "Card Content",
    "image": new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
    })
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "card": {
          "title": "Card Title",
          "subtitle": "Card Subtitle",
          "text": "Card Content",
          "image": {
            "alt": "Google Assistant logo",
            "height": 0,
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "width": 0
          }
        }
      },
      "firstSimple": {
        "speech": "This is a card.",
        "text": "This is a card."
      }
    }
  }
}

इमेज कार्ड

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

प्रॉपर्टी

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

प्रॉपर्टी Type ज़रूरी शर्त ब्यौरा
url स्ट्रिंग ज़रूरी है इमेज का सोर्स यूआरएल. इमेज JPG, PNG या GIF (ऐनिमेटेड और बिना ऐनिमेशन वाली) हो सकती हैं.
alt स्ट्रिंग ज़रूरी है इमेज के बारे में जानकारी, जिसका इस्तेमाल सुलभता के लिए किया जाना है.
height int32 ज़रूरी नहीं पिक्सल में इमेज की ऊंचाई.
width int32 ज़रूरी नहीं पिक्सल में इमेज की चौड़ाई.

नमूना कोड

वाईएएमएल

candidates:
  - first_simple:
      variants:
        - speech: This is an image prompt.
          text: This is an image prompt.
    content:
      image:
        alt: Google Assistant logo
        url: 'https://developers.google.com/assistant/assistant_96.png'

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is an image prompt.",
            "text": "This is an image prompt."
          }
        ]
      },
      "content": {
        "image": {
          "alt": "Google Assistant logo",
          "url": "https://developers.google.com/assistant/assistant_96.png"
        }
      }
    }
  ]
}

Node.js

app.handle('Image', conv => {
  conv.add("This is an image prompt!");
  conv.add(new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "image": {
          "alt": "Google Assistant logo",
          "height": 0,
          "url": "https://developers.google.com/assistant/assistant_96.png",
          "width": 0
        }
      },
      "firstSimple": {
        "speech": "This is an image prompt.",
        "text": "This is an image prompt."
      }
    }
  }
}

टेबल कार्ड

टेबल कार्ड की मदद से, अपने जवाब में टेबल के फ़ॉर्मैट में डेटा दिखाया जा सकता है. जैसे, खेल की स्थिति, चुनाव के नतीजे, और फ़्लाइट. आपके पास अपने टेबल कार्ड में, Assistant से दिखाए जाने वाले कॉलम और लाइनें (ज़्यादा से ज़्यादा तीन) तय करने की सुविधा होती है. आप अतिरिक्त कॉलम और पंक्तियों की प्राथमिकता के साथ-साथ उन्हें भी तय कर सकते हैं.

स्मार्ट डिसप्ले पर टेबल कार्ड का उदाहरण

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

प्रॉपर्टी

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

प्रॉपर्टी Type ज़रूरी शर्त ब्यौरा
title स्ट्रिंग कंडीशनल टेबल का सादा टेक्स्ट टाइटल अगर subtitle सेट है, तो यह प्रॉपर्टी ज़रूरी है.
subtitle स्ट्रिंग ज़रूरी नहीं टेबल का सादा टेक्स्ट सबटाइटल. टेबल कार्ड में मौजूद सबटाइटल पर, थीम को पसंद के मुताबिक बनाने की सुविधा का असर नहीं पड़ता.
columns TableColumn की कैटगरी ज़रूरी है कॉलम के हेडर और अलाइनमेंट. हर TableColumn ऑब्जेक्ट, एक ही टेबल में मौजूद अलग-अलग कॉलम के हेडर और अलाइनमेंट के बारे में जानकारी देता है.
rows TableRow की कैटगरी ज़रूरी है

टेबल की लाइन का डेटा. इस बात की गारंटी है कि पहली तीन लाइनें ही दिखेंगी. हालांकि, हो सकता है कि कुछ लाइनें कुछ प्लैटफ़ॉर्म पर न दिखें. सिम्युलेटर की मदद से, यह देखा जा सकता है कि दिए गए प्लैटफ़ॉर्म के लिए कौनसी लाइनें दिखाई गई हैं.

हर TableRow ऑब्जेक्ट, एक ही टेबल में मौजूद अलग-अलग लाइन में मौजूद सेल के बारे में जानकारी देता है.
image Image ज़रूरी नहीं टेबल से जुड़ी इमेज.
button Link ज़रूरी नहीं ऐसा बटन जिस पर टैप करने पर उपयोगकर्ता, यूआरएल से लिंक हो जाता है. बटन में name प्रॉपर्टी होनी चाहिए, जिसमें बटन का टेक्स्ट और url प्रॉपर्टी हो, जिसमें लिंक का यूआरएल शामिल हो. बटन का टेक्स्ट गुमराह करने वाला नहीं होना चाहिए. इसे समीक्षा के दौरान जांचा जाता है.

नमूना कोड

इन स्निपेट में टेबल कार्ड को लागू करने का तरीका बताया गया है:

वाईएएमएल

candidates:
  - first_simple:
      variants:
        - speech: This is a table.
          text: This is a table.
    content:
      table:
        title: Table Title
        subtitle: Table Subtitle
        columns:
          - header: Column A
          - header: Column B
          - header: Column C
        rows:
          - cells:
              - text: A1
              - text: B1
              - text: C1
          - cells:
              - text: A2
              - text: B2
              - text: C2
          - cells:
              - text: A3
              - text: B3
              - text: C3
        image:
          alt: Google Assistant logo
          url: 'https://developers.google.com/assistant/assistant_96.png'

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is a table.",
            "text": "This is a table."
          }
        ]
      },
      "content": {
        "table": {
          "title": "Table Title",
          "subtitle": "Table Subtitle",
          "columns": [
            {
              "header": "Column A"
            },
            {
              "header": "Column B"
            },
            {
              "header": "Column C"
            }
          ],
          "rows": [
            {
              "cells": [
                {
                  "text": "A1"
                },
                {
                  "text": "B1"
                },
                {
                  "text": "C1"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A2"
                },
                {
                  "text": "B2"
                },
                {
                  "text": "C2"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A3"
                },
                {
                  "text": "B3"
                },
                {
                  "text": "C3"
                }
              ]
            }
          ],
          "image": {
            "alt": "Google Assistant logo",
            "url": "https://developers.google.com/assistant/assistant_96.png"
          }
        }
      }
    }
  ]
}

Node.js

app.handle('Table', conv => {
  conv.add('This is a table.');
  conv.add(new Table({
    "title": "Table Title",
    "subtitle": "Table Subtitle",
    "image": new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
    }),
    "columns": [{
      "header": "Column A"
    }, {
      "header": "Column B"
    }, {
      "header": "Column C"
    }],
    "rows": [{
      "cells": [{
        "text": "A1"
      }, {
        "text": "B1"
      }, {
        "text": "C1"
      }]
    }, {
      "cells": [{
        "text": "A2"
      }, {
        "text": "B2"
      }, {
        "text": "C2"
      }]
    }, {
      "cells": [{
        "text": "A3"
      }, {
        "text": "B3"
      }, {
        "text": "C3"
      }]
    }]
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "table": {
          "button": {},
          "columns": [
            {
              "header": "Column A"
            },
            {
              "header": "Column B"
            },
            {
              "header": "Column C"
            }
          ],
          "image": {
            "alt": "Google Assistant logo",
            "height": 0,
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "width": 0
          },
          "rows": [
            {
              "cells": [
                {
                  "text": "A1"
                },
                {
                  "text": "B1"
                },
                {
                  "text": "C1"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A2"
                },
                {
                  "text": "B2"
                },
                {
                  "text": "C2"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A3"
                },
                {
                  "text": "B3"
                },
                {
                  "text": "C3"
                }
              ]
            }
          ],
          "subtitle": "Table Subtitle",
          "title": "Table Title"
        }
      },
      "firstSimple": {
        "speech": "This is a table.",
        "text": "This is a table."
      }
    }
  }
}

अपने जवाबों को पसंद के मुताबिक़ बनाना

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

पसंद के मुताबिक जवाब थीम सेट करने के लिए, ये काम करें:

  1. Actions कंसोल में, डेवलप करें > थीम को पसंद के मुताबिक बनाना पर जाएं.
  2. इनमें से किसी एक या सभी को सेट करें:
    • बैकग्राउंड रंग: इसका इस्तेमाल आपके कार्ड के बैकग्राउंड के तौर पर किया जाता है. आम तौर पर, बैकग्राउंड के लिए हल्के रंग का इस्तेमाल करें, ताकि कार्ड का कॉन्टेंट आसानी से पढ़ा जा सके.
    • प्राइमरी कलर: आपके कार्ड के हेडर टेक्स्ट और इंटरफ़ेस एलिमेंट के लिए मुख्य रंग. आम तौर पर, बैकग्राउंड के रंग में कंट्रास्ट को बेहतर बनाने के लिए गहरे मुख्य रंग का इस्तेमाल करें.
    • फ़ॉन्ट फ़ैमिली: इसमें टाइटल और दूसरे मुख्य टेक्स्ट एलिमेंट के लिए इस्तेमाल किए गए फ़ॉन्ट के टाइप के बारे में बताया जाता है.
    • इमेज के कोने का स्टाइल: आपके कार्ड के कोनों का लुक बदल देता है.
    • बैकग्राउंड इमेज: बैकग्राउंड रंग की जगह इस्तेमाल करने के लिए कस्टम इमेज. सतह का डिवाइस लैंडस्केप या पोर्ट्रेट मोड में होने पर, दो अलग-अलग इमेज दें. अगर बैकग्राउंड इमेज का इस्तेमाल किया जाता है, तो मुख्य रंग सफ़ेद पर सेट होता है.
  3. सेव करें पर क्लिक करें.
Actions कंसोल में थीम को पसंद के मुताबिक बनाना