Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

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

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

如要進一步瞭解如何建構資訊卡，請參閱「建構 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 小工具是樣式有限的圖片。ImageComponent 小工具可讓您將 cropStyle 和 borderStyle 套用至圖片。

以下範例顯示格線中的兩張圖片，其中一張圖片經過裁剪：

您可以套用 cropStyle 來調整圖片元件的形狀。你可以將多種形狀套用至圖片：

使用 SQUARE 套用正方形裁剪。
使用 CIRCLE 套用圓形裁剪。
使用 RECTANGLE_CUSTOM，以自訂顯示比例裁剪矩形。舉例來說，您可以使用 RECTANGLE_4_3 套用顯示比例為 4:3 的矩形裁剪。

以下範例顯示格狀檢視中的五張圖片，每張圖片都套用不同的 cropStyle：

新增圖示

Icon 小工具代表內建圖示或自訂圖示。您可以在資訊卡中加入圖示，執行下列任一操作：

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

以下資訊卡包含 Icon 元件，並內建圖示：

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

	AIRPLANE		BOOKMARK
	BUS		CAR
	時鐘		CONFIRMATION_NUMBER_ICON
	DESCRIPTION		DOLLAR
	電子郵件		EVENT_SEAT
	FLIGHT_ARRIVAL		FLIGHT_DEPARTURE
	HOTEL		HOTEL_ROOM_TYPE
	邀請		MAP_PIN
	會員		MULTIPLE_PEOPLE
	PERSON		手機
	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 應用程式或資訊卡傳回錯誤時，Chat 介面會顯示「發生錯誤」訊息。或「無法處理你的要求。」有時 Chat UI 不會顯示任何錯誤訊息，但 Chat 擴充應用程式或資訊卡會產生非預期的結果，例如可能不會顯示資訊卡訊息。

雖然 Chat UI 可能不會顯示錯誤訊息，但只要開啟 Chat 擴充應用程式的錯誤記錄功能，就能查看描述性錯誤訊息和記錄資料，協助您修正錯誤。如需查看、偵錯及修正錯誤的相關協助，請參閱「排解及修正 Google Chat 錯誤」。

在資訊卡中新增文字和圖片 透過集合功能整理內容 你可以依據偏好儲存及分類內容。