Microsoft Copilot Studio - 自適應卡片

---

---

對於所有 Microsoft Copilot Studio 使用者來說，工作變得更加輕鬆了。如果你想為聊天機器人開發自定義輸出，無論何時任何使用者與之互動，你只需要使用預構建的模板即可。你還可以構建包含影像的自定義模板，以顯示在聊天機器人響應的輸出中。但這些模板是什麼？它們被稱為自適應卡片，它們是功能強大且自適應的基於 JSON 的卡片，允許你建立自定義 UI 元素。

在本教程中，我們將瞭解這些自適應卡片的工作原理以及如何將它們與你的 Copilots 整合以建立自定義動態響應。

為什麼需要自適應卡片？

自適應卡片可以幫助你為你的 Copilot 建立高度動態且使用者友好的 UI 介面，包括按鈕、表單欄位、影像、文字等元素，使你的 Copilot 從第一次使用者互動開始就看起來很棒。這些卡片只不過是 JSON 程式碼片段，可以適應任何 Microsoft 應用程式的 UI 介面。

例如，一些預構建的自適應卡片遵循 Microsoft Teams 的主題，如果它們用於 Teams 的話。另一方面，同一張卡片將自動適應其他任何 Microsoft 應用程式，如 Excel 或 PowerBI。

此外，你可以透過訪問 Adaptive Cards 即時構建自定義卡片。你可以開始貼上你的徽標、任何影像或透過拖放方法插入按鈕、圖示等元素。最後，你只需要複製 JSON 程式碼並將其貼上到你的 Copilot 環境中。

使用自適應卡片的先決條件

在開始之前，請確保你具備以下條件：

• 訪問 Copilot Studio。
• 瞭解 JSON 格式的基本知識。
• 熟悉 Copilot Studio 的主題和觸發短語。
• 可選：擁有 Adaptive Cards Designer 賬戶，以便更快地進行原型設計。

自適應卡片適配的分步指南

步驟 1：設計自適應卡片

在這裡，你不需要為開發自適應卡片編寫完整的 JSON 程式碼。以下是如何建立你的第一個自適應卡片：

選擇模板或從頭開始

• 訪問 Adaptive Cards Designer。
• 你可以從預構建的模板（如表單或公告）中選擇，或者透過選擇“新建卡片”從頭開始。

向你的卡片新增元件

• 文字 - 拖動“TextBlock”元件以新增文字。
• 影像 - 你可以使用“Image”元件顯示影像或直接將複製的影像貼上到卡片上。之後，你還可以設定 URL 屬性以指向影像源，例如 https://example.com/image.png。
• 輸入欄位 - 新增使用者輸入選項，如文字框 (Input.Text)、日期選擇器 (Input.Date) 或多選選項 (Input.ChoiceSet)。

例如，要建立一個簡單的反饋表單，你可以新增一個用於說明的 TextBlock，然後新增一個用於使用者反饋的 Input.Text。

預覽你的設計

元件就位後，“設計器”的“預覽面板”將顯示自適應卡片在聊天機器人中呈現時的外觀。此即時預覽有助於調整佈局和內容。

複製 JSON

滿意後，點選“複製 JSON”按鈕。此 JSON 結構定義了卡片，可直接在 Microsoft Copilot Studio 中使用。

步驟 2：在 Microsoft Copilot Studio 中建立主題

準備好自適應卡片 JSON 後，下一步是將其整合到 Copilot Studio 中。

1. 開啟 Copilot Studio

登入 Copilot Studio 並導航到“主題”部分，你將在其中建立或修改表示對話流的主題。

2. 建立新主題

• 點選“新建主題”以建立短語。
• 為你的主題提供一個清晰且描述性的名稱，例如“使用者調查”。

3. 定義觸發短語

觸發短語啟用主題。例如，對於反饋表單，你可以使用以下短語：

• "提供反饋"
• "提供調查"
• "我已評論"

新增多個觸發短語以確保你的聊天機器人可以識別使用者請求此操作的各種方式。

步驟 3：在 Copilot Studio 中整合自適應卡片

1. 新增自適應卡片

在主題編輯器中，找到“新增自適應卡片”選項。你將看到一個可以貼上 JSON 的空間。

2. 貼上 JSON

貼上從 Adaptive Cards Designer 複製的 JSON。確保語法正確 - 不匹配的括號或缺少逗號會導致問題。格式良好的 JSON 如下所示：

{
   "type": "AdaptiveCard",
   "body": [
      {
         "type": "TextBlock",
         "text": "Please provide your feedback:"
      },
      {
         "type": "Input.Text",
         "id": "feedbackText",
         "placeholder": "Type your feedback here"
      },
      {
         "type": "Action.Submit",
         "title": "Submit"
      }
   ],
   "version": "1.3"
}

3. 測試卡片

在繼續之前，點選“測試”按鈕以模擬當用戶觸發此主題時聊天機器人的響應。這是一個確認卡片是否正確呈現以及輸入是否按預期工作的好時機。

步驟 4：自定義自適應卡片以進行使用者互動

自適應卡片不是靜態的。你可以使用輸入欄位和基於使用者互動的動態響應來豐富其功能。

1. 新增輸入欄位

修改 JSON 以包含文字、選擇或日期的輸入欄位。以下是在反饋表單中使用 ChoiceSet 的示例：

{
   "type": "Input.ChoiceSet",
   "id": "feedbackType",
   "value": "1",
   "choices": [
      {
         "title": "Bug Report",
         "value": "1"
      },
      {
         "title": "Feature Request",
         "value": "2"
      }
   ]
}

這允許使用者在不同的反饋型別之間進行選擇，例如錯誤報告或功能請求。

2. 新增操作按鈕

你可以向自適應卡片新增操作按鈕，這些按鈕在點選時會觸發事件，例如提交表單或開啟外部連結：

{
   "type": "Action.OpenUrl",
   "title": "Learn More",
   "url": "https://example.com"
}
For form submission, use: {
   "type": "Action.Submit",
   "title": "Submit"
}

3. 整合變數

如果你想使卡片動態化，可以將 Copilot Studio 中的變數插入到你的自適應卡片中。例如，你可以用使用者的姓名來向他們打招呼：

{
   "type": "TextBlock",
   "text": "Hello, ${username}!"
}

步驟 5：處理來自自適應卡片的響應

使用者與自適應卡片互動後，你希望以有意義的方式處理他們的輸入。

1. 操作處理程式

使用者提交表單或進行選擇後，你可以配置 Microsoft Copilot Studio 以相應地做出反應：

• 將他們重定向到確認訊息。
• 觸發另一個主題。
• 將輸入傳送到 API 端點以進行處理。

例如，在反饋表單提交後，你可能會將使用者重定向到感謝訊息：

{
   "type": "TextBlock",
   "text": "Thank you for your feedback!"
}

步驟 6：測試和釋出自適應卡片

1. 預覽整個流程

Microsoft Copilot Studio 提供了一種預覽模式，允許你模擬整個使用者互動。徹底測試流程以確保卡片呈現、輸入處理以及響應正確。

2. 釋出你的機器人

對設計和功能感到滿意後，點選“釋出”按鈕使你的聊天機器人上線。你的自適應卡片現已整合並準備與真實使用者互動！

自適應卡片的高階功能

自適應卡片提供了一系列高階功能，使你的聊天機器人更具互動性：

條件元素 - 你可以根據使用者操作隱藏或顯示元件，例如僅在使用者選擇特定選項時顯示其他選項。

可操作卡片 - 除了提交表單外，自適應卡片還可以觸發工作流、連線外部服務等等。

有關條件元素的更多資訊，請檢視官方文件。

設計自適應卡片的最佳實踐

版本 - 確保你的 Copilot 上的版本與你的 JSON 構建器的版本匹配。如果不是，則可以在 Adaptive Cards 網站中更改目標版本以匹配 Bot Framework WebChat。

簡潔至上 - 雖然自適應卡片功能豐富，但避免使用過多的輸入或複雜的設計來淹沒使用者。

移動裝置最佳化 - 在臺式機和移動裝置平臺上測試卡片，以確保其響應能力。

驗證 JSON - 始終驗證你的 JSON 以避免在整合期間出現錯誤。使用 JSON 驗證器。

按照這些簡單的步驟，你可以輕鬆地為你的聊天機器人開發自定義卡片響應，使使用者介面更高階和互動。這一切都取決於你的創造力以及你希望如何設計你的機器人框架。