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

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

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

使用資訊卡建構工具設計及預覽資訊卡。

開啟資訊卡建構工具

資訊卡和對話方塊通常包含下列元件：

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

必要條件

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

    • 新增標頭

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

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

    以下為 CardHeader 的範例：

    定義資訊卡區段

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

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

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

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

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

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

    疑難排解

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

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