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

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

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

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

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

  • حساب Google Workspace مع إمكانية الوصول إلى Google Chat
  • تطبيق Chat منشور لإنشاء تطبيق Chat، اتّبِع الخطوات التالية التشغيل السريع:

    • إضافة صورة

    تشير رسالة الأشكال البيانية تطبيق "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" مع رمز مضمَّن:

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

    طائرة الإشارة المرجعية
    حافلة سيارة
    الساعة CONFIRMATION_NUMBER_ICON
    الوصف دولار
    البريد الإلكتروني EVENT_SEAT
    FLIGHT_ARRIVAL FLIGHT_DEPARTURE
    الفندق HOTEL_ROOM_TYPE
    INVITE MAP_PIN
    العضوية MULTIPLE_PEOPLE
    الشخص الهاتف
    RESTAURANT_ICON SHOPPING_CART
    STAR المتجر
    التذكرة القطار
    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 أو تعرض card خطأً، تعرض واجهة Chat رسالة مفادها "حدث خطأ". أو "تعذَّرت معالجة طلبك". في بعض الأحيان، لا يمكن واجهة مستخدم Chat لا يعرض أي رسالة خطأ، ولكن يظهر تطبيق Chat أو ينتج عن بطاقة نتيجة غير متوقعة؛ على سبيل المثال، قد لا تظهر رسالة البطاقة موضع الإعلان.

    على الرغم من أنه قد لا تظهر رسالة الخطأ في واجهة مستخدم Chat، تتوفر رسائل خطأ وصفية وبيانات السجل لمساعدتك في إصلاح الأخطاء عند تفعيل ميزة تسجيل الأخطاء لتطبيقات Chat للحصول على مساعدة في العرض، وتصحيح الأخطاء وإصلاح الأخطاء، فراجع تحديد مشاكل Google Chat وحلّها.