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

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

कार्ड बनाने के बारे में ज़्यादा जानने के लिए, 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 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 विजेट में, टेक्स्ट को लेआउट और सुविधाओं के साथ दिखाया जाता है. उदाहरण के लिए:

  • icon को startIcon वाले टेक्स्ट के सामने दिखाएं.
  • topLabel का इस्तेमाल करके, टेक्स्ट से पहले कोई टाइटल दिखाएं.
  • button के साथ क्लिक किए जा सकने वाला बटन या switchControl के साथ टॉगल करने की सुविधा जोड़ें.

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

DecoratedText विजेट में, सामान्य टेक्स्ट एचटीएमएल फ़ॉर्मैटिंग का इस्तेमाल किया जा सकता है. इन विजेट का टेक्स्ट कॉन्टेंट सेट करते समय, सिर्फ़ उनसे जुड़े एचटीएमएल टैग शामिल करें. कौनसे एचटीएमएल टैग इस्तेमाल किए जा सकते हैं, इस बारे में ज़्यादा जानने के लिए कार्ड के टेक्स्ट की फ़ॉर्मैटिंग लेख पढ़ें.

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

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

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

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