本頁面由 Cloud Translation API 翻譯而成。

在資訊卡或對話方塊中新增文字和圖片

本頁說明如何在資訊卡或對話方塊訊息中加入文字和圖片。修改訊息中的文字和圖片的顯示方式。

您可以使用 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小工具可讓您將 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
	STAR		商店
	票券		訓練
	VIDEO_CAMERA		VIDEO_PLAY

新增一段格式化文字

TextParagraph小工具會顯示一段選用 HTML 格式的文字。設定時加入這些小工具的文字內容，只需加入對應的 HTML 標記即可。如要進一步瞭解支援的 HTML 標記，請參閱資訊卡文字格式設定。

舉例來說，下列格式設定可用於段落文字：

使用 HTML 、、 顯示粗體、底線或斜體文字標記內。
使用 HTML <a href="https://www.google.com">hyperlinks</a> 連結至網站。
使用 HTML font tags 增添色彩。

每項 TextParagraph 小工具都會算繪為新段落，您可以將類似 HTML  標記

以下為包含兩個 TextParagraph 小工具的資訊卡，用於顯示兩個簡單的 HTML 格式段落：

顯示包含裝飾元素的文字

DecoratedText小工具會顯示含有選用版面配置和功能的文字例如：

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

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

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

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

疑難排解

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

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