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

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

本頁說明如何在資訊卡中加入文字和圖片，並設定格式。

如要進一步瞭解如何建構資訊卡，請參閱「建構 Google Chat 應用程式的資訊卡」。

使用資訊卡建構工具，設計及預覽 Chat 應用程式的訊息和使用者介面：

開啟資訊卡建立工具

必要條件

已啟用互動功能的 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 小工具代表內建圖示或自訂圖示。您可以為資訊卡新增圖示，以便執行下列任一操作：

顯示獨立圖示。
在相關文字前方顯示圖示，做為 DecoratedText 小工具的一部分。
將圖示顯示為互動式按鈕，做為 ButtonList 小工具的一部分。

以下是包含內建圖示的 Icon 元件資訊卡：

下表列出可用於資訊卡訊息的內建圖示：

	AIRPLANE		BOOKMARK
	BUS		CAR
	CLOCK		CONFIRMATION_NUMBER_ICON
	DESCRIPTION		DOLLAR
	EMAIL		EVENT_SEAT
	FLIGHT_ARRIVAL		FLIGHT_DEPARTURE
	HOTEL		HOTEL_ROOM_TYPE
	邀請		MAP_PIN
	會員		MULTIPLE_PEOPLE
	PERSON		電話號碼
	RESTAURANT_ICON		SHOPPING_CART
	STAR		商店
	TICKET		TRAIN
	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 應用程式或資訊卡傳回錯誤時，Chat 介面會顯示「發生錯誤」的訊息。或「無法處理您的要求」。有時 Chat UI 不會顯示任何錯誤訊息，但 Chat 應用程式或資訊卡會產生意外結果，例如資訊卡訊息可能不會顯示。

雖然 Chat UI 可能不會顯示錯誤訊息，但當您開啟 Chat 應用程式的錯誤記錄功能時，系統會提供說明性錯誤訊息和記錄資料，協助您修正錯誤。如需查看、偵錯及修正錯誤的相關說明，請參閱「排解及修正 Google Chat 錯誤」一文。