Question

我有一个聊天机器人，正在使用DirectLine将其嵌入到我的网站中。 DirectLine用户界面看起来像是一个白色背景的页面，我想对其进行修改，使其看起来像下面的图像或接近它的图像：

我正在跟踪样本here。

我能够更改容器的大小，但是无法使用提供的代码更改聊天气泡的字体或背景颜色。这是我的代码：

<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页面中，我也已经在本地对其进行了集成，但它不起作用。我想念什么吗？

Answer 1

您必须将创建的 styleSet 传递给 renderWebChat 。您的styleSet已创建，但未在任何地方使用。

检查以下示例：

TextIO

Answer 2

您需要将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')
    );

使用DirectLine时如何修改Microsoft Chatbot的Webchat容器

2 个答案: