使用 DirectLine 时如何修改 Microsoft Chatbot 的 webchat 容器
我有聊天机器人，我使用 DirectLine 将机器人嵌入我的网站。DirectLine UI 看起来像一个带有白色背景的页面，我想将其修改为如下图所示或接近于它：
我正在关注这里的示例。
我能够更改容器的大小，但无法使用提供的代码更改聊天气泡的字体或背景颜色。这是我的代码：
<body>
<div id="webchat" role="main">
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<!--<script src="webchat.js"></script>-->
<script>
const styleSetOptions= window.WebChat.createStyleSet({
bubbleBackground: 'rgba(0, 0, 255, .1)',
bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
});
var d1 = window.WebChat.createDirectLine({ token: '<secret token>' })
var siteDomain = document.URL
window.WebChat.renderWebChat(
{
directLine: Object.assign(
{},
d1,
{
postActivity: activity => {
var newActivity = Object.assign({}, activity, { channelData: { "siteDomain": siteDomain } });
return d1.postActivity(newActivity);
}
}),
styleSetOptions
},
document.getElementById('webchat')
);
</script>
这不起作用。我已经下载了 CDN webchat.js。我也通过创建自己的 JS 文件并将其链接到我的HTML页面中将它集成到本地，但它不起作用。我错过了什么吗？
沧海一幻觉2回答
-
一只甜甜圈
您必须将您创建的styleSet传递给renderWebChat。您的 styleSet 已创建，但未在任何地方使用。检查以下示例： const styleOptions = { bubbleBackground: 'rgba(0, 0, 255, .1)', bubbleFromUserBackground: 'rgba(0, 255, 0, .1)' }; window.WebChat.renderWebChat( { directLine: window.WebChat.createDirectLine({ secret: 'YOUR_BOT_SECRET' }), // Passing 'styleOptions' when rendering Web Chat styleOptions }, document.getElementById('webchat') ); -
烙印99
您需要将styleSetOptions对象分配给方法的styleOptions属性，rederWebchat即const styleSetOptions= window.WebChat.createStyleSet({ bubbleBackground: 'rgba(0, 0, 255, .1)', bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'}); window.WebChat.renderWebChat( { directLine: Object.assign( {}, d1, { postActivity: activity => { var newActivity = Object.assign({}, activity, { channelData: { "siteDomain": siteDomain } }); return d1.postActivity(newActivity); } }), styleOptions: styleSetOptions }, document.getElementById('webchat') );
随时随地看视频慕课网APP
相关分类
JavaScript