Javascript 使用DirectLine时如何修改Microsoft Chatbot的webchat容器
我有聊天机器人，我正在使用DirectLine将机器人嵌入我的网站。DirectLine UI看起来像一个白色背景的页面，我想修改它，使其看起来像下面的图像或靠近它的图像： 我正在跟踪样品 我可以更改容器的大小，但无法使用提供的代码更改聊天泡泡的字体或背景颜色。这是我的代码：Javascript 使用DirectLine时如何修改Microsoft Chatbot的webchat容器,javascript,botframework,chatbot,Javascript,Botframework,Chatbot,我有聊天机器人，我正在使用DirectLine将机器人嵌入我的网站。DirectLine UI看起来像一个白色背景的页面，我想修改它，使其看起来像下面的图像或靠近它的图像： 我正在跟踪样品 我可以更改容器的大小，但无法使用提供的代码更改聊天泡泡的字体或背景颜色。这是我的代码： <body> <div id="webchat" role="main"> </div> <script src="https://cdn.botframework.com/b
<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>
const styleSetOptions=window.WebChat.createStyleSet({
泡泡背景：“rgba（0,0,255,1）”，
bubbleFromUserBackground:'rgba（0,255,0,1）'
});
var d1=window.WebChat.createDirectLine（{token:''}）
var siteDomain=document.URL
window.WebChat.renderWebChat(
{
directLine:Object.assign(
{},
d1，
{
后活动：活动=>{
var newActivity=Object.assign（{}，activity，{channelData:{“siteDomain”：siteDomain}）；
返回d1.后活动（新活动）；
}
}),
样式集选项
},
document.getElementById（'webchat'）
);
这是行不通的。我已经下载了CDN
webchat.jsHTML 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')
);
您必须将创建的样式集传递给renderWebChat。您的样式集已创建，但未在任何地方使用 检查以下示例：
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')
);
您需要将
styleSetOptionsrederWebchatstyleOptionsconst 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')
);
您需要将
styleSetOptionsrederWebchatstyleOptionsconst 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')
);
我在
renderwebchatrenderwebchat