1

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

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

我将展示一张照片以使事情更清楚：最小化图像

4

1 回答 1

2

您正在使用的网络聊天界面来自 Microsoft GitHub 的名为BotFramework-WebChatavailable 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 文件。

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

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

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

网络聊天示例

对于这个例子，我们将 js 中的 header 自定义为：

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

然后按钮的图像是用 CSS 制作的

于 2017-12-18T12:06:35.390 回答