בדף זה נסביר איך להוסיף טקסט ותמונות לכרטיס או להודעת דו-שיח, ואיך לשנות את האופן שבו הטקסט והתמונות מופיעים בהודעה.
עצב כרטיסים והצג תצוגה מקדימה שלהם באמצעות הכלי ליצירת כרטיסים.
לפתיחת הכלי ליצירת כרטיסיםדרישות מוקדמות
הוספת תמונה
בווידג'ט 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.