این صفحه نحوه افزودن متن و تصاویر به کارت یا پیام گفتگو و تغییر نحوه نمایش متن و تصاویر در پیام را توضیح می دهد.
از Card Builder برای طراحی و پیش نمایش پیام های کارت JSON برای برنامه های Chat استفاده کنید:
کارت ساز را باز کنیدپیش نیازها
یک تصویر اضافه کنید
ویجت Image
یک تصویر PNG یا JPG را نشان می دهد که روی یک URL HTTPS میزبانی شده است. عرض تصویر نمایش داده شده تمام عرض کارت نمایش داده شده را پر می کند و ارتفاع آن برای حفظ نسبت تصویر تنظیم می شود. ویجت Image
از اقدامات onclick
که هنگام کلیک کاربران روی تصویر رخ می دهد پشتیبانی می کند. نمونه ای از اقدامات onclick
عبارتند از:
- یک پیوند با
OpenLink
باز کنید، مانند یک پیوند به اسناد برنامهنویس Google Chat،https://developers.google.com/chat
. - عملی را اجرا کنید که یک تابع سفارشی را اجرا می کند، مانند فراخوانی یک API.
ویجت Image
دارای محدودیت های زیر است:
- فقط تصاویر PNG و JPG پشتیبانی می شوند.
- URL میزبان باید
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 | ||
دعوت | MAP_PIN | ||
عضویت | MULTIPLE_PEOPLE | ||
PERSON | تلفن | ||
RESTAURANT_ICON | سبد خرید | ||
ستاره | فروشگاه | ||
بلیط | قطار - تعلیم دادن | ||
دوربین فیلمبرداری | VIDEO_PLAY |
یک پاراگراف از متن قالب بندی شده اضافه کنید
ویجت TextParagraph
یک پاراگراف از متن را با قالب بندی اختیاری HTML نمایش می دهد. هنگام تنظیم محتوای متنی این ویجت ها، فقط تگ های HTML مربوطه را اضافه کنید. برای اطلاعات بیشتر در مورد اینکه کدام برچسبهای HTML پشتیبانی میشوند، به قالببندی متن کارت مراجعه کنید.
به عنوان مثال، قالب بندی زیر برای متن پاراگراف موجود است:
- با تگ های HTML
<b>
,<u>
,<i>
متن پررنگ، زیرخط دار یا مورب را نمایش دهید. - پیوند به وبسایتها با
<a href="https://www.google.com">hyperlinks</a>
HTML. - مقداری رنگ با
<font color="#ea9999">font tags</font>
HTML اضافه کنید.
هر ویجت TextParagraph
به عنوان یک پاراگراف جدید ارائه می شود و می توان آن را شبیه به یک تگ HTML <p>
در نظر گرفت.
کارت زیر شامل دو ویجت TextParagraph
است که برای نمایش دو پاراگراف با قالب بندی ساده HTML استفاده می شود:
نمایش متن با عناصر تزئینی
ویجت DecoratedText
متنی را با چیدمان و قابلیت های اختیاری نمایش می دهد. مثلا:
- یک
icon
در مقابل متن باstartIcon
نمایش دهید. - عنوانی را قبل از متن با
topLabel
نشان دهید. - یک دکمه قابل کلیک با
button
یا کلید قابل تعویض باswitchControl
اضافه کنید.
هنگامی که نیاز به ارائه اطلاعات به روشی آسان و تعاملی دارید، از ویجت DecoratedText
استفاده کنید. ویجت برای موارد استفاده مانند کارتهای تماس، بهروزرسانی وضعیت سفارش و اعلانهای بلیت کاری عالی است.
ویجت DecoratedText
از قالب بندی متن ساده HTML پشتیبانی می کند. هنگام تنظیم محتوای متنی این ویجت ها، فقط تگ های HTML مربوطه را اضافه کنید. برای اطلاعات بیشتر در مورد اینکه کدام برچسبهای HTML پشتیبانی میشوند، به قالببندی متن کارت مراجعه کنید.
کارت زیر شامل یک ویجت DecoratedText
است که برای نمایش اطلاعات تماس مانند آدرس ایمیل، وضعیت آنلاین، شماره تلفن و وب سایت استفاده می شود:
عیب یابی
وقتی یک برنامه یا کارت Google Chat خطایی را برمیگرداند، رابط Chat پیامی را نشان میدهد که میگوید «مشکلی پیش آمده است». یا "نمی توان به درخواست شما رسیدگی کرد." گاهی اوقات Chat UI هیچ پیام خطایی را نمایش نمی دهد، اما برنامه یا کارت Chat نتیجه غیرمنتظره ای ایجاد می کند. برای مثال، ممکن است پیام کارت ظاهر نشود.
اگرچه ممکن است پیام خطا در رابط کاربری گپ نمایش داده نشود، پیامهای خطای توصیفی و دادههای گزارش در دسترس هستند تا به شما کمک کنند هنگام فعال بودن ثبت خطا برای برنامههای گپ، خطاها را برطرف کنید. برای راهنمایی برای مشاهده، اشکالزدایی و رفع خطاها، به عیبیابی و رفع خطاهای Google Chat مراجعه کنید.