Question

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

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

我会展示照片以使事情更清晰：minimizing image

Answer 1

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

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

如果您想自定义界面，我建议您在托管页面代码中执行以下类似的实现：

<!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中的标头自定义为：

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

然后按钮的图像用CSS

制作

将Azure QnA Chat bot最小化到网站

1 个答案: