इस पेज पर किसी कार्ड या डायलॉग मैसेज में टेक्स्ट और इमेज जोड़ने का तरीका बताया गया है. साथ ही, मैसेज में टेक्स्ट और इमेज के दिखने का तरीका बदलने के बारे में भी बताया गया है.
कार्ड बिल्डर से कार्ड डिज़ाइन करें और उनकी झलक देखें.
कार्ड बिल्डर खोलेंज़रूरी शर्तें
इमेज जोड़ना
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 ऐप्लिकेशन या कार्ड से अनचाहा नतीजा मिलता है. उदाहरण के लिए, हो सकता है कि कार्ड मैसेज न दिखे.
हो सकता है कि Chat के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का मैसेज न दिखे. हालांकि, चैट ऐप्लिकेशन में गड़बड़ी को लॉग करने की सुविधा चालू होने पर, गड़बड़ियों को ठीक करने के लिए, उनके बारे में जानकारी देने वाले मैसेज और लॉग डेटा उपलब्ध होते हैं. गड़बड़ियों को देखने, डीबग करने, और ठीक करने में मदद पाने के लिए, Google Chat की गड़बड़ियों को ठीक करना और उन्हें हल करना लेख पढ़ें.