إضافة نص وصور إلى بطاقة أو مربّع حوار

توضّح هذه الصفحة كيفية إضافة نصوص وصور إلى بطاقة أو رسالة مربّع حوار، ولتعديل طريقة ظهور النصوص والصور داخل الرسالة.


يمكنك تصميم البطاقات ومعاينتها باستخدام أداة إنشاء البطاقات.

فتح أداة إنشاء البطاقات

المتطلبات الأساسية

  • حساب على Google Workspace يمكنه الوصول إلى Google Chat
  • هو تطبيق Chat منشور. لإنشاء تطبيق في Chat، اتّبِع quickstart.
  • إضافة صورة

    تعرض التطبيق المصغّر Image صورة بتنسيق PNG أو JPG تتم استضافتها على عنوان URL يستخدم HTTPS. يملأ عرض الصورة المعروضة عرض البطاقة المعروضة بالكامل، ويتم ضبط ارتفاعها للحفاظ على نسبة العرض إلى الارتفاع للصورة. يتيح تطبيق Image المصغّر استخدام إجراءات onclick التي تحدث عندما ينقر المستخدمون على الصورة. يشمل مثال على إجراءَين (onclick) ما يلي:

    • افتح رابطًا تشعّبيًا باستخدام OpenLink، مثل رابط تشعّبي يؤدي إلى مستندات مطوّري برامج Google Chat https://developers.google.com/chat.
    • شغِّل إجراءً يشغل وظيفة مخصصة، مثل استدعاء واجهة برمجة تطبيقات.

    تخضع أداة 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 مع رمز مضمّن:

    يسرد الجدول التالي الرموز المضمّنة المتاحة لرسائل البطاقات:

    الطائرة BOOKMARK
    BUS السيارة
    الساعة CONFIRMATION_NUMBER_ICON
    الوصف دولار
    البريد الإلكتروني EVENT_SEAT
    FLIGHT_ARRIVAL FLIGHT_DEPARTURE
    الفندق HOTEL_ROOM_TYPE
    دعوة MAP_PIN
    العضوية MULTIPLE_PEOPLE
    الشخص الهاتف
    RESTAURANT_ICON SHOPPING_CART
    ميزة STAR المتجر
    تذكرة 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.