Question

所以我有QnA制造商设置并连接到我们的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还是让本指南为我们工作。谢谢！

Answer 1

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

有选项：

最简单：在任何网站中，IFRAME都是标准的网络聊天频道
轻松：在您的非React网站中，以内联方式运行网络聊天
Easyish ：在任何网站中，IFRAME您的网络聊天实例
中：在您的React网站中，合并Web Chat React 成分

根据您的要求;在自定义样式的iframe中运行bot，您应该阅读 Easyish 部分：

您可以通过在其中运行来隔离您的Web Chat实例   IFRAME。这涉及创建两个网页：


您的网络聊天实例，如上所示。（参考 Easy ）

托管页面，添加了<iframe src="/path/to/your/webchat/instance" height="height" width="width" />

基于 Easyish 部分（步骤1），您需要先完成 Easy 部分。在现有的Web应用程序中，添加包含以下代码的新页面（在Azure Bot设置上启用directline）：

<!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文件，

CUSTOMIZE 您的聊天框样式。您从https://cdn.botframework.com/botframework-webchat/latest/botchat.css制作副本并根据自己的喜好进行编辑，并将自己定制的botchat.css放到网络应用中的某个位置，并更改标题中的href而不是使用默认值。

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

修改Microsoft Qna Maker的Css

1 个答案: