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

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

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

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

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

تطبيق Google 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 وحلّها.