将 Azure QnA 聊天机器人最小化到网站

Question

我最近做了一个聊天机器人，我想通过添加一个最小化按钮和一个锚点来进一步编辑界面的组件，以便聊天机器人静态地固定在页面的右下角（这是最公共区域）。这是用 Azure QnA 框架制作的，所以我不确定我能真正编辑多少..

有什么方法可以访问代码，以便最小化聊天机器人或添加按钮？

我会展示一张照片让事情更清楚：minimizing image

Answer 1

您正在使用的网络聊天界面来自 Microsoft GitHub 名为 BotFramework-WebChat 的项目可用 here。

如果您查看 GitHub 主页上提供的文档，您会发现有多种方法可以在您的网站上实现网络聊天，从最简单的 iframe 包含到更多详细解决方案。

如果您想自定义您的界面，我建议在您的托管页面代码中采用如下实施方式：

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
  </head>
  <body>
    <div id="bot"/>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
    <script>
      BotChat.App({
        directLine: { secret: direct_line_secret },
        user: { id: 'userid' },
        bot: { id: 'botid' },
        resize: 'detect'
      }, document.getElementById("bot"));
    </script>
  </body>
</html>

您在这里声明聊天并使用来自 CDN 的 js 和 css 文件。

webchat 组件的所有代码都在 js 中，因此您应该获取它，进行自定义并将其托管在您身边以获得您想要的东西。

它从 CDN 缩小，但您可以使用此处描述的过程重建文件：https://github.com/Microsoft/BotFramework-WebChat#building-web-chat

例如，我们从这些来源制作的界面：

本例我们将js中的header自定义为：

添加 1 个最大化按钮
添加 1 个关闭按钮

然后按钮的图像用CSS

制作

将 Azure QnA 聊天机器人最小化到网站

Minimizing Azure QnA Chat bot to Website

minimize

azure

qnamaker