הוספה של טקסט ותמונות לכרטיס או לתיבת דו-שיח

בדף הזה מוסבר איך להוסיף טקסט ותמונות להודעה בכרטיס או בתיבת דו-שיח. כדי לשנות את האופן שבו הטקסט והתמונות מופיעים בהודעה.

אתם יכולים להשתמש בכלי ליצירת כרטיסים כדי לעצב הודעות של כרטיסי JSON ולהציג אותן בתצוגה מקדימה בשביל אפליקציות ל-Chat:

לפתיחת הכלי ליצירת כרטיסים

דרישות מוקדמות

  • חשבון Google Workspace עם גישה אל Google Chat.
  • אפליקציית Chat שפורסמה. כדי ליצור אפליקציית 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 עם סמל מובנה:

    בטבלה הבאה מפורטים הסמלים המובנים הזמינים להודעות לגבי כרטיסים:

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

    יכול להיות שלא תופיע הודעת שגיאה בממשק המשתמש של Chat, אבל יש הודעות שגיאה תיאוריות ונתוני יומן זמינים כדי לעזור לכם לתקן שגיאות כשמופעלת רישום שגיאות ביומן של אפליקציות ל-Chat. כדי לקבל עזרה בצפייה, לניפוי באגים ולתיקון שגיאות: פתרון בעיות ותיקון שגיאות ב-Google Chat