इस पेज पर किसी कार्ड या डायलॉग मैसेज में टेक्स्ट और इमेज जोड़ने का तरीका बताया गया है. साथ ही, मैसेज में टेक्स्ट और इमेज के दिखने के तरीके में बदलाव करने का तरीका भी बताया गया है.
Chat ऐप्लिकेशन के लिए, JSON कार्ड मैसेज डिज़ाइन करने और उनकी झलक देखने के लिए, Card Builder का इस्तेमाल करें:
कार्ड बिल्डर खोलेंज़रूरी शर्तें
इमेज जोड़ना
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का इस्तेमाल करें. उदाहरण के लिए, 4:3 के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) वाली आयताकार इमेज को लागू करने के लिए,RECTANGLE_4_3का इस्तेमाल करें.
इस उदाहरण में, ग्रिड में पांच इमेज दिखाई गई हैं. इनमें हर इमेज पर अलग-अलग cropStyle लागू किया गया है:
एक आइकॉन जोड़ें
Icon विजेट पहले से मौजूद आइकॉन या कस्टम आइकॉन को दिखाता है. Icon का इस्तेमाल
कार्ड मैसेज और
डायलॉग में
इन तरीकों से किया जा सकता है:
- स्टैंडअलोन आइकॉन दिखाएं.
DecoratedTextविजेट के हिस्से के तौर पर, मिलते-जुलते टेक्स्ट के सामने आइकॉन दिखाएं.- किसी आइकॉन को
ButtonListविजेट के हिस्से के तौर पर, इंटरैक्टिव बटन के तौर पर दिखाएं.
यहां एक कार्ड है, जिसमें Icon कॉम्पोनेंट पहले से मौजूद आइकॉन के साथ मौजूद है:
इस टेबल में, कार्ड मैसेज के लिए उपलब्ध आइकॉन की सूची दी गई है:
| हवाई जहाज़ | BOOKMARK | ||
| BUS | कार्ड | ||
| घड़ी | CONFIRMATION_NUMBER_ICON | ||
| ब्यौरा | डॉलर | ||
| ईमेल | EVENT_SEAT | ||
| FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
| होटल | HOTEL_ROOM_TYPE | ||
| न्योता दें | MAP_PIN | ||
| पैसे चुकाकर ली जाने वाली सदस्यता | MULTIPLE_PEOPLE | ||
| व्यक्ति | फ़ोन | ||
| RESTAURANT_ICON | SHOPPING_CART | ||
| स्टार | स्टोर | ||
| टिकट | TRAIN | ||
| VIDEO_CAMERA | VIDEO_PLAY |
फ़ॉर्मैट किए गए टेक्स्ट का पैराग्राफ़ जोड़ें
TextParagraph विजेट, वैकल्पिक एचटीएमएल फ़ॉर्मैटिंग के साथ टेक्स्ट का पैराग्राफ़ दिखाता है. इन विजेट का टेक्स्ट कॉन्टेंट सेट करते समय, सिर्फ़ इनसे जुड़े एचटीएमएल टैग शामिल करें.
काम करने वाले एचटीएमएल टैग के बारे में ज़्यादा जानने के लिए, कार्ड टेक्स्ट की फ़ॉर्मैटिंग देखें.
उदाहरण के लिए, पैराग्राफ़ टेक्स्ट के लिए नीचे दी गई फ़ॉर्मैटिंग उपलब्ध है:
- एचटीएमएल
<b>,<u>,<i>टैग के साथ बोल्ड, अंडरलाइन या इटैलिक टेक्स्ट दिखाएं. - एचटीएमएल
<a href="https://www.google.com">hyperlinks</a>वाली वेबसाइटों से लिंक करें. - एचटीएमएल
<font color="#ea9999">font tags</font>की मदद से कुछ रंग जोड़ें.
हर TextParagraph विजेट एक नए पैराग्राफ़ के तौर पर रेंडर होता है और इसे एचटीएमएल <p> टैग की तरह माना जा सकता है.
नीचे एक कार्ड दिया गया है, जिसमें दो TextParagraph विजेट हैं. इनका इस्तेमाल, सामान्य एचटीएमएल फ़ॉर्मैटिंग के साथ दो पैराग्राफ़ दिखाने के लिए किया जाता है:
सजावटी एलिमेंट वाला टेक्स्ट दिखाएं
DecoratedText विजेट वैकल्पिक लेआउट और क्षमताओं वाला टेक्स्ट दिखाता है. उदाहरण के लिए:
startIconकी मदद से, टेक्स्ट के सामनेiconदिखाएं.topLabelवाले टेक्स्ट से पहले टाइटल दिखाएं.buttonके साथ क्लिक किया जा सकने वाला बटन जोड़ें याswitchControlकी मदद से, स्विच किया जा सकने वाला टॉगल बटन जोड़ें.
जब आपको जानकारी को आसानी से इस्तेमाल करने और इंटरैक्टिव तरीके से पेश करने की ज़रूरत हो, तो DecoratedText विजेट का इस्तेमाल करें. यह विजेट संपर्क कार्ड, ऑर्डर की स्थिति के अपडेट, और काम के टिकट की सूचनाएं जैसे इस्तेमाल के लिए बेहतरीन है.
DecoratedText विजेट पर, सिंपल टेक्स्ट एचटीएमएल फ़ॉर्मैट काम करता है. इन विजेट का टेक्स्ट कॉन्टेंट सेट करते समय, सिर्फ़ इनसे जुड़े एचटीएमएल टैग शामिल करें. काम करने वाले एचटीएमएल टैग के बारे में ज़्यादा जानने के लिए, कार्ड टेक्स्ट की फ़ॉर्मैटिंग देखें.
यहां दिया गया कार्ड DecoratedText विजेट से मिलकर बना है. इसका इस्तेमाल संपर्क जानकारी, जैसे कि ईमेल पता, ऑनलाइन स्थिति, फ़ोन नंबर, और वेबसाइट दिखाने के लिए किया जाता है:
समस्या हल करें
जब Google Chat ऐप्लिकेशन या कार्ड की ओर से गड़बड़ी का मैसेज मिलता है, तो Chat के इंटरफ़ेस पर "कोई गड़बड़ी हुई" मैसेज दिखता है. या "आपका अनुरोध प्रोसेस नहीं किया जा सका." कभी-कभी चैट के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का कोई मैसेज नहीं दिखता, लेकिन Chat ऐप्लिकेशन या कार्ड अचानक कोई ऐसा नतीजा देता है जिसकी उम्मीद नहीं थी. उदाहरण के लिए, हो सकता है कि कार्ड का मैसेज न दिखे.
हालांकि, हो सकता है कि Chat के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का मैसेज न दिखे. हालांकि, चैट ऐप्लिकेशन के लिए गड़बड़ी लॉग करने की सुविधा चालू होने पर, गड़बड़ी के मैसेज और लॉग डेटा की मदद से गड़बड़ियों को ठीक किया जा सकता है. गड़बड़ियों को देखने, डीबग करने, और ठीक करने में मदद के लिए, Google Chat की गड़बड़ियों को ठीक करना और समस्या हल करना देखें.