इस पेज पर किसी कार्ड या डायलॉग मैसेज में टेक्स्ट और इमेज जोड़ने का तरीका बताया गया है और का इस्तेमाल करें.
Chat ऐप्लिकेशन के लिए, JSON कार्ड मैसेज डिज़ाइन करने और उनकी झलक देखने के लिए, Card Builder का इस्तेमाल करें:
कार्ड बिल्डर खोलेंज़रूरी शर्तें
Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हैं. बनाने के लिए इंटरैक्टिव चैट ऐप्लिकेशन. इनमें से किसी एक क्विकस्टार्ट के आधार पर उसे पूरा करें का इस्तेमाल करें जिसका इस्तेमाल करना है:
- Google Cloud Functions के साथ एचटीटीपी सेवा
- Google Apps स्क्रिप् ट
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
इमेज जोड़ें
कॉन्टेंट बनाने
Image
विजेट
एचटीटीपीएस यूआरएल पर होस्ट की गई PNG या JPG इमेज दिखाता है.
दिखाई गई इमेज की चौड़ाई, दिखाए गए कार्ड की पूरी चौड़ाई से भर जाती है, और
इसकी ऊंचाई, इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को बनाए रखने के लिए अडजस्ट हो जाती है. Image
विजेट
समर्थन करता है
onclick
कार्रवाइयां
जो तब होते हैं, जब उपयोगकर्ता इमेज पर क्लिक करते हैं. onclick
कार्रवाइयों के उदाहरण में ये शामिल हैं:
- इसकी मदद से कोई हाइपरलिंक खोलें
OpenLink
, जैसे कि Google Chat डेवलपर दस्तावेज़ का हाइपरलिंक,https://developers.google.com/chat
. - एक चलाएं कार्रवाई जो एपीआई कॉल करने जैसा कस्टम फ़ंक्शन चलाता है.
Image
विजेट की सीमाएं नीचे दी गई हैं:
- सिर्फ़ PNG और JPG इमेज काम करती हैं.
- होस्ट का यूआरएल
HTTPS
होना चाहिए. - बेहतर परफ़ॉर्म करने वाले कार्ड देखने के लिए, इमेज का साइज़ ज़्यादा से ज़्यादा 2 एमबी होना चाहिए.
नीचे दिए गए कार्ड में Image
विजेट शामिल है. यह
Google Chat के डेवलपर दस्तावेज़ के लैंडिंग पेज की इमेज. जब उपयोगकर्ता
इमेज, Google Chat डेवलपर दस्तावेज़ नए टैब में खुलेगा.
एक इमेज कॉम्पोनेंट जोड़ें
Image
विजेट, सीमित स्टाइल वाली इमेज है. अगर आप
imageCompent
विजेट
आपको किसी इमेज पर cropStyle
और borderStyle
लागू करने की सुविधा मिलती है.
नीचे दिए गए उदाहरण में ग्रिड में दो इमेज दिखाई गई हैं, जिनमें से एक इमेज क्रॉप किया गया:
इमेज काटना
इमेज का आकार बदलने के लिए,
cropStyle
.
किसी इमेज पर कई आकार लागू किए जा सकते हैं:
- स्क्वेयर क्रॉप लागू करने के लिए,
SQUARE
का इस्तेमाल करें. - गोल आकार में क्रॉप करने के लिए
CIRCLE
का इस्तेमाल करें. - अपने हिसाब से आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) वाली आयताकार इमेज को लगाने के लिए,
RECTANGLE_CUSTOM
का इस्तेमाल करें अनुपात. उदाहरण के लिए,RECTANGLE_4_3
का इस्तेमाल करके रेक्टैंगल क्रॉप किया जा सकता है जिसका आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) 4:3 हो.
इस उदाहरण में, अलग-अलग cropStyle
के साथ ग्रिड में पांच इमेज दिखाई गई हैं
हर इमेज पर लागू किया जाता है:
एक चिह्न जोड़ें
कॉन्टेंट बनाने
Icon
विजेट
का प्रतिनिधित्व करता है
पहले से मौजूद है
आइकॉन या
कस्टम
आइकन. Icon
का इस्तेमाल इन भाषाओं में किया जा सकता है
कार्ड मैसेज
और
डायलॉग
किन तरीकों से:
- स्टैंडअलोन आइकॉन दिखाएं.
- संबंधित टेक्स्ट के सामने आइकॉन दिखाएं, ताकि
DecoratedText
विजेट. - आइकन को एक इंटरैक्टिव बटन के रूप में दिखाएं,
ButtonList
विजेट.
यहां एक कार्ड है, जिसमें Icon
कॉम्पोनेंट पहले से मौजूद आइकॉन के साथ मौजूद है:
इस टेबल में, कार्ड मैसेज के लिए उपलब्ध आइकॉन की सूची दी गई है:
हवाई जहाज़ | बुकमार्क | ||
बस | कार्ड | ||
घड़ी | CONFIRMATION_NUMBER_ICON | ||
ब्यौरा | डॉलर | ||
ईमेल | EVENT_SEAT | ||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
होटल | HOTEL_ROOM_TYPE | ||
INVITE | MAP_PIN | ||
पैसे चुकाकर ली जाने वाली सदस्यता | MULTIPLE_PEOPLE | ||
व्यक्ति | फ़ोन | ||
RESTAURANT_ICON | SHOPPING_CART | ||
STAR | स्टोर | ||
टिकट | ट्रेन | ||
VIDEO_CAMERA | VIDEO_PLAY |
फ़ॉर्मैट किए गए टेक्स्ट का पैराग्राफ़ जोड़ें
कॉन्टेंट बनाने
TextParagraph
विजेट
वैकल्पिक एचटीएमएल फ़ॉर्मैटिंग के साथ टेक्स्ट का पैराग्राफ़ दिखाता है. सेट करते समय
तो इन विजेट की टेक्स्ट सामग्री को भी शामिल करना चाहिए, बस संबंधित HTML टैग शामिल करें.
कौनसे एचटीएमएल टैग काम करते हैं, इस बारे में ज़्यादा जानने के लिए देखें
कार्ड टेक्स्ट का फ़ॉर्मैट.
उदाहरण के लिए, पैराग्राफ़ टेक्स्ट के लिए नीचे दी गई फ़ॉर्मैटिंग उपलब्ध है:
- एचटीएमएल
<b>
,<u>
,<i>
का इस्तेमाल करके बोल्ड, अंडरलाइन या इटैलिक टेक्स्ट दिखाएं टैग. - एचटीएमएल
<a href="https://www.google.com">hyperlinks</a>
वाली वेबसाइटों से लिंक करें. - एचटीएमएल
<font color="#ea9999">font tags</font>
की मदद से कुछ रंग जोड़ें.
हर TextParagraph
विजेट एक नए पैराग्राफ़ के तौर पर रेंडर होता है और
एचटीएमएल <p>
टैग की तरह.
नीचे दिए गए कार्ड में दो TextParagraph
विजेट हैं, जिनका इस्तेमाल इन कामों के लिए किया जाता है
सरल HTML फ़ॉर्मेटिंग के साथ दो पैराग्राफ़ दिखाएं:
सजावटी एलिमेंट वाला टेक्स्ट दिखाएं
कॉन्टेंट बनाने
DecoratedText
विजेट
वैकल्पिक लेआउट और क्षमताओं के साथ टेक्स्ट दिखाता है. उदाहरण के लिए:
startIcon
की मदद से, टेक्स्ट के सामनेicon
दिखाएं.topLabel
वाले टेक्स्ट से पहले टाइटल दिखाएं.button
के साथ क्लिक किया जा सकने वाला बटन जोड़ें याswitchControl
की मदद से, स्विच किया जा सकने वाला टॉगल बटन जोड़ें.
किसी रिपोर्ट में जानकारी देने के लिए, DecoratedText
विजेट का इस्तेमाल करें
इस्तेमाल करने में आसान और इंटरैक्टिव तरीके से. विजेट, इस तरह के इस्तेमाल के लिए सबसे सही है
संपर्क कार्ड, ऑर्डर की स्थिति के अपडेट, और काम के टिकट की सूचनाएं.
DecoratedText
विजेट पर, सिंपल टेक्स्ट एचटीएमएल फ़ॉर्मैट काम करता है. सेट करते समय
तो इन विजेट की टेक्स्ट सामग्री को भी शामिल करना चाहिए, बस संबंधित HTML टैग शामिल करें. इसके लिए
कौनसे एचटीएमएल टैग का इस्तेमाल किया जा सकता है, इसके बारे में ज़्यादा जानकारी के लिए, देखें
कार्ड टेक्स्ट का फ़ॉर्मैट.
यह एक कार्ड है, जिसमें DecoratedText
विजेट शामिल है. इसे दिखाने के लिए इस्तेमाल किया जाता है
संपर्क जानकारी, जैसे कि ईमेल पता, ऑनलाइन स्थिति, फ़ोन नंबर, और
वेबसाइट:
समस्या हल करें
जब Google Chat ऐप्लिकेशन या card कोई गड़बड़ी दिखाता है, Chat के इंटरफ़ेस पर, "कोई गड़बड़ी हुई" मैसेज दिखता है. या "आपका अनुरोध प्रोसेस नहीं किया जा सका." कभी-कभी Chat यूज़र इंटरफ़ेस (यूआई) गड़बड़ी का कोई मैसेज नहीं दिखाता है. हालांकि, Chat ऐप्लिकेशन या कार्ड से कोई अनचाहा नतीजा मिलता है; उदाहरण के लिए, कार्ड मैसेज शायद दिखाना चाहते हैं.
हालांकि, Chat के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का मैसेज शायद न दिखे, गड़बड़ी ठीक करने में आपकी मदद करने के लिए, जानकारी देने वाले गड़बड़ी के मैसेज और लॉग डेटा उपलब्ध है जब चैट ऐप्लिकेशन के लिए गड़बड़ी लॉग करने की सेटिंग चालू हो. मदद के लिए, डीबग करने और गड़बड़ियां ठीक करने के लिए, देखें Google Chat से जुड़ी गड़बड़ियां हल करना और गड़बड़ियां ठीक करना.