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

این صفحه نحوه افزودن متن و تصاویر به کارت یا پیام گفتگو و تغییر نحوه نمایش متن و تصاویر در پیام را توضیح می دهد.

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

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

پیش نیازها

  • یک حساب Google Workspace با دسترسی به Google 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 مراجعه کنید.