本頁說明如何在資訊卡或對話方塊訊息中加入文字和圖片。 修改訊息中的文字和圖片的顯示方式。
您可以使用 Card Builder 設計及預覽即時通訊應用程式的 JSON 資訊卡訊息:
開啟資訊卡建立工具必要條件
已啟用互動功能的 Google Chat 應用程式。如要建立 互動式 Chat 應用程式,請完成下列其中一個快速入門導覽課程 在要使用的應用程式架構中:
- 含有 Google Cloud Functions 的 HTTP 服務
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
新增圖片
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
元件組成:
下表列出適用於資訊卡訊息的內建圖示:
空中交易 | 書店 | ||
獎勵 | 購物車 | ||
錶面 | CONFIRMATION_NUMBER_ICON | ||
DESCRIPTION | 捐款 | ||
電子郵件 | EVENT_SEAT | ||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
飯店 | HOTEL_ROOM_TYPE | ||
INVITE | MAP_PIN | ||
會員 | MULTIPLE_PEOPLE | ||
個人 | 電話號碼 | ||
RESTAURANT_ICON | SHOPPING_CART | ||
加上星號 | 商店 | ||
票券 | 訓練 | ||
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 應用程式或 card 會傳回錯誤, 即時通訊介面顯示「發生錯誤」的訊息。 或「無法處理你的要求」。有時使用 Chat UI 不會顯示任何錯誤訊息,但 Chat 應用程式或 資訊卡產生非預期的結果例如資訊卡訊息 顯示。
雖然 Chat UI 中可能不會顯示錯誤訊息, 提供描述性錯誤訊息和記錄資料,協助您修正錯誤 。如需觀看說明, 偵錯及修正錯誤,請參閱 疑難排解並修正 Google Chat 錯誤。