Question

您好我使用网络聊天嵌入了QnA Bot。我需要更改聊天窗口标题的CSS。

我将机器人嵌入到ASP.net MVC应用程序中作为网络聊天。

我正在使用iframe方法将bot嵌入webchhat窗口。使用iframe方法如何更改css。

还有来自＆＃34; Chat＆＃34;的默认文字。到＆＃34;点击提出问题＆＃34;

我下载了botchat.css和botchat.js。我在_Layout.cshtml中包含了css和js文件。我更改了元素的背景颜色＆＃34; .wc-header＆＃34;在botchat.css中变红。但是这种变化仍未得到反映。

我想知道为什么botchat.css显示了botchat.css https://webchat.botframework.com/css/webchat-stable/botchat.css

有人可以帮我解决如何使用网络聊天窗口获取我已修改并包含在_Layout.cshtml中的botchat.css。

提前谢谢

Answer 1

首先，您的问题可能与其他SO线程重复。正如Nicolas R和Ashwin Kumar在评论中分享的那样，您可以克隆WebChat repo并修改源代码以根据您的要求自定义WebChat。

如果您不熟悉WebChat仓库，可以尝试以下方法来满足您的要求：将默认文本从“聊天”修改为“点击提问”并更改“.wc-header”的背景颜色变红了。

1）。在Strings.ts中，将title: "Chat"更改为title: "Click to Ask a Question"。

const localizedStrings: LocalizedStrings = {
    'en-us': {
        title: "Chat",

2）。在botchat.scss中将background-color: $c_brand更改为background-color:red;

.wc-header {
    background-color: $c_brand;

测试结果：

其次，如果可能，您可以通过botchat.js在您的网站中添加网络聊天（不使用提供的<iframe>代码）。要更改“.wc-header”的背景颜色，可以使用以下CSS代码段覆盖默认样式。

.wc-header{
    background-color:red !important;
}

注意：我们会将您的主题投票重复，如果您在自定义WebChat时遇到新问题，请随时回复。

<强> 编辑：

为什么botchat.css显示botchat.css取自https://webchat.botframework.com/css/webchat-stable/botchat.css

您使用提供的代码，该代码指向Microsoft托管的Web Chat实例，botchat.css也由Microsoft托管。

Answer 2

嗨，这是我为了更改QnABot的Css和聊天标题所做的。

首先我将iframe放在_Layout.cshtml文件中。 iframe的src是一个名为MyFAQChat.html的HTML文件

要生成MyFAQChat.html的内容，您可以执行以下操作。

首先只在_Layout.cshtml中放置iframe，如下所示

<div id='botDiv' style='height: 30px; position: fixed; bottom: 0;right: 0; z-index: 1000; background-color: #fff'><div id='botTitleBar' style='height: 30px; width: 300px; position:fixed; cursor: pointer;'></div><iframe width='300px' height='300px' src='https://webchat.botframework.com/embed/YOURBOTHANDLE?s= secretforWebchat'></iframe>

然后使用F12，您可以看到iframe的内容。它看起来像这样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>MyBot</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
        <link href="../../Content/botchat.css"   rel="stylesheet" />

        <link href="/css/webchat-stable/botchat-fullwindow.css" rel="stylesheet" />
</head>
<body>
    <div id="BotChatElement"></div>
        <script src="Scripts/jquery-1.12.3.js"></script>
        <script src="Scripts/Custom/botchat.js"></script>

    <script>
        var model = {

  "userId": "someuserid",
  "userName": "You",
  "botId": "botIDhere",

  "botName": "botNamehere",
  "secret": "webchatsecretidhere",

  "directLineUrl": "https://webchat.botframework.com/v3/directline",
  "webSocketEnabled": "false"

};
    </script>
    <script>
        BotChat.App({
            directLine: {
                secret: model.secret,
                token: model.token,
                domain: model.directLineUrl,
                webSocket: false
            },
            user: { id: model.userId, name: model.userName },
            bot: { id: model.botId, name: model.botName },
            resize: 'window',
            locale: 'en'
        }, document.getElementById("BotChatElement"));


    </script>
   <script>
   $(document).ready(function () {
       var id = document.getElementsByClassName("wc-header");         
            id[0].innerHTML="Click for Help";
        });
   </script>
</body>
</html>

您可以复制iframe的内容并将其另存为HTML文件。然后在_Layout.cshtml中的iframe中引用此html文件。

html文件包含更改聊天窗口标题的代码。我正在更改它以单击“有关document.ready功能的帮助”。

要更改机器人窗口的CSS ..我首先从cdn下载了botchat.css和botchat.js，然后更改了css并在MyFAQChat.html中添加了到css的链接。

这是我在不使用网络聊天的情况下使用的方法。

更改嵌入为网络聊天的QnA Bot的Css

2 个答案: