בדף הזה מוסבר איך להוסיף טקסט ותמונות לכרטיס או להודעה בתיבת דו-שיח, ואיך לשנות את האופן שבו הטקסט והתמונות מופיעים בהודעה.
אתם יכולים להשתמש בכלי ליצירת כרטיסים כדי לעצב הודעות של כרטיסי JSON ולהציג אותן בתצוגה מקדימה בשביל אפליקציות ל-Chat:
לפתיחת הכלי ליצירת כרטיסיםדרישות מוקדמות
הוספת תמונה
הווידג'ט Image
מציג תמונת PNG או JPG שמתארחת בכתובת URL מסוג HTTPS.
רוחב התמונה המוצגת ממלא את כל הרוחב של הכרטיס המוצג, והגובה שלו מותאם באופן שישמור על יחס הגובה-רוחב של התמונה. הווידג'ט Image
תומך בפעולות של onclick
שמתרחשות כשמשתמשים לוחצים על התמונה. דוגמה לפעולות של onclick
:
- פותחים היפר-קישור באמצעות
OpenLink
, למשל היפר-קישור למסמכי התיעוד למפתחים של Google Chat,https://developers.google.com/chat
. - מריצים פעולה שמריצה פונקציה מותאמת אישית, כמו שליחת קריאה ל-API.
לווידג'ט Image
יש את המגבלות הבאות:
- המערכת תומכת רק בתמונות בפורמט PNG ו-JPG.
- כתובת ה-URL של המארח חייבת להיות
HTTPS
. - כדי להבטיח ביצועים טובים של הכרטיסים, גודל התמונה המקסימלי המומלץ הוא 2MB.
הכרטיס הבא מורכב מהווידג'ט Image
. מוצגת בו התמונה של דף הנחיתה של התיעוד למפתחים של Google Chat. כשהמשתמשים ילחצו על התמונה, מסמכי התיעוד למפתחים של Google Chat נפתחים בכרטיסייה חדשה.
הוספת רכיב תמונה
הווידג'ט Image
הוא תמונה עם עיצוב מוגבל. הווידג'ט של imageCompent
מאפשר להחיל את cropStyle
ואת borderStyle
על תמונה.
בדוגמה הבאה מוצגות שתי תמונות ברשת שבה אחת מהתמונות חתוכה:
חיתוך תמונה
אפשר לשנות את הצורה של תמונה באמצעות cropStyle
.
יש כמה צורות להחיל על תמונה:
- אפשר להשתמש ב-
SQUARE
כדי להחיל חיתוך ריבועי. - בעזרת
CIRCLE
אפשר לבצע חיתוך עגול. - משתמשים ב-
RECTANGLE_CUSTOM
כדי להחיל חיתוך מלבני עם יחס גובה-רוחב מותאם אישית. לדוגמה, אפשר להשתמש ב-RECTANGLE_4_3
כדי להחיל חיתוך מלבני עם יחס גובה-רוחב של 4:3.
בדוגמה הבאה מוצגות 5 תמונות ברשת עם ערך 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.