在資訊卡中新增文字和圖片

本頁說明如何在資訊卡中新增文字和圖片及設定格式。

如要進一步瞭解如何建構資訊卡,請參閱 為 Google Chat 應用程式建立資訊卡


您可以使用 Card Builder 設計及預覽即時通訊應用程式的 JSON 資訊卡訊息:

開啟資訊卡建立工具

必要條件

已啟用互動功能的 Google Chat 應用程式。如要建立 互動式 Chat 應用程式,請完成下列其中一個快速入門導覽課程 在要使用的應用程式架構中:

新增圖片或圖示

本節說明如何在資訊卡中新增視覺元素,例如圖片、 圖片元件和圖示

新增圖片

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小工具 可讓您將 cropStyleborderStyle 套用至圖片。

以下範例顯示格線中有兩張圖片,其中一張是 未完整入鏡:

你可以套用 cropStyle。 以下是套用至圖片的幾種形狀:

  • 使用 SQUARE 即可套用正方形裁剪。
  • 使用 CIRCLE 套用圓形裁剪。
  • 使用 RECTANGLE_CUSTOM 套用包含自訂切面的矩形裁剪 比例。舉例來說,您可以使用 RECTANGLE_4_3 套用矩形裁剪 顯示比例 4:3

以下範例顯示以不同 cropStyle 格狀檢視方式的五張圖片 已套用至每張圖片:

新增圖示

Icon小工具 代表 內建 圖示或 自訂 圖示。您可以在資訊卡中新增圖示,以便執行下列任一操作:

  • 顯示獨立圖示。
  • 在相關文字前方顯示圖示, DecoratedText 小工具。
  • 以互動按鈕的形式顯示圖示, ButtonList 小工具。

以下資訊卡由包含內建圖示的 Icon 元件組成:

下表列出適用於資訊卡訊息的內建圖示:

空中交易 書店
獎勵 購物車
錶面 CONFIRMATION_NUMBER_ICON
DESCRIPTION 捐款
電子郵件 EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
飯店 HOTEL_ROOM_TYPE
邀請 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小工具 會顯示含有選用版面配置和功能的文字例如:

  • 在文字前方使用 startIcon 顯示 icon
  • 使用 topLabel 在文字前顯示標題。
  • 新增含有 button 的可點擊按鈕,或使用 switchControl 的可切換切換鈕。

如果您需要在DecoratedText 易於使用且具互動性的功能。這個小工具非常適合各種用途,例如 聯絡人卡片、訂單狀態更新和工作票券通知。

DecoratedText 小工具支援簡單的文字 HTML 格式。設定時 加入這些小工具的文字內容,只需加入對應的 HTML 標記即可。適用對象 如要進一步瞭解支援的 HTML 代碼,請參閱 資訊卡文字格式設定

下方是包含用於顯示 DecoratedText 小工具的資訊卡 聯絡資料,例如電子郵件地址、線上狀態、電話號碼和 網站:

疑難排解

Google Chat 應用程式或 card 會傳回錯誤, 即時通訊介面顯示「發生錯誤」的訊息。 或「無法處理你的要求」。有時使用 Chat UI 不會顯示任何錯誤訊息,但 Chat 應用程式或 資訊卡產生非預期的結果例如資訊卡訊息 顯示。

雖然 Chat UI 中可能不會顯示錯誤訊息, 提供描述性錯誤訊息和記錄資料,協助您修正錯誤 。如需觀看說明, 偵錯及修正錯誤,請參閱 疑難排解並修正 Google Chat 錯誤