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

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

如要進一步瞭解如何建構資訊卡，請參閱「為 Google 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 書籤
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 商店
TICKET 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 使用者介面未顯示錯誤訊息，只要開啟 Chat 應用程式的錯誤記錄功能，系統就會提供說明性錯誤訊息和記錄資料，協助您修正錯誤。如需查看、偵錯及修正錯誤的相關協助，請參閱「排解及修正 Google Chat 錯誤」。