افزودن نوشتار و تصویر به کارت‌ها

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

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

از «کارت‌ساز» برای طراحی و پیش‌نمایش پیام‌رسانی و میاناهای کاربر برای برنامه‌های Chat استفاده کنید:

باز کردن «کارت‌ساز»

پیش‌نیازها

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

افزودن تصویر یا نماد

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

افزودن تصویر

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

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

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

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

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

افزودن مؤلفه تصویر

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

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

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

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

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

افزودن نماد

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

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

در زیر کارتی متشکل از مؤلفه Icon با نماد داخلی نشان داده شده است:

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

AIRPLANE BOOKMARK
BUS CAR
ساعت CONFIRMATION_NUMBER_ICON
شرح دلار
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
دعوت MAP_PIN
عضویت MULTIPLE_PEOPLE
شخص تلفن
RESTAURANT_ICON SHOPPING_CART
STAR STORE
بلیت TRAIN
VIDEO_CAMERA VIDEO_PLAY

افزودن نوشتار به کارت

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

افزودن پاراگرافی از نوشتار قالب‌بندی‌شده

ابزارک 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 نوشتار را با چیدمان و قابلیت‌های اختیاری نمایش می‌دهد. برای مثال:

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

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

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

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

عیب‌یابی

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

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