我克隆了此仓库https://github.com/Microsoft/BotFramework-WebChat,并设法在本地编辑CSS。 我想知道我需要部署什么才能在线使用网络聊天?
感谢您的帮助
答案 0 :(得分:3)
我克隆了此仓库https://github.com/Microsoft/BotFramework-WebChat,并设法在本地编辑CSS。我想知道我需要部署什么才能在线使用网络聊天?
在customize&build your own web chat之后,要在您的网站中嵌入网络聊天,您应该在项目中包含构建的botchat.css
和botchat.js
文件,并引用botchat.css
和{{1 }}。
我想添加一个this之类的小部件来打开我的聊天机器人,我需要做什么?
您似乎希望在网页中显示聊天图标,以允许用户动态打开/折叠您的网络聊天,为达到此要求,您无需修改botchat.js
文件,如下所示代码样例对我有用,您可以参考它。
botchat.js
测试结果:
答案 1 :(得分:0)
如果我想添加这样的小部件 打开我的聊天机器人,我需要做什么?修改botchat.js文件是否足够?
如何在post中拥有像这样的应用程序?
答案 2 :(得分:0)
如果要使用iframe,则无法自定义设计。对于自定义设计,您需要使用Direct line,因为您可以更改设计以及使bot充分响应。
这是我正在使用的代码,对我来说很好:
<!DOCTYPE html>
<html class="no-js lang-en" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- For Bot Frame -->
<link href="../assets/SCSS/botchat-fullwindow.css" type="text/css" rel="stylesheet" />
<link href="../assets/SCSS/botchat.css" type="text/css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body class="personal-body">
<!-- For Bot Code -->
<div id="BotChatElement">
</div>
<img src="../assets/images/chat-2-icon.png" onclick="openchatbot()" class="open-bot" id="button_chat" />
<script src="../assets/JS/botchat.js"></script>
<script>
var model = {
"userId": "demo1234",
"userName": "You",
"botId": "Chatbot Main Tree",
"botIconUrl": "",
"botName": "Chatbot Main Tree",
"secret": "",
"iconUrl": "",
"directLineUrl": "https://webchat.botframework.com/v3/directline",
"webSocketEnabled": "false"
};[enter image description here][1]
BotChat.App({
directLine: {
secret: model.secret,
token: model.token,
domain: model.directLineUrl,
webSocket: false,
sendTyping: true
},
user: { id: model.userId, name: model.userName },
bot: { id: model.botId, name: model.botName },
sendTyping: true,
resize: 'window'
},
document.getElementById("BotChatElement"));
function openchatbot() {
$(".wc-chatview-panel *").removeClass("maximizebot");
$(".wc-chatview-panel").css({ 'bottom': '0', 'display': 'block' });
}
$(".minimize-icon").on('click',
function () {
$(".wc-chatview-panel").removeClass("minimize-icon");
$(".wc-chatview-panel ").toggleClass("minimizebot");
$(".minimize-icon ").toggleClass("maximizebot");
});
$(".close-icon").on('click',
function () {
$(".wc-chatview-panel ").removeClass("minimizebot");
$(".wc-chatview-panel ").removeClass("maximizebot");
$(".wc-chatview-panel").css({ 'bottom': '-500px', 'display': 'none' });
});
</script>
</body>
</html>
答案 3 :(得分:0)