修改Microsoft Qna Maker的Css

修改Microsoft Qna Maker的Css,css,azure,bots,botframework,qnamaker,Css,Azure,Bots,Botframework,Qnamaker,所以我已经建立了QnA maker并连接到了我们的Azure(我对Azure是全新的)。我需要从QNA maker更改Iframe的CSS,它当前是蓝色的(作为默认值)。我遵循本指南,使其成为我们公司的颜色: 我需要能够将这个(我已经分叉)克隆到当前的Azure构建中,我最终遇到了问题 我确信我忽略了Azure中的一些简单的东西,但我只需要克隆源代码来正确添加.css文件,就可以编辑bot了 目前,我试图抓住Iframe并以这种方式更改CSS,但没有骰子(当然)。我所需要做的就是将蓝色变为红色

所以我已经建立了QnA maker并连接到了我们的Azure(我对Azure是全新的)。我需要从QNA maker更改Iframe的CSS,它当前是蓝色的(作为默认值)。我遵循本指南,使其成为我们公司的颜色:

我需要能够将这个(我已经分叉)克隆到当前的Azure构建中,我最终遇到了问题

我确信我忽略了Azure中的一些简单的东西,但我只需要克隆源代码来正确添加.css文件,就可以编辑bot了


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

有关更多详细信息,请参阅github自述:

有以下几种选择:

  • 最简单:在任何网站上,IFRAME都是标准的网络聊天频道
  • 简单:在您的无反应网站中,在线运行网络聊天
  • Easyish:在任何网站中,IFRAME您的网络聊天实例
  • 中等:在React网站中,加入网络聊天React 组成部分
根据您的要求;在具有自定义样式的iframe中运行bot,您应该阅读EasySih部分:

您可以通过在一个数据库中运行Web聊天实例来隔离它 IFRAME。这涉及到创建两个网页:

  • 您的Web聊天实例,如上所示。(请参阅简易程序)
  • 主机页面,添加
  • 基于Easyish部分(步骤1),您需要首先完成Easy部分。在现有web应用中,添加具有以下代码的新页面(在Azure Bot设置上启用directline):

    
    BotChat.App({
    directLine:{secret:direct\u line\u secret},
    用户:{id:'userid'},
    bot:{id:'botid'},
    调整大小:“检测”
    },document.getElementById(“bot”);
    
    通过编辑botchat.css文件来定制您的聊天室样式。您可以从
    https://cdn.botframework.com/botframework-webchat/latest/botchat.css
    并根据您的喜好进行编辑,将您自己定制的botchat.css放到web应用程序中的某个位置,并更改标题中的href,而不是使用默认的href


    最后,对于Easyish第2步,您可以创建一个iframe(内容是Step1 web聊天页面)并将其嵌入到托管页面中

    你知道怎么用吗?不知道,但我会知道的!谢谢,我在我的一本指南上看到了这张截图。谢谢你的帮助!我遇到了一个问题。我有这个当前设置:
    BotChat.App({directLine:{.7tU.qia_C-Yuey23FG-wAJwQ7SBI},用户:{id:'userid'},bot:{id:'botid'},resize:'detect'},document.getElementById(“bot”)我是否缺少一些东西,需要查找用户id?每次我向它提问时,我都会收到一个“无法发送”的问题。是的,您需要将“userid”和“botid”更改为您自己的。您可以在Azure Portal>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>