1

所以我设置了 QnA maker 并将其连接到我们的 Azure（我对 Azure 完全陌生）。我需要从 QNA 制造商更改 Iframe 的 CSS，它目前是蓝色的（作为默认值）。我正在按照本指南使其成为我们公司的颜色：

https://blog.botframework.com/2017/10/11/customize-web-chat-websites/

我需要能够克隆这个：https ://github.com/Microsoft/BotFramework-WebChat/tree/master/src （我已经分叉）到当前的 Azure 构建中，我最终遇到了问题。

我确信我在 Azure 中忽略了一些简单的东西，但我只需要克隆源代码以正确添加我需要能够编辑机器人的 .css 文件。

目前，我试图抓住 Iframe 并以这种方式更改 CSS，但没有骰子（当然）。我需要做的就是将蓝色更改为红色，任何这样做都会有所帮助，无论是在加载后更改 iframe 还是让本指南为我们工作。谢谢！

4

1 回答 1

3

更多详细信息请参阅 github 自述文件：https ://github.com/Microsoft/BotFramework-WebChat

有以下选项：

  • 最简单：在任何网站中，IFRAME 都是标准的网络聊天频道
  • 简单：在您的非 React 网站中，内联运行网络聊天
  • Easyish：在任何网站中，IFRAME 您的网络聊天实例
  • 中：在您的 React 网站中，合并 Web Chat React 组件

根据您的要求；在具有自定义样式的 iframe 中运行机器人，您应该阅读Easyish部分：

您可以通过在 IFRAME 中运行它来隔离您的网络聊天实例。这涉及创建两个网页：

  1. 您的网络聊天实例，如上图所示。（参考简单）
  2. 托管页面，添加<iframe src="/path/to/your/webchat/instance" height="height" width="width" />

根据Easyish部分（步骤 1），您需要先完成Easy部分。在现有的 Web 应用程序中，使用以下代码添加一个新页面（在 Azure Bot 设置上启用直连）：

<!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>

通过编辑botchat.css文件自定义您的聊天框样式。您可以根据自己的喜好制作副本https://cdn.botframework.com/botframework-webchat/latest/botchat.css并进行编辑，然后将自己自定义的 botchat.css 放到 Web 应用程序的某个位置，并更改标头中的 href 而不是使用默认值。

最后，对于Easyish部分的第 2 步，您可以创建一个 iframe（内容是第 1 步的网络聊天页面）并将其嵌入到您的托管页面中。

于 2018-01-29T03:28:02.110 回答