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

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

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

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

Card Builder खोलें

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

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

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

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

इमेज जोड़ना

Image विजेट एचटीटीपीएस यूआरएल पर होस्ट की गई PNG या JPG इमेज दिखाता है. दिखाई गई इमेज की चौड़ाई, दिखाए गए कार्ड की पूरी चौड़ाई को भरती है. वहीं, उसकी ऊंचाई, इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के हिसाब से अडजस्ट होती है. The Image विजेट onclick कार्रवाइयों के साथ काम करता है. ये कार्रवाइयां तब होती हैं, जब लोग इमेज पर क्लिक करते हैं. onclick कार्रवाइयों के उदाहरण:

Image विजेट पर ये सीमाएं लागू होती हैं:

  • सिर्फ़ PNG और JPG इमेज इस्तेमाल की जा सकती हैं.
  • होस्ट यूआरएल, HTTPS होना चाहिए.
  • कार्ड की परफ़ॉर्मेंस बेहतर बनाए रखने के लिए, इमेज का साइज़ ज़्यादा से ज़्यादा 2 एमबी रखने का सुझाव दिया जाता है.

यहां एक कार्ड दिया गया है, जिसमें Image विजेट शामिल है. इसमें, Google Chat के डेवलपर दस्तावेज़ के लैंडिंग पेज की इमेज दिखती है. जब लोग इमेज पर क्लिक करते हैं, तो Google Chat के डेवलपर दस्तावेज़ एक नए टैब में खुलते हैं.

इमेज कॉम्पोनेंट जोड़ना

Image विजेट, सीमित स्टाइलिंग वाली इमेज होती है. An imageCompent विजेट की मदद से, किसी इमेज पर cropStyle और borderStyle लागू किया जा सकता है.

यहां एक ग्रिड में दो इमेज दिखाई गई हैं. इनमें से एक इमेज को काटा गया है:

` cropStyle` लागू करके, इमेज कॉम्पोनेंट का आकार बदला जा सकता है. किसी इमेज पर कई तरह के आकार लागू किए जा सकते हैं:

  • स्क्वेयर क्रॉप लागू करने के लिए, SQUARE का इस्तेमाल करें.
  • सर्कुलर क्रॉप लागू करने के लिए, CIRCLE का इस्तेमाल करें.
  • कस्टम आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) वाला रेक्टैंगुलर क्रॉप लागू करने के लिए, RECTANGLE_CUSTOM का इस्तेमाल करें. उदाहरण के लिए, 4:3 के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) वाला रेक्टैंगुलर क्रॉप लागू करने के लिए, RECTANGLE_4_3 का इस्तेमाल किया जा सकता है.

यहां एक ग्रिड में पांच इमेज दिखाई गई हैं. हर इमेज पर अलग-अलग cropStyle लागू किया गया है:

एक चिह्न जोड़ें

The Icon विजेट बिल्ट-इन आइकॉन या कस्टम आइकॉन दिखाता है. कार्ड में आइकॉन जोड़ने से, ये काम किए जा सकते हैं:

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

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

AIRPLANE BOOKMARK
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
MEMBERSHIP MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
STAR STORE
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 विजेट, सामान्य टेक्स्ट एचटीएमएल फ़ॉर्मैटिंग के साथ काम करता है. इन विजेट का टेक्स्ट कॉन्टेंट सेट करते समय, सिर्फ़ उनसे जुड़े एचटीएमएल टैग शामिल करें. HTML टैग के बारे में ज़्यादा जानने के लिए, कार्ड के टेक्स्ट को फ़ॉर्मैट करना लेख पढ़ें.

यहां एक कार्ड दिया गया है, जिसमें DecoratedText विजेट शामिल है. इसका इस्तेमाल, संपर्क की जानकारी दिखाने के लिए किया गया है. जैसे, ईमेल पता, ऑनलाइन स्टेटस, फ़ोन नंबर, और वेबसाइट:

समस्या हल करें

जब Google Chat का कोई ऐप्लिकेशन या कार्ड गड़बड़ी दिखाता है, तो Chat के इंटरफ़ेस पर "कोई गड़बड़ी हुई" मैसेज दिखता है. या "आपके अनुरोध को प्रोसेस नहीं किया जा सका" मैसेज दिखता है. कभी-कभी, Chat के यूज़र इंटरफ़ेस (यूआई) पर कोई गड़बड़ी का मैसेज नहीं दिखता. हालांकि, Chat का ऐप्लिकेशन या कार्ड, उम्मीद के मुताबिक नतीजे नहीं देता. उदाहरण के लिए, कार्ड का मैसेज नहीं दिख सकता.

भले ही, Chat के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का मैसेज न दिखे, लेकिन Chat ऐप्लिकेशन के लिए गड़बड़ी लॉगिंग चालू होने पर, गड़बड़ियों को ठीक करने में आपकी मदद करने के लिए, गड़बड़ी के बारे में जानकारी देने वाले मैसेज और लॉग डेटा उपलब्ध होता है. गड़बड़ियों को देखने, डीबग करने, और ठीक करने में मदद पाने के लिए, Google Chat की गड़बड़ियां ठीक करना लेख पढ़ें.