本頁說明如何在資訊卡或對話方塊訊息中新增文字和圖片，以及如何修改文字與圖片在訊息中的顯示方式。
使用資訊卡建構工具設計及預覽資訊卡。
開啟資訊卡建構工具必要條件
加入圖片
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 | DOLL | ||
| 電子郵件 | 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 UI 可能不會顯示錯誤訊息，但我們提供描述性的錯誤訊息和記錄資料，協助您修正啟用 Chat 應用程式錯誤記錄功能時發生的錯誤。如要瞭解如何查看、偵錯及修正錯誤，請參閱「疑難排解及修正 Google Chat 錯誤」。