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

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

कार्ड बनाने के बारे में ज़्यादा जानने के लिए, 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 विजेट एक इमेज है, जिसमें स्टाइलिंग की सीमित सुविधाएं हैं. ImageComponent विजेट की मदद से, किसी इमेज पर cropStyle और borderStyle लागू किया जा सकता है.

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

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

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

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

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

Icon विजेट, पहले से मौजूद आइकॉन या पसंद के मुताबिक आइकॉन को दिखाता है. कार्ड में आइकॉन जोड़कर, इनमें से कोई भी काम किया जा सकता है:

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

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

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

AIRPLANE BOOKMARK
BUS मध्य अफ़्रीकी गणराज्य
CLOCK CONFIRMATION_NUMBER_ICON
ब्यौरा DOLLAR
ईमेल EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
न्योता भेजें MAP_PIN
MEMBERSHIP MULTIPLE_PEOPLE
व्यक्ति फ़ोन
RESTAURANT_ICON SHOPPING_CART
STAR STORE
टिकट ट्रेन
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 से जुड़ी गड़बड़ियों को ठीक करना लेख पढ़ें.