Hi this is what I did in order to change the Css and chat title of the QnABot.
first i placed the iframe in the _Layout.cshtml file. The src of the iframe is a HTML file called MyFAQChat.html
To generate the content of the MyFAQChat.html you can do the following.
First place only the iframe in the _Layout.cshtml like this
<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>
Then using F12 you can see the contents of the iframe. it will look something like this
<!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>
You can copy the contents of the iframe and save it as a HTML file. Then reference this html file in the iframe placed in the _Layout.cshtml.
The html file contains the code to change the title of the chat window. I am changing it to click for Help on document.ready function.
To change the CSS of the bot window..i first downloaded the botchat.css and botchat.js from the cdn and then changed the css and added the link to the css in the MyFAQChat.html.
This is the method i used without using webchat repo.
I added the iframe in the layout.cshtml in the document.ready function
$(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';
};
});
});
