我克隆了这个仓库 https://github.com/Microsoft/BotFramework-WebChat我设法在本地编辑CSS。 我想知道我需要部署什么才能使用在线网络聊天？
谢谢你的帮助
最佳答案
I clone this repo https://github.com/Microsoft/BotFramework-WebChat and I managed to edit css in local. I would like to know what I need to deploy to use webchat online?
在你之后customize&build your own web chat ，要在您的网站中嵌入网络聊天，您应该在项目中包含构建的 botchat.css 和 botchat.js 文件，并引用 botchat.css 和 botchat.js 在您的网页中。
I want to add a widget like this to open my chatbot, what I need to do?
您似乎希望在网页中显示聊天图标，以允许用户动态打开/折叠您的网络聊天，要实现此要求，您不需要修改 botchat.js 文件，以下代码示例适合我，您可以引用它。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="BotChat/botchat.css" rel="stylesheet" />
<script src="BotChat/botchat.js"></script>
<style>
#mychat {
margin: 10px;
position: fixed;
bottom: 30px;
right: 10px;
z-index: 1000000;
}
</style>
</head>
<body>
<div id="container">
<h1>Hello World</h1>
<!--other page contents-->
<img id="mychat" src="/image/RD7i4.png" style="float:right" />
</div>
</body>
</html>
<script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
BotChat.App({
directLine: { secret: '{directline_secret}' },
user: { id: 'You' },
bot: { id: '{your_botid}' }
}, document.getElementById("botDiv"));
document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#chatbotheader')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = "0px";
document.getElementById("mychat").style.display = "block";
};
});
document.getElementById("mychat").addEventListener("click", function (e) {
document.getElementById("botDiv").style.height = '500px';
e.target.style.display = "none";
})
}());
</script>
测试结果:
关于botframework - 部署自定义网络聊天机器人框架，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51563481/