בדף זה נסביר איך להוסיף טקסט ותמונות לכרטיס או להודעת דו-שיח, ואיך לשנות את האופן שבו הטקסט והתמונות מופיעים בהודעה.
אפשר להשתמש בכלי ליצירת כרטיסים כדי לעצב הודעות של כרטיס 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.
בדוגמה הבאה מוצגות חמש תמונות ברשת עם 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
מעובד כפסקה חדשה, ואפשר להתייחס אליו כאל תג <p>
של HTML.
לפניכם כרטיס שמורכב משני ווידג'טים של TextParagraph
המשמשים להצגת שתי פסקאות עם עיצוב HTML פשוט:
הצגת טקסט עם אלמנטים דקורטיביים
בווידג'ט DecoratedText
מוצג טקסט עם אפשרויות לפריסה וליכולות. למשל:
- הצגה של
icon
לפני הטקסט עםstartIcon
. - הצגת כותרת לפני הטקסט עם
topLabel
. - מוסיפים לחצן קליקבילי באמצעות
button
או לחצן החלפת מצב שאפשר להחליף באמצעותswitchControl
.
כדאי להשתמש בווידג'ט DecoratedText
כשרוצים להציג מידע בצורה אינטראקטיבית וקלה לצריכה. הווידג'ט הזה אידיאלי לשימוש בתרחישים לדוגמה, כמו כרטיסי אנשי קשר, עדכונים על סטטוס הזמנות והתראות על כרטיסי עבודה.
הווידג'ט DecoratedText
תומך בפורמט טקסט HTML פשוט. כשמגדירים את תוכן הטקסט בווידג'טים האלה, צריך רק לכלול את תגי ה-HTML המתאימים. למידע נוסף על תגי HTML הנתמכים, קראו את המאמר עיצוב הטקסט בכרטיס.
לפניכם כרטיס שמכיל ווידג'ט DecoratedText
שמשמש להצגת פרטים ליצירת קשר, כמו כתובת אימייל, סטטוס אונליין, מספר טלפון ואתר:
פתרון בעיות
כשמוצגת הודעת שגיאה באפליקציה או בכרטיס של Google Chat, מוצגת בממשק של Chat ההודעה 'משהו השתבש'. או "לא ניתן לעבד את הבקשה". לפעמים לא מוצגות הודעות שגיאה בממשק המשתמש של Chat, אבל קיבלתי תוצאה לא צפויה באפליקציה או בכרטיס של Chat. למשל, יכול להיות שלא תופיע הודעה.
יכול להיות שהודעת השגיאה לא תוצג בממשק המשתמש של Chat, אבל יש הודעות שגיאה תיאוריות ונתוני יומן שיכולים לעזור לך לתקן שגיאות כשמפעילים רישום שגיאות באפליקציות של Chat. במאמר פתרון בעיות ותיקון שגיאות ב-Google Chat אפשר לקבל עזרה בהצגה, בניפוי באגים ובתיקון שגיאות.