修改Css Microsoft Qna Maker

Question

所以我设置了 QnA maker 并将其连接到我们的 Azure（我是 Azure 的新手）。我需要更改 QNA maker 的 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 还是让本指南为我们工作。谢谢！

Answer 1

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

有选项：

最简单：在任何网站中，IFRAME 都是标准的网络聊天渠道
简单：在您的non-React网站中，运行在线聊天
Easyish：在任何网站中，IFRAME 您的网络聊天实例
中等：在您的 React 网站中，合并 Web Chat React 组件

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

You can isolate your instance of Web Chat by running it inside an IFRAME. This involves creating two web pages:

Your Web Chat instance, as shown above. (refer to Easy)

The hosting page, adding <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 放到您的网络应用程序中的某个位置，并更改 header 中的 href 而不是使用默认值。

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

修改Css Microsoft Qna Maker

Modify Css of Microsoft Qna Maker

css

azure

bots

botframework

qnamaker