متن و تصاویر را به کارت اضافه کنید

این صفحه نحوه اضافه کردن و قالب‌بندی متن و تصاویر به کارت‌ها را توضیح می‌دهد.

برای کسب اطلاعات بیشتر در مورد ساخت کارت، به بخش ساخت کارت برای برنامه‌های چت گوگل مراجعه کنید.

از Card Builder برای طراحی و پیش‌نمایش پیام‌رسانی و رابط‌های کاربری برای برنامه‌های چت استفاده کنید:

سازنده کارت را باز کنید

پیش‌نیازها

یک برنامه گوگل چت که برای دریافت و پاسخ به رویدادهای تعاملی پیکربندی شده است. برای ایجاد یک برنامه چت تعاملی، بر اساس معماری برنامه‌ای که می‌خواهید استفاده کنید، یکی از مراحل شروع سریع زیر را انجام دهید:

اضافه کردن تصاویر یا آیکون‌ها

این بخش نحوه اضافه کردن عناصر بصری به کارت‌ها مانند تصاویر، اجزای تصویر و آیکون‌ها را توضیح می‌دهد.

اضافه کردن تصویر

ویجت Image ، یک تصویر PNG یا JPG میزبانی شده روی یک URL HTTPS را نمایش می‌دهد. عرض تصویر نمایش داده شده، کل عرض کارت نمایش داده شده را پر می‌کند و ارتفاع آن برای حفظ نسبت ابعاد تصویر تنظیم می‌شود. ویجت Image از اقدامات onclick که هنگام کلیک کاربران روی تصویر رخ می‌دهد، پشتیبانی می‌کند. نمونه‌هایی از اقدامات onclick عبارتند از:

  • با OpenLink یک هایپرلینک باز کنید، مانند هایپرلینک به مستندات توسعه‌دهندگان گوگل چت، https://developers.google.com/chat .
  • عملی را اجرا کنید که یک تابع سفارشی را اجرا کند، مانند فراخوانی یک API.

ویجت Image محدودیت‌های زیر را دارد:

  • فقط تصاویر PNG و JPG پشتیبانی می‌شوند.
  • آدرس میزبان (host URL) باید HTTPS باشد.
  • برای اطمینان از عملکرد صحیح کارت‌ها، حداکثر اندازه تصویر توصیه شده ۲ مگابایت است.

در ادامه، کارتی شامل یک ویجت Image را مشاهده می‌کنید. این کارت، تصویر صفحه فرود مستندات توسعه‌دهندگان گوگل چت را نمایش می‌دهد. وقتی کاربران روی تصویر کلیک می‌کنند، مستندات توسعه‌دهندگان گوگل چت در یک تب جدید باز می‌شود.

یک جزء تصویر اضافه کنید

ویجت Image یک تصویر با استایل‌بندی محدود است. ویجت imageCompent به شما امکان می‌دهد cropStyle و borderStyle را روی یک تصویر اعمال کنید.

مثال زیر دو تصویر را در یک جدول نشان می‌دهد که یکی از تصاویر برش داده شده است:

شما می‌توانید شکل یک جزء تصویر را با اعمال cropStyle تنظیم کنید. چندین شکل برای اعمال به یک تصویر وجود دارد:

  • برای اعمال برش مربعی SQUARE استفاده کنید.
  • برای اعمال برش دایره‌ای از CIRCLE استفاده کنید.
  • RECTANGLE_CUSTOM برای اعمال برش مستطیلی با نسبت ابعاد سفارشی استفاده کنید. برای مثال، می‌توانید RECTANGLE_4_3 برای اعمال برش مستطیلی با نسبت ابعاد ۴:۳ استفاده کنید.

مثال زیر پنج تصویر را در یک شبکه نشان می‌دهد که برای هر تصویر یک cropStyle متفاوت اعمال شده است:

اضافه کردن آیکون

ویجت Icon یا یک آیکون داخلی است یا یک آیکون سفارشی . شما می‌توانید آیکون‌ها را به کارت‌ها اضافه کنید تا هر یک از موارد زیر را انجام دهید:

  • نمایش یک آیکون مستقل.
  • به عنوان بخشی از ویجت DecoratedText ، یک آیکون را در جلوی متن مرتبط نمایش دهید.
  • یک آیکون را به عنوان یک دکمه تعاملی، به عنوان بخشی از یک ویجت ButtonList نمایش دهید.

کارت زیر شامل یک کامپوننت Icon با یک آیکون داخلی است:

جدول زیر نمادهای داخلی موجود برای پیام‌های کارت را فهرست می‌کند:

هواپیما بوکمارک
اتوبوس ماشین
ساعت شماره_تایید_آیکون
شرح دلار
ایمیل صندلی رویداد
پرواز_رسیدن پرواز_عزیمت
هتل نوع_اتاق_هتل
دعوت پین_نقشه
عضویت چند_نفره
شخص تلفن
آیکون رستوران سبد خرید
ستاره فروشگاه
بلیط قطار
دوربین_فیلمبرداری پخش ویدئو

اضافه کردن متن به کارت

این بخش نحوه اضافه کردن و قالب‌بندی متن در یک کارت را توضیح می‌دهد.

یک پاراگراف متن قالب‌بندی‌شده اضافه کنید

ویجت TextParagraph یک پاراگراف متن را با قالب‌بندی HTML اختیاری نمایش می‌دهد. هنگام تنظیم محتوای متن این ویجت‌ها، فقط تگ‌های HTML مربوطه را وارد کنید. برای اطلاعات بیشتر در مورد اینکه کدام تگ‌های HTML پشتیبانی می‌شوند، به بخش «قالب‌بندی متن نمایش داده شده در کارت‌ها» مراجعه کنید.

برای مثال، قالب‌بندی زیر برای متن پاراگراف موجود است:

  • متن را با استفاده از تگ‌های <b> ، <u> و <i> در HTML به صورت پررنگ، زیرخط‌دار یا ایتالیک نمایش دهید.
  • با استفاده <a href="https://www.google.com">hyperlinks</a> در HTML به وب‌سایت‌ها لینک دهید.
  • با استفاده <font color="#ea9999">font tags</font> در HTML، کمی رنگ اضافه کنید.

هر ویجت TextParagraph به عنوان یک پاراگراف جدید رندر می‌شود و می‌توان آن را مشابه یک تگ <p> در HTML در نظر گرفت.

در زیر یک کارت متشکل از دو ویجت TextParagraph را مشاهده می‌کنید که برای نمایش دو پاراگراف با قالب‌بندی ساده HTML استفاده می‌شود:

یک پاراگراف متنی تاشو اضافه کنید

پاراگراف‌های متنی قابل جمع شدن به کاربران اجازه می‌دهند اطلاعات بیشتری را در صورت نیاز نمایش دهند. این ویجت برای ارائه محتوای طولانی یا جزئیات اضافی که می‌توان هنگام انتخاب آنها را بررسی کرد، ایده‌آل است و یک تجربه کاربری پویا و تعاملی ایجاد می‌کند.

نمایش متن با عناصر تزئینی

ویجت DecoratedText متن را با طرح‌بندی و قابلیت‌های اختیاری نمایش می‌دهد. برای مثال:

  • با استفاده از startIcon یک icon در جلوی متن نمایش دهید.
  • با استفاده از topLabel عنوانی را قبل از متن نمایش دهید.
  • با استفاده از button یک دکمه قابل کلیک یا با استفاده از switchControl یک دکمه با قابلیت تغییر وضعیت اضافه کنید.

وقتی نیاز دارید اطلاعات را به روشی آسان و تعاملی ارائه دهید، از ویجت DecoratedText استفاده کنید. این ویجت برای مواردی مانند کارت‌های تماس، به‌روزرسانی وضعیت سفارش و اعلان‌های تیکت کاری ایده‌آل است.

ویجت DecoratedText از قالب‌بندی ساده متن HTML پشتیبانی می‌کند. هنگام تنظیم محتوای متن این ویجت‌ها، فقط تگ‌های HTML مربوطه را وارد کنید. برای اطلاعات بیشتر در مورد اینکه کدام تگ‌های HTML پشتیبانی می‌شوند، به قالب‌بندی متن کارت مراجعه کنید.

در زیر یک کارت شامل یک ویجت DecoratedText را مشاهده می‌کنید که برای نمایش اطلاعات تماس، مانند آدرس ایمیل، وضعیت آنلاین بودن، شماره تلفن و وب‌سایت استفاده می‌شود:

عیب‌یابی

وقتی یک برنامه یا کارت چت گوگل خطایی را برمی‌گرداند، رابط چت پیامی با عنوان «مشکلی پیش آمده است» یا «درخواست شما قابل پردازش نیست» نمایش می‌دهد. گاهی اوقات رابط کاربری چت هیچ پیام خطایی را نمایش نمی‌دهد، اما برنامه یا کارت چت نتیجه غیرمنتظره‌ای را ایجاد می‌کند؛ برای مثال، ممکن است پیام کارت ظاهر نشود.

اگرچه ممکن است پیام خطا در رابط کاربری چت نمایش داده نشود، پیام‌های خطای توصیفی و داده‌های گزارش برای کمک به شما در رفع خطاها هنگام فعال بودن ثبت خطا برای برنامه‌های چت در دسترس هستند. برای کمک به مشاهده، اشکال‌زدایی و رفع خطاها، به عیب‌یابی و رفع خطاهای گوگل چت مراجعه کنید.