रिच रिस्पॉन्स, आपकी 'कार्रवाई' के साथ उपयोगकर्ता इंटरैक्शन को बेहतर बनाने के लिए विज़ुअल एलिमेंट जोड़ते हैं. प्रॉम्प्ट के तौर पर, इस तरह के रिच रिस्पॉन्स का इस्तेमाल किया जा सकता है:
- बुनियादी कार्ड
- इमेज कार्ड
- टेबल कार्ड
रिच रिस्पॉन्स तय करते समय, RICH_RESPONSE
सर्फ़ेस क्षमता वाले उम्मीदवार का इस्तेमाल करें, ताकि Google Assistant सिर्फ़ उन डिवाइस पर ही रिच रिस्पॉन्स दिखा सके जिन पर यह सुविधा काम करती है. प्रॉम्प्ट में, हर content
ऑब्जेक्ट के लिए सिर्फ़ एक रिच रिस्पॉन्स का इस्तेमाल किया जा सकता है.
बुनियादी कार्ड
बेसिक कार्ड इस तरह से डिज़ाइन किए गए हैं कि छोटे होने पर ही उपयोगकर्ताओं को मुख्य या खास जानकारी दी जा सके. साथ ही, इस तरह से तैयार किया गया है कि उपयोगकर्ता आपकी ओर से (वेब लिंक का इस्तेमाल करके) चुनने पर ज़्यादा जानकारी पा सकें.
मुख्य रूप से दिखाने के लिए बेसिक कार्ड का इस्तेमाल करें, क्योंकि बटन के बिना उन पर इंटरैक्शन
करने की सुविधा नहीं होती. किसी बटन को वेब से लिंक करने के लिए, प्लैटफ़ॉर्म में WEB_LINK
की सुविधा भी होनी चाहिए.
![स्मार्ट डिसप्ले पर, सामान्य कार्ड का उदाहरण](https://developers.google.cn/static/assistant/conversational/images/smart-display/basic-card.png?authuser=8&hl=hi)
प्रॉपर्टी
बेसिक कार्ड रिस्पॉन्स टाइप में ये प्रॉपर्टी होती हैं:
प्रॉपर्टी | Type | ज़रूरी शर्त | ब्यौरा |
---|---|---|---|
title |
स्ट्रिंग | ज़रूरी नहीं | कार्ड का सामान्य टेक्स्ट टाइटल शीर्षक एक तय फ़ॉन्ट और साइज़ के होते हैं. साथ ही, पहली लाइन के बाद के वर्णों को काट दिया जाता है. अगर कोई टाइटल नहीं दिया जाता है, तो कार्ड की ऊंचाई कम हो जाती है. |
subtitle |
स्ट्रिंग | ज़रूरी नहीं | कार्ड का सामान्य टेक्स्ट सबटाइटल. शीर्षक का फ़ॉन्ट और साइज़ तय होता है. साथ ही, पहली लाइन के बाद वाले वर्णों को काट दिया जाता है. अगर कोई सबटाइटल नहीं दिया जाता है, तो कार्ड की ऊंचाई कम हो जाती है. |
text |
स्ट्रिंग | कंडीशनल |
कार्ड का सामान्य टेक्स्ट कॉन्टेंट. बहुत लंबे टेक्स्ट को आखिरी शब्द के ब्रेक में
एलिप्सिस से छोटा कर दिया जाता है. अगर इस प्रॉपर्टी पर ये पाबंदियां लागू हैं:
Markdown का एक सीमित सबसेट इस्तेमाल किया जा सकता है:
|
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 से दिखाए जाने वाले कॉलम और लाइनें (ज़्यादा से ज़्यादा तीन) तय करने की सुविधा होती है. आप अतिरिक्त कॉलम और पंक्तियों की प्राथमिकता के साथ-साथ उन्हें भी तय कर सकते हैं.
![स्मार्ट डिसप्ले पर टेबल कार्ड का उदाहरण](https://developers.google.cn/static/assistant/conversational/images/smart-display/table.png?authuser=8&hl=hi)
टेबल, स्टैटिक डेटा दिखाती हैं और उनसे इंटरैक्ट नहीं किया जा सकता. इंटरैक्टिव सेलेक्शन रिस्पॉन्स के लिए, विज़ुअल चुनने के रिस्पॉन्स का इस्तेमाल करें.
प्रॉपर्टी
टेबल कार्ड के रिस्पॉन्स टाइप में ये प्रॉपर्टी होती हैं:
प्रॉपर्टी | Type | ज़रूरी शर्त | ब्यौरा |
---|---|---|---|
title |
स्ट्रिंग | कंडीशनल | टेबल का सादा टेक्स्ट टाइटल अगर subtitle सेट है, तो
यह प्रॉपर्टी ज़रूरी है. |
subtitle |
स्ट्रिंग | ज़रूरी नहीं | टेबल का सादा टेक्स्ट सबटाइटल. टेबल कार्ड में मौजूद सबटाइटल पर, थीम को पसंद के मुताबिक बनाने की सुविधा का असर नहीं पड़ता. |
columns |
TableColumn की कैटगरी |
ज़रूरी है | कॉलम के हेडर और अलाइनमेंट. हर TableColumn ऑब्जेक्ट,
एक ही टेबल में मौजूद अलग-अलग कॉलम के हेडर और अलाइनमेंट के बारे में
जानकारी देता है. |
rows |
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." } } } }
अपने जवाबों को पसंद के मुताबिक़ बनाना
आप अपने 'कार्रवाइयां' प्रोजेक्ट के लिए पसंद के मुताबिक थीम बनाकर, अपने रिच जवाबों की लुक बदल सकते हैं. जब उपयोगकर्ता स्क्रीन वाली सतह पर आपकी कार्रवाइयों का इस्तेमाल करते हैं, तब बातचीत को अलग तरीके से दिखाने के लिए यह कस्टमाइज़ेशन मददगार हो सकता है.
पसंद के मुताबिक जवाब थीम सेट करने के लिए, ये काम करें:
- Actions कंसोल में, डेवलप करें > थीम को पसंद के मुताबिक बनाना पर जाएं.
- इनमें से किसी एक या सभी को सेट करें:
- बैकग्राउंड रंग: इसका इस्तेमाल आपके कार्ड के बैकग्राउंड के तौर पर किया जाता है. आम तौर पर, बैकग्राउंड के लिए हल्के रंग का इस्तेमाल करें, ताकि कार्ड का कॉन्टेंट आसानी से पढ़ा जा सके.
- प्राइमरी कलर: आपके कार्ड के हेडर टेक्स्ट और इंटरफ़ेस एलिमेंट के लिए मुख्य रंग. आम तौर पर, बैकग्राउंड के रंग में कंट्रास्ट को बेहतर बनाने के लिए गहरे मुख्य रंग का इस्तेमाल करें.
- फ़ॉन्ट फ़ैमिली: इसमें टाइटल और दूसरे मुख्य टेक्स्ट एलिमेंट के लिए इस्तेमाल किए गए फ़ॉन्ट के टाइप के बारे में बताया जाता है.
- इमेज के कोने का स्टाइल: आपके कार्ड के कोनों का लुक बदल देता है.
- बैकग्राउंड इमेज: बैकग्राउंड रंग की जगह इस्तेमाल करने के लिए कस्टम इमेज. सतह का डिवाइस लैंडस्केप या पोर्ट्रेट मोड में होने पर, दो अलग-अलग इमेज दें. अगर बैकग्राउंड इमेज का इस्तेमाल किया जाता है, तो मुख्य रंग सफ़ेद पर सेट होता है.
- सेव करें पर क्लिक करें.
![Actions कंसोल में थीम को पसंद के मुताबिक बनाना](https://developers.google.cn/static/assistant/conversational/images/theme-customization.png?authuser=8&hl=hi)