本頁說明如何在資訊卡或對話方塊訊息中加入文字和圖片，以及如何修改文字和圖片在訊息中的顯示方式。
您可以使用 Card Builder 設計及預覽即時通訊應用程式的 JSON 資訊卡訊息：
開啟卡片建構工具先備知識
加入圖片
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 元件組成：
下表列出適用於資訊卡訊息的內建圖示：
| 空中交易 | BOOKMARK | ||
| BUS | 購物車 | ||
| 錶面 | CONFIRMATION_NUMBER_ICON | ||
| DESCRIPTION | 捐款 | ||
| 電子郵件 | EVENT_SEAT | ||
| FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
| 飯店 | HOTEL_ROOM_TYPE | ||
| 邀請 | MAP_PIN | ||
| 會員 | MULTIPLE_PEOPLE | ||
| 個人 | 電話號碼 | ||
| RESTAURANT_ICON | SHOPPING_CART | ||
| 加上星號 | 商店 | ||
| 票券 | TRAIN | ||
| 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 應用程式或資訊卡傳回錯誤時，Chat 介面會顯示「發生錯誤」的訊息。或「無法處理你的要求」。Chat UI 有時不會顯示任何錯誤訊息，但 Chat 應用程式或資訊卡卻產生非預期的結果，例如資訊卡可能不會顯示。
雖然 Chat UI 可能不會顯示錯誤訊息，但可以在啟用 Chat 擴充應用程式的錯誤記錄功能時，查看描述性的錯誤訊息和記錄資料，協助您修正錯誤。如要瞭解如何查看、偵錯及修正錯誤，請參閱「疑難排解及修正 Google Chat 錯誤」。