একটি কার্ড বা ডায়ালগে পাঠ্য এবং ছবি যোগ করুন

এই পৃষ্ঠাটি ব্যাখ্যা করে কিভাবে একটি কার্ড বা ডায়ালগ বার্তায় টেক্সট এবং ইমেজ যোগ করতে হয় এবং বার্তার মধ্যে টেক্সট এবং ইমেজগুলি কীভাবে উপস্থিত হয় তা পরিবর্তন করতে হয়।

চ্যাট অ্যাপের জন্য JSON কার্ড মেসেজ ডিজাইন ও প্রিভিউ করতে কার্ড বিল্ডার ব্যবহার করুন:

কার্ড বিল্ডার খুলুন

পূর্বশর্ত

  • Google Chat- এ অ্যাক্সেস সহ একটি Google Workspace অ্যাকাউন্ট ।
  • একটি প্রকাশিত চ্যাট অ্যাপ। একটি চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি অনুসরণ করুন।

    • একটি ইমেজ যোগ করুন

    Image উইজেট একটি HTTPS URL-এ হোস্ট করা একটি PNG বা JPG চিত্র প্রদর্শন করে। প্রদর্শিত চিত্রের প্রস্থটি প্রদর্শিত কার্ডের সম্পূর্ণ প্রস্থকে পূরণ করে এবং এর উচ্চতা চিত্রটির আকৃতির অনুপাত বজায় রাখতে সামঞ্জস্য করে। Image উইজেট onclick ক্রিয়াগুলিকে সমর্থন করে যা ব্যবহারকারীরা ছবিটি ক্লিক করার সময় ঘটে। onclick ক্রিয়াগুলির উদাহরণ অন্তর্ভুক্ত:

    • OpenLink এর সাথে একটি হাইপারলিঙ্ক খুলুন, যেমন Google Chat ডেভেলপার ডকুমেন্টেশনের হাইপারলিঙ্ক, https://developers.google.com/chat ।
    • একটি ক্রিয়া চালান যা একটি কাস্টম ফাংশন চালায়, যেমন একটি API কল করা।

    Image উইজেটের নিম্নলিখিত সীমাবদ্ধতা রয়েছে:

    • শুধুমাত্র PNG এবং JPG ছবি সমর্থিত।
    • হোস্ট URL অবশ্যই HTTPS হতে হবে।
    • পারফরম্যান্স কার্ড নিশ্চিত করতে, সর্বাধিক প্রস্তাবিত ছবির আকার 2MB।

    নিচেরটি একটি Image উইজেট সমন্বিত একটি কার্ড। এটি Google Chat ডেভেলপার ডকুমেন্টেশন ল্যান্ডিং পৃষ্ঠার ছবি প্রদর্শন করে। ব্যবহারকারীরা ছবিটিতে ক্লিক করলে, Google Chat বিকাশকারী ডকুমেন্টেশন একটি নতুন ট্যাবে খোলে।

    একটি ইমেজ উপাদান যোগ করুন

    Image উইজেট হল সীমিত স্টাইলিং সহ একটি ছবি। একটি imageCompent উইজেট আপনাকে একটি ছবিতে cropStyle এবং borderStyle প্রয়োগ করতে দেয়।

    নিম্নলিখিত উদাহরণটি একটি গ্রিডে দুটি চিত্র দেখায় যেখানে একটি চিত্র ক্রপ করা হয়েছে:

    একটি ছবি ক্রপ করুন

    আপনি একটি cropStyle প্রয়োগ করে একটি চিত্রের আকার সামঞ্জস্য করতে পারেন। একটি ছবিতে প্রয়োগ করার জন্য বিভিন্ন আকার রয়েছে:

    • একটি বর্গক্ষেত্র ফসল প্রয়োগ করতে SQUARE ব্যবহার করুন।
    • একটি বৃত্তাকার ফসল প্রয়োগ করতে CIRCLE ব্যবহার করুন।
    • একটি কাস্টম আকৃতির অনুপাত সহ একটি আয়তক্ষেত্রাকার ক্রপ প্রয়োগ করতে RECTANGLE_CUSTOM ব্যবহার করুন৷ উদাহরণস্বরূপ, আপনি 4:3 আকৃতির অনুপাত সহ একটি আয়তক্ষেত্রাকার ফসল প্রয়োগ করতে RECTANGLE_4_3 ব্যবহার করতে পারেন৷

    নিম্নলিখিত উদাহরণটি প্রতিটি ছবিতে প্রয়োগ করা একটি ভিন্ন cropStyle সহ একটি গ্রিডে পাঁচটি চিত্র দেখায়:

    একটি আইকন যোগ করুন

    Icon উইজেট হয় একটি অন্তর্নির্মিত আইকন বা কাস্টম আইকন উপস্থাপন করে। আপনি নিম্নলিখিত উপায়ে কার্ড বার্তা এবং ডায়ালগে Icon ব্যবহার করতে পারেন:

    • একটি স্বতন্ত্র আইকন প্রদর্শন করুন।
    • একটি DecoratedText উইজেটের অংশ হিসাবে সম্পর্কিত পাঠ্যের সামনে একটি আইকন প্রদর্শন করুন৷
    • একটি ButtonList উইজেটের অংশ হিসাবে একটি ইন্টারেক্টিভ বোতাম হিসাবে একটি আইকন প্রদর্শন করুন৷

    নিম্নলিখিত একটি কার্ড যা একটি বিল্ট-ইন আইকন সহ একটি Icon উপাদান নিয়ে গঠিত:

    নিম্নলিখিত টেবিলটি কার্ড বার্তাগুলির জন্য উপলব্ধ অন্তর্নির্মিত আইকনগুলির তালিকা করে:

    এয়ারপ্লেন বুকমার্ক
    বাস CAR
    ঘড়ি CONFIRMATION_NUMBER_ICON
    বর্ণনা ডলার
    ইমেইল EVENT_SEAT
    FLIGHT_ARRIVAL FLIGHT_DEPARTURE
    হোটেল HOTEL_ROOM_TYPE
    আমন্ত্রণ জানান MAP_PIN
    সদস্যপদ MULTIPLE_PEOPLE
    ব্যক্তি ফোন
    RESTAURANT_ICON বাজারের ব্যাগ
    স্টার দোকান
    টিকেট ট্রেন
    ভিডিও ক্যামেরা ভিডিও_প্লে

    বিন্যাসিত পাঠ্যের একটি অনুচ্ছেদ যোগ করুন

    TextParagraph উইজেট ঐচ্ছিক HTML বিন্যাস সহ পাঠ্যের একটি অনুচ্ছেদ প্রদর্শন করে। এই উইজেটগুলির পাঠ্য সামগ্রী সেট করার সময়, শুধুমাত্র সংশ্লিষ্ট HTML ট্যাগগুলি অন্তর্ভুক্ত করুন৷ কোন HTML ট্যাগগুলি সমর্থিত সে সম্পর্কে আরও তথ্যের জন্য, কার্ড পাঠ্য বিন্যাস দেখুন।

    উদাহরণস্বরূপ, অনুচ্ছেদ পাঠ্যের জন্য নিম্নলিখিত বিন্যাস উপলব্ধ:

    • HTML <b> , <u> , <i> ট্যাগ সহ বোল্ড, আন্ডারলাইন বা তির্যক লেখা প্রদর্শন করুন।
    • HTML <a href="https://www.google.com">hyperlinks</a> সহ ওয়েবসাইটগুলির লিঙ্ক করুন৷
    • HTML <font color="#ea9999">font tags</font> দিয়ে কিছু রঙ যোগ করুন।

    প্রতিটি TextParagraph উইজেট একটি নতুন অনুচ্ছেদ হিসাবে রেন্ডার করে এবং এটিকে HTML <p> ট্যাগের মতো মনে করা যেতে পারে।

    নিম্নলিখিত দুটি TextParagraph উইজেট সমন্বিত একটি কার্ড যা সাধারণ HTML বিন্যাস সহ দুটি অনুচ্ছেদ প্রদর্শন করতে ব্যবহৃত হয়:

    আলংকারিক উপাদান সহ পাঠ্য প্রদর্শন করুন

    DecoratedText উইজেট ঐচ্ছিক লেআউট এবং ক্ষমতা সহ পাঠ্য প্রদর্শন করে। উদাহরণ স্বরূপ:

    • startIcon সহ পাঠ্যের সামনে একটি icon প্রদর্শন করুন।
    • topLabel সহ পাঠ্যের আগে একটি শিরোনাম দেখান।
    • button সহ একটি ক্লিকযোগ্য বোতাম যোগ করুন বা switchControl সাথে পরিবর্তনযোগ্য টগল করুন।

    আপনার যখন সহজে ব্যবহারযোগ্য এবং ইন্টারেক্টিভ উপায়ে তথ্য উপস্থাপন করার প্রয়োজন হয় তখন DecoratedText উইজেটটি ব্যবহার করুন। উইজেটটি যোগাযোগের কার্ড, অর্ডার স্ট্যাটাস আপডেট এবং কাজের টিকিটের বিজ্ঞপ্তির মতো ব্যবহারের ক্ষেত্রে উপযুক্ত।

    DecoratedText উইজেট সহজ পাঠ্য HTML বিন্যাস সমর্থন করে। এই উইজেটগুলির পাঠ্য সামগ্রী সেট করার সময়, শুধুমাত্র সংশ্লিষ্ট HTML ট্যাগগুলি অন্তর্ভুক্ত করুন৷ কোন HTML ট্যাগগুলি সমর্থিত সে সম্পর্কে আরও তথ্যের জন্য, কার্ড পাঠ্য বিন্যাস দেখুন।

    নিচের একটি কার্ড যা একটি DecoratedText উইজেট সম্বলিত যা যোগাযোগের বিশদ বিবরণ প্রদর্শন করতে ব্যবহৃত হয়, যেমন ইমেল ঠিকানা, অনলাইন স্থিতি, ফোন নম্বর এবং ওয়েবসাইট:

    সমস্যা সমাধান

    যখন একটি Google চ্যাট অ্যাপ বা কার্ড একটি ত্রুটি ফেরত দেয়, তখন চ্যাট ইন্টারফেস "কিছু ভুল হয়েছে" বলে একটি বার্তা দেখায়। অথবা "আপনার অনুরোধ প্রক্রিয়া করতে অক্ষম।" কখনও কখনও চ্যাট UI কোনও ত্রুটি বার্তা প্রদর্শন করে না, তবে চ্যাট অ্যাপ বা কার্ড একটি অপ্রত্যাশিত ফলাফল তৈরি করে; উদাহরণস্বরূপ, একটি কার্ড বার্তা প্রদর্শিত নাও হতে পারে৷

    যদিও একটি ত্রুটি বার্তা চ্যাট UI-তে প্রদর্শিত নাও হতে পারে, বর্ণনামূলক ত্রুটি বার্তা এবং লগ ডেটা উপলব্ধ রয়েছে যাতে আপনি যখন চ্যাট অ্যাপগুলির জন্য ত্রুটি লগিং চালু থাকে তখন ত্রুটিগুলি ঠিক করতে সহায়তা করে৷ দেখা, ডিবাগিং এবং ত্রুটিগুলি সংশোধন করতে সহায়তার জন্য, Google Chat ত্রুটিগুলি সমস্যা সমাধান এবং ঠিক করুন দেখুন৷