botframework v4自定义标题和可最小化的网络聊天



我正在使用以下内容呈现我的聊天:

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
}

.main {
margin: 18px;
border-radius: 4px;

}
div[role="form"] {
background-color: black;
}
div[role="log"] {
background: gainsboro;
}
div[role="status"] {
background: darkgray;
}
#webchat {
position: fixed;
height: calc(100% - 135px);
z-index: 9999;
width: 400px;
top: 132px;
overflow: hidden;
border-color: red;
border-style: dotted;
visibility:visible;
}

</style>
</head>
<body>

<div>
<div id="heading">
<div id="heading">
<h1><img src="mylogo.png"> mychat</h1>
</div>
</div>
<div id="webchat" role="main"></div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>


openchat();

function openchat() {

const styleOptions = {
userID: 'YOUR_USER_ID',
username: 'Web Chat User',
botAvatarInitials: '',
userAvatarInitials: 'You',
bubbleBackground: 'rgba(0, 255, 50, .4)',
bubbleFromUserBackground: 'rgba(125, 125, 125, .3)',
botAvatarImage: 'mylogo.png'
};
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: '*'
}),
styleOptions
},
document.getElementById('webchat')
);
}
</script>

</body>
</html>

它工作得很好,但现在我需要在公司的网页上发布这个聊天,作为弹出窗口或类似的东西,所以使用以前的脚本是可以的,但我没有添加标题到弹出窗口的选项,我还需要添加一个最小化按钮。如何在主页中设置我的网络聊天的标题和最小化按钮?

Tx,

我认为今后最好的选择是使用webchat团队提供的示例。可最小化的网络聊天示例就是一个很好的例子。

最新更新