किसी कार्ड या डायलॉग बॉक्स में टेक्स्ट और इमेज जोड़ना

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

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

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

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

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

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

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

    कॉन्टेंट बनाने Icon विजेट का प्रतिनिधित्व करता है पहले से मौजूद है आइकॉन या कस्टम आइकन. Icon का इस्तेमाल इन भाषाओं में किया जा सकता है कार्ड मैसेज और डायलॉग किन तरीकों से:

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

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

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

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