本頁說明如何在資訊卡或對話方塊訊息中加入文字和圖片,以及如何修改文字和圖片在訊息中的顯示方式。
您可以使用 Card Builder 設計及預覽即時通訊應用程式的 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 | 捐款 | ||
電子郵件 | 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 應用程式或資訊卡卻產生非預期的結果,例如資訊卡可能不會顯示。
雖然 Chat UI 可能不會顯示錯誤訊息,但可以在啟用 Chat 擴充應用程式的錯誤記錄功能時,查看描述性的錯誤訊息和記錄資料,協助您修正錯誤。如要瞭解如何查看、偵錯及修正錯誤,請參閱「疑難排解及修正 Google Chat 錯誤」。