توضّح هذه الصفحة كيفية إضافة نص وصور إلى بطاقة أو رسالة مربّع حوار. لتعديل كيفية ظهور النص والصور داخل الرسالة.
يمكنك استخدام "أداة إنشاء البطاقات" لتصميم رسائل بطاقات JSON ومعاينتها لتطبيقات Chat:
فتح "أداة إنشاء البطاقات"المتطلبات الأساسية
تطبيق Google Chat مفعَّل للميزات التفاعلية لإنشاء تطبيق دردشة تفاعلي، أكمل إحدى مبادرات البدء السريعة التالية المستندة إلى في بنية التطبيق التي تريد استخدامها:
- خدمة HTTP مع دوال Google Cloud
- برمجة تطبيقات Google
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
إضافة صورة
تشير رسالة الأشكال البيانية
تطبيق "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
" مع رمز مضمَّن:
يعرض الجدول التالي الرموز المضمّنة المتاحة لرسائل البطاقات:
طائرة | الإشارة المرجعية | ||
حافلة | سيارة | ||
الساعة | 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 وحلّها.