Microsoft Copilot Studio - 自适应卡片

对于所有 Microsoft Copilot Studio 用户来说，工作变得更加轻松。如果您想为聊天机器人开发自定义输出，每当任何用户与其交互时，您只需要使用预构建的模板。您还可以使用图像构建自定义模板，以显示在聊天机器人响应的输出中。但这些模板是什么?这些被称为自适应卡片，它们是基于 JSON 的非常强大且自适应的卡片，可让您创建自定义 UI 元素。

在本教程中，我们将了解这些自适应卡片的工作原理以及如何将它们与您的 Copilots 集成以创建自定义动态响应。

为什么需要自适应卡片?

自适应卡片可帮助您为 Copilot 创建高度动态的用户友好型 UI 界面，包括按钮、表单字段、图像、文本等元素，让您的 Copilot 从第一次用户交互开始就看起来很棒。这些卡片只是 JSON 片段，可以适应任何 Microsoft 应用程序的 UI 界面。

例如，如果使用一些预构建的自适应卡片，它们会遵循 Microsoft Teams 的主题。另一方面，同一张卡片将适应任何其他 Microsoft 应用程序，如 Excel 或 PowerBI。

此外，您可以通过访问自适应卡片实时构建自定义卡片。您可以通过拖放方法开始粘贴徽标、任何图像或插入按钮、图标等元素。最后，您只需复制 JSON 代码并将其粘贴到您的 Copilot 环境中即可。

使用自适应卡片的先决条件

在开始之前，请确保您具有以下 −

访问 Copilot Studio。
对 JSON 格式有基本的了解。
熟悉 Copilot Studio 的主题和触发短语。
可选的自适应卡片设计器帐户，以便更快地进行原型设计。

自适应卡片的分步指南

步骤 1:设计自适应卡片

在这里，您不需要编写整个 JSON 代码来开发自适应卡片。以下是创建第一张自适应卡片的方法 −

选择模板或从头开始

访问自适应卡片设计器。
您可以从预建模板(如表单或公告)中进行选择，也可以通过选择"新卡片"从头开始。

将组件添加到您的卡片

文本 −拖动"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

2.创建新主题

单击"新主题"以创建短语。
为主题指定一个清晰且描述性的名称，例如"用户调查"。

3. 定义触发短语

触发短语可激活主题。例如，对于反馈表单，您可以使用类似的短语 −

"提供反馈"
"提供调查"
"我已评论"

添加几个触发短语，以确保您的聊天机器人可以识别用户可能请求此操作的各种方式。

步骤 3:在 Copilot Studio 中集成自适应卡

1. 添加自适应卡

在主题编辑器中，找到"添加自适应卡"选项。您将看到一个可以粘贴 JSON 的空间。

2.粘贴 JSON

粘贴从自适应卡片设计器复制的 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 构建器的版本匹配。如果没有，那么您可以更改自适应卡片网站内的目标版本以匹配 Bot Framework WebChat。

简单是关键 −虽然自适应卡片功能丰富，但要避免输入过多或设计复杂而让用户不知所措。

移动优化 − 在桌面和移动平台上测试卡片以确保响应能力。

验证 JSON − 始终验证 JSON 以避免集成过程中出现错误。使用 JSON 验证器。

按照这些简单的步骤，您可以轻松地为聊天机器人开发自定义卡片响应，使用户界面更加先进和互动。这完全取决于您的创造力以及您想要如何设计您的机器人框架。

Microsoft Copilot Studio 教程

有用的资源