تشرح هذه الصفحة كيفية إضافة نص وصور إلى بطاقة أو رسالة مربّع حوار، وتعديل كيفية ظهور النص والصور في الرسالة.
يمكنك استخدام "أداة إنشاء البطاقات" لتصميم رسائل بطاقات JSON ومعاينتها لتطبيقات Chat:
فتح "أداة إنشاء البطاقات"المتطلّبات الأساسية
إضافة صورة
يعرض
تطبيق Image
صورة بتنسيق PNG أو JPG مستضافة على عنوان URL يستخدم HTTPS.
يملأ عرض الصورة المعروضة العرض الكامل للبطاقة المعروضة، ويتم ضبط ارتفاعها للحفاظ على نسبة عرض إلى ارتفاع الصورة. تتيح أداة Image
إجراءات onclick
يتم تنفيذها عندما ينقر المستخدمون على الصورة. يشمل المثال على إجراءات "onclick
" ما يلي:
- افتح رابطًا تشعّبيًا باستخدام
OpenLink
، مثل رابط تشعّبي يؤدي إلى مستندات مطوّري برامج Google Chathttps://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 وحلّها.