我如何使用直线 API 使聊天机器人显示为实时聊天?
How can i make chat bot appear as live chat using direct line API?
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
BotChat.App({
directLine: { secret: direct_line_secret },
user: { id: 'userid' },
bot: { id: 'botid' },
resize: 'detect'
}, document.getElementById("bot"));
</script>
</body>
</html>
我有这段代码可以使用直线 API 而不是通常的 iframe 将机器人嵌入为实时聊天,但是当我输入直线秘密密钥时,机器人会占据整个网页。我需要它出现在网页的右下角,并在用户单击它时作为生活聊天弹出。请有人指导我实现这一目标。谢谢
您的问题与您显示 div 的方式有关,包括机器人:<div id="bot"/>
您可以设置此 div 的样式以显示您想要的样式; bot Webchat Github 项目中提供了几个示例:
侧边栏显示:https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/sidebar/index.html
对于全窗口:https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/fullwindow
我强烈建议您看一下第一个示例,其中包含窄、正常和宽的演示 div
正如 Nicolas R 所建议的,您可以设置容器 div <div id="bot"/>
的样式以将其放置在网页的右下角。我在一个项目中实现了相同的需求,下面的示例代码适用于我,你可以参考它。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<style>
.wc-chatview-panel {
width: 350px;
height: 450px;
position: relative;
}
#bot {
position: fixed;
bottom: 0;
right: 0;
}
.closechat {
top: 405px !important;
}
</style>
</head>
<body>
<div id="bot"></div>
</body>
</html>
<script>
BotChat.App({
directLine: { secret: "{your_directline_secret}" },
user: { id: 'You' },
bot: { id: '{Your_BotId}' },
resize: 'detect'
}, document.getElementById("bot"));
$(function () {
$("div.wc-header").prop("isopen", "true");
$("div.wc-header").click(function () {
var isopen = $(this).prop("isopen");
//alert(isopen);
if (isopen == "true") {
$("div.wc-chatview-panel").addClass("closechat");
$("div.wc-header").prop("isopen", "false");
} else {
$("div.wc-chatview-panel.closechat").removeClass("closechat");
$("div.wc-header").prop("isopen", "true");
}
})
})
</script>
测试结果:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
BotChat.App({
directLine: { secret: direct_line_secret },
user: { id: 'userid' },
bot: { id: 'botid' },
resize: 'detect'
}, document.getElementById("bot"));
</script>
</body>
</html>
我有这段代码可以使用直线 API 而不是通常的 iframe 将机器人嵌入为实时聊天,但是当我输入直线秘密密钥时,机器人会占据整个网页。我需要它出现在网页的右下角,并在用户单击它时作为生活聊天弹出。请有人指导我实现这一目标。谢谢
您的问题与您显示 div 的方式有关,包括机器人:<div id="bot"/>
您可以设置此 div 的样式以显示您想要的样式; bot Webchat Github 项目中提供了几个示例:
侧边栏显示:https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/sidebar/index.html
对于全窗口:https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/fullwindow
我强烈建议您看一下第一个示例,其中包含窄、正常和宽的演示 div
正如 Nicolas R 所建议的,您可以设置容器 div <div id="bot"/>
的样式以将其放置在网页的右下角。我在一个项目中实现了相同的需求,下面的示例代码适用于我,你可以参考它。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<style>
.wc-chatview-panel {
width: 350px;
height: 450px;
position: relative;
}
#bot {
position: fixed;
bottom: 0;
right: 0;
}
.closechat {
top: 405px !important;
}
</style>
</head>
<body>
<div id="bot"></div>
</body>
</html>
<script>
BotChat.App({
directLine: { secret: "{your_directline_secret}" },
user: { id: 'You' },
bot: { id: '{Your_BotId}' },
resize: 'detect'
}, document.getElementById("bot"));
$(function () {
$("div.wc-header").prop("isopen", "true");
$("div.wc-header").click(function () {
var isopen = $(this).prop("isopen");
//alert(isopen);
if (isopen == "true") {
$("div.wc-chatview-panel").addClass("closechat");
$("div.wc-header").prop("isopen", "false");
} else {
$("div.wc-chatview-panel.closechat").removeClass("closechat");
$("div.wc-header").prop("isopen", "true");
}
})
})
</script>
测试结果: