代码之家 › 专栏 › 技术社区 › DiagonalCorgi

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

qnamaker minimize azure

1

DiagonalCorgi · 技术社区 · 8 年前

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

是否有任何方法可以访问代码,以便最小化聊天机器人或添加按钮?

我将展示一张照片,让事情更清楚: minimizing image

1 回复 | 直到 8 年前

1

2

Nicolas R 8 年前

您使用的webchat界面来自Microsoft GitHub的名为 BotFramework-WebChat 可获得的 here .

如果您查看GitHub主页上提供的文档,您会发现您有几种在网站上实现webchat的方法,从最简单的 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中的标头自定义为:

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

然后用CSS制作按钮的图像