本頁說明如何在資訊卡或對話方塊訊息中新增文字和圖片,以及如何修改文字與圖片在訊息中的顯示方式。
使用資訊卡建構工具設計及預覽 Chat 應用程式的 JSON 資訊卡訊息:
開啟資訊卡建構工具必要條件
加入圖片
Image
小工具會顯示託管於 HTTPS 網址的 PNG 或 JPG 圖片。顯示的圖片寬度會填滿顯示資訊卡的整個寬度,並配合圖片的顯示比例調整高度。Image
小工具支援使用者點選圖片時發生的 onclick
動作。以下 onclick
動作範例:
- 使用
OpenLink
開啟超連結,例如 Google Chat 開發人員說明文件https://developers.google.com/chat
的超連結。 - 執行執行自訂函式的動作,例如呼叫 API。
Image
小工具有下列限制:
- 僅支援 PNG 和 JPG 圖片。
- 主機網址必須是
HTTPS
。 - 為確保資訊卡成效良好,建議圖片大小不得超過 2 MB。
以下是包含 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 | ||
DESCRIPTION | DOLL | ||
電子郵件 | 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
小工具會顯示包含選用版面配置和功能的文字。例如:
- 使用
startIcon
在文字前方顯示icon
。 - 使用
topLabel
在文字前方顯示標題。 - 新增含有
button
的可點擊按鈕,或含有switchControl
的可切換切換鈕。
如果您需要以簡單易用且互動的方式呈現資訊,請使用 DecoratedText
小工具。這個小工具非常適合用於聯絡人卡片、訂單狀態更新和工作票券通知等用途。
DecoratedText
小工具支援簡單的 HTML 格式。設定這些小工具的文字內容時,只要加入對應的 HTML 標記即可。如要進一步瞭解支援的 HTML 標記,請參閱「資訊卡文字格式設定」。
下列卡片包含 DecoratedText
小工具,用於顯示電子郵件地址、線上狀態、電話號碼和網站等聯絡詳細資料:
疑難排解
當 Google Chat 應用程式或資訊卡傳回錯誤時,Chat 介面會顯示「發生錯誤」的訊息。或「無法處理你的請求」有時 Chat UI 不會顯示任何錯誤訊息,但即時通訊應用程式或資訊卡產生非預期的結果,例如資訊卡訊息可能不會顯示。
雖然 Chat UI 可能不會顯示錯誤訊息,但我們提供描述性的錯誤訊息和記錄資料,協助您修正啟用 Chat 應用程式錯誤記錄功能時發生的錯誤。如要瞭解如何查看、偵錯及修正錯誤,請參閱「疑難排解及修正 Google Chat 錯誤」。