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

এই পৃষ্ঠাটি ব্যাখ্যা করে কিভাবে কার্ডগুলিতে টেক্সট এবং ছবি যোগ এবং ফর্ম্যাট করতে হয়।

কার্ড তৈরি সম্পর্কে আরও জানতে, Google Chat অ্যাপের জন্য কার্ড তৈরি করুন দেখুন।

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

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

পূর্বশর্ত

একটি Google Chat অ্যাপ যা ইন্টারঅ্যাকশন ইভেন্ট গ্রহণ এবং প্রতিক্রিয়া জানাতে কনফিগার করা হয়েছে। একটি ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, আপনি যে অ্যাপ আর্কিটেকচারটি ব্যবহার করতে চান তার উপর ভিত্তি করে নিম্নলিখিত কুইকস্টার্টগুলির মধ্যে একটি সম্পূর্ণ করুন:

ছবি বা আইকন যোগ করুন

এই বিভাগটি ব্যাখ্যা করে কিভাবে কার্ডগুলিতে ভিজ্যুয়াল উপাদান যোগ করতে হয়, যেমন ছবি, ছবির উপাদান এবং আইকন।

একটি ছবি যোগ করুন

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

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

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

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

নিচে একটি কার্ড দেওয়া হল যেখানে একটি Image উইজেট আছে। এটি গুগল চ্যাট ডেভেলপার ডকুমেন্টেশন ল্যান্ডিং পেজের ছবি প্রদর্শন করে। ব্যবহারকারীরা যখন ছবিটিতে ক্লিক করেন, গুগল চ্যাট ডেভেলপার ডকুমেন্টেশন একটি নতুন ট্যাবে খোলে।

একটি ছবির উপাদান যোগ করুন

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

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

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

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

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

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

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

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

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

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

বিমান বুকমার্ক
বাস গাড়ি
ঘড়ি নিশ্চিতকরণ_NUMBER_আইকন
বর্ণনাঃ ডলার
ইমেইল ইভেন্ট_সিট
ফ্লাইট_আগমন ফ্লাইট_ডিপার্টুর
হোটেল হোটেল_রুম_টাইপ
আমন্ত্রণ জানান ম্যাপ_পিন
সদস্যপদ বহুজন
ব্যক্তি ফোন
রেস্তোরাঁর আইকন শপিং_কার্ট
তারকা দোকান
টিকিট ট্রেন
ভিডিও ক্যামেরা ভিডিও প্লে

একটি কার্ডে টেক্সট যোগ করুন

এই বিভাগটি ব্যাখ্যা করে কিভাবে একটি কার্ডে টেক্সট যোগ এবং ফর্ম্যাট করতে হয়।

ফর্ম্যাট করা টেক্সটের একটি অনুচ্ছেদ যোগ করুন

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 Chat অ্যাপ বা কার্ড কোনও ত্রুটি ফেরত দেয়, তখন Chat ইন্টারফেসটি "কিছু ভুল হয়েছে" বা "আপনার অনুরোধ প্রক্রিয়া করতে অক্ষম" বলে একটি বার্তা প্রকাশ করে। কখনও কখনও Chat UI কোনও ত্রুটির বার্তা প্রদর্শন করে না, তবে Chat অ্যাপ বা কার্ড একটি অপ্রত্যাশিত ফলাফল তৈরি করে; উদাহরণস্বরূপ, একটি কার্ড বার্তা প্রদর্শিত নাও হতে পারে।

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