我有聊天机器人，我使用 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 回答
一只甜甜圈
TA贡献1836条经验 获得超5个赞
您必须将您创建的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
TA贡献1829条经验 获得超13个赞
您需要将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')
);
添加回答
举报
0/150
提交
取消