您好，这是我为了更改 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。
这是我使用的方法，没有使用 webchat repo。
我在document.ready函数的layout.cshtml中添加了iframe
$(document).ready(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='height: 38px; position: fixed; bottom: 0; z-index: 1000; background-color: #fff'><div id='botTitleBar' style='height: 38px; width: 400px; position:fixed; cursor: pointer;'></div><iframe width='400px' height='600px' src='https://webchat.botframework.com/embed/DSWebBotForFAQs?s=0SRsueCeamk.cwA.JIM.ShMx5BDubHOaIOY3fxrdB_do7iBd1os'></iframe></div>";
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#botTitleBar')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = botDiv.style.height == '600px' ? '38px' : '600px';
};
});
});