कार्ड में टेक्स्ट और इमेज जोड़ना

इस पेज पर, कार्ड में टेक्स्ट और इमेज जोड़ने और उन्हें फ़ॉर्मैट करने का तरीका बताया गया है.

कार्ड बनाने के बारे में ज़्यादा जानने के लिए, Google Chat ऐप्लिकेशन के लिए कार्ड बनाएं लेख पढ़ें.

Chat ऐप्लिकेशन के लिए मैसेजिंग और यूज़र इंटरफ़ेस डिज़ाइन करने और उनकी झलक देखने के लिए, कार्ड बिल्डर का इस्तेमाल करें:

कार्ड बिल्डर खोलना

ज़रूरी शर्तें

Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हों. इंटरैक्टिव Chat ऐप्लिकेशन बनाने के लिए, यहां दिए गए क्विकस्टार्ट में से किसी एक को पूरा करें. यह ऐप्लिकेशन के आर्किटेक्चर के हिसाब से किया जाना चाहिए:

इमेज या आइकॉन जोड़ना

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

इमेज जोड़ें

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 विजेट में, पहले से मौजूद आइकॉन या कस्टम आइकॉन दिखता है. कार्ड में आइकॉन जोड़ने का मकसद, इनमें से कोई काम करना होता है:

  • स्टैंडअलोन आइकॉन दिखाएं.
  • मिलते-जुलते टेक्स्ट के सामने, DecoratedText विजेट के हिस्से के तौर पर आइकॉन दिखाएं.
  • ButtonList विजेट के हिस्से के तौर पर, किसी आइकॉन को इंटरैक्टिव बटन के तौर पर दिखाएं.

यहां एक कार्ड दिया गया है, जिसमें पहले से मौजूद आइकॉन वाला Icon कॉम्पोनेंट है:

यहां दी गई टेबल में, कार्ड मैसेज के लिए पहले से मौजूद आइकॉन की सूची दी गई है:

AIRPLANE BOOKMARK
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
ब्यौरा DOLLAR
ईमेल EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
न्योता भेजना MAP_PIN
पैसे चुकाकर ली जाने वाली सदस्यता MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
STAR स्टोर
TICKET 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 के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का मैसेज न दिखे. हालांकि, Chat ऐप्लिकेशन के लिए गड़बड़ी को लॉग करने की सुविधा चालू होने पर, गड़बड़ी के बारे में जानकारी देने वाले मैसेज और लॉग डेटा उपलब्ध होते हैं. इनकी मदद से, गड़बड़ियों को ठीक किया जा सकता है. गड़बड़ियों को देखने, डिबग करने, और ठीक करने में मदद पाने के लिए, Google Chat में गड़बड़ियों को हल करना और उन्हें ठीक करना लेख पढ़ें.