如何从Microsoft文档中添加带有聊天机器人名称的标题栏?
<head>
<style>
html, body { height: 100% }
body {
margin: 0;
background-color: paleturquoise;
}
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
(async function () {
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),
styleOptions: {
rootHeight: '100%',
rootWidth: '50%'
}
}, document.getElementById('webchat'));
})()
</script>
使用styleOptions我可以在bot容器中设置聊天机器人的样式,但是找不到将标题栏添加到主容器的方法,非常感谢您的帮助。
答案 0 :(得分:0)
不幸的是,这不是通过styleOptions
来完成的,因为它不是一项包含的功能(可以向here提交功能请求,顺便说一句)。
但是,这可以通过一些解决方法来完成。只需从“ webChat”声明开始,将以下代码添加到Web聊天所在的html脚本中即可。
要说明,首先必须将父容器设置为position: relative
。这样,我们将创建的子div childHeader
可以将position: absolute
放置在聊天窗口的顶部。
然后,我们创建div
元素,应用样式,甚至添加一个按钮(只是为了表明可能)!按钮chatHeaderBtn
附加到chatHeader
,按钮本身又附加到父容器(webChat
)。
这时,“标题”随页面一起呈现,已固定在聊天窗口中,并且可用于进一步的功能。
<script>
[...]
window.ReactDom.render(
<ReactWebChat
directLine={ directLine }
/>,
document.getElementById( 'webchat' )
);
document.querySelector( '#webChat > *' ).focus()
const webChat = document.getElementById( 'webchat' );
webChat.setAttribute( 'style', 'position: relative' );
const chatHeader = document.createElement('div')
chatHeader.setAttribute( 'style', 'position: absolute; color: black; background-color: darkslategray; height: 5%')
chatHeader.innerText = "I'm a header!";
const chatHeaderBtn = document.createElement('button')
chatHeaderBtn.setAttribute( 'style', 'float: right; background-color: red')
chatHeaderBtn.setAttribute( 'onclick', `alert("Couldn't resist pressing, eh?")`)
chatHeaderBtn.innerText = "Look!...a button!"
chatHeader.appendChild(chatHeaderBtn);
webChat.appendChild(chatHeader);
</script>
希望有帮助!