設計資訊卡或對話方塊的元件

本頁面說明如何在 Google Chat 中設計及建立卡片訊息的主要 UI 元件。

資訊卡支援已定義的版面配置、互動式 UI 元素 (例如按鈕)，以及類似圖片的互動式多媒體。您可以使用資訊卡來呈現資訊、收集輸入內容，或透過資訊卡訊息和對話方塊向使用者提供後續步驟。

您可以使用 Card Builder 設計及預覽即時通訊應用程式的 JSON 資訊卡訊息：

開啟卡片建構工具

資訊卡和對話方塊通常具有以下元件：

  • 包含卡片標題的 CardHeader。
  • 一或多個構成資訊卡主體的 CardSection 小工具。
  • 僅適用於對話方塊專用的 CardFixedFooter 小工具。

先備知識

  • 可存取 Google Chat 的 Google Workspace 帳戶。
  • 已發布的 Chat 應用程式。如要建構 Chat 應用程式，請按照這個quickstart操作。

    • 新增標頭

    CardHeader 小工具代表資訊卡的標題。標頭可包含資訊卡的標題、副標題和顯示圖片。

    您可以在資訊卡訊息和對話方塊中加入 CardHeader。

    以下是 CardHeader 的範例：

    定義資訊卡的部分內容

    CardSection 小工具是資訊卡中的高階容器。您可以使用資訊卡區塊，將資訊卡內的小工具分組。您可以為每個資訊卡區段 加入標頭和一或多個小工具

    您可以在資訊卡訊息和對話方塊中加入 CardSection。

    以下範例中的 CardSection 包含兩個 textParagraph 小工具：

    CardFixedFooter 小工具代表 Chat 應用程式傳送的對話方塊訊息頁尾。頁尾可以包含主要按鈕和次要按鈕。

    CardFixedFooter 小工具僅適用於對話方塊。

    以下是含有兩個按鈕的 CardFixedFooter 小工具範例：

    疑難排解

    當 Google Chat 應用程式或資訊卡傳回錯誤時，Chat 介面會顯示「發生錯誤」的訊息。或「無法處理你的要求」。Chat UI 有時不會顯示任何錯誤訊息，但 Chat 應用程式或資訊卡卻產生非預期的結果，例如資訊卡可能不會顯示。

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