Привет, это то, что я сделал, чтобы изменить заголовок Css и чата QnABot.
Сначала я поместил iframe в файл _Layout.cshtml.Источником iframe является HTML-файл с именем MyFAQChat.html
. Для создания содержимого MyFAQChat.html вы можете выполнить следующее.
Сначала поместите только iframe в _Layout.cshtml.вот так
<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.Затем обратитесь к этому html-файлу в iframe, размещенном в _Layout.cshtml.
html-файл содержит код для изменения заголовка окна чата.Я изменяю его, чтобы щелкнуть «Справка» по функции document.ready.
Чтобы изменить CSS окна бота ... Сначала я загрузил botchat.css и botchat.js из cdn, а затем изменил css идобавил ссылку на css в MyFAQChat.html.
Этот метод я использовал без использования репозитория в чате.