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

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

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

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

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

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

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 का इस्तेमाल करें. उदाहरण के लिए, 4:3 के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में आयताकार क्रॉप करने के लिए, RECTANGLE_4_3 का इस्तेमाल किया जा सकता है.

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

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

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

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

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

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

AIRPLANE BOOKMARK
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
ब्यौरा DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
न्योता दें MAP_PIN
MEMBERSHIP 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 से जुड़ी गड़बड़ियों को ठीक करना और उनसे जुड़ी समस्याओं को हल करना लेख पढ़ें.