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

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

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

Chat ऐप्लिकेशन के लिए, JSON कार्ड मैसेज डिज़ाइन करने और उनकी झलक देखने के लिए, Card Builder का इस्तेमाल करें:

कार्ड बिल्डर खोलें

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

Google 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 कॉम्पोनेंट पहले से मौजूद आइकॉन के साथ मौजूद है:

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

हवाई जहाज़ बुकमार्क
बस कार्ड
घड़ी CONFIRMATION_NUMBER_ICON
ब्यौरा डॉलर
ईमेल EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
होटल HOTEL_ROOM_TYPE
न्योता दें 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 से जुड़ी गड़बड़ियां हल करना और गड़बड़ियां ठीक करना.