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

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

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

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

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

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

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

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

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

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

AIRPLANE बुकमार्क करें
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
ब्यौरा DOLLAR
ईमेल EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
न्योता दें 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 विजेट में, सामान्य टेक्स्ट एचटीएमएल फ़ॉर्मैटिंग का इस्तेमाल किया जा सकता है. इन विजेट का टेक्स्ट कॉन्टेंट सेट करते समय, सिर्फ़ उनसे जुड़े एचटीएमएल टैग शामिल करें. कौनसे एचटीएमएल टैग इस्तेमाल किए जा सकते हैं, इस बारे में ज़्यादा जानने के लिए कार्ड के टेक्स्ट की फ़ॉर्मैटिंग लेख पढ़ें.

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

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

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

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