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

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

يمكنك استخدام "أداة إنشاء البطاقات" لتصميم رسائل بطاقات JSON ومعاينتها لتطبيقات Chat:

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

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

  • حساب 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
    النجمة المتجر
    التذكرة 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 وحلّها.