如何在网络聊天中添加聊天机器人v4头像图标?

时间:2019-07-17 10:10:42

标签: javascript html azure botframework chatbot

我必须在机器人响应中添加一个化身,但我找不到解决方法。

我尝试使用botAvatarInitials和userAvatarInitials Change the avatar of the bot within the dialog box ,但这并不是我想要的。

    window.WebChat.renderWebChat({
        directLine: botConnection,
        styleOptions: styleOptions,
        botAvatarInitials: 'BOT',
        userAvatarInitials: 'YOU'
    }, document.getElementById('webchat'));

有使用图像的方法吗?或者至少更改头像气泡的颜色?

1 个答案:

答案 0 :(得分:2)

是的,您可以使用this sample中概述的botAvatarImage属性来设置图像。

它看起来像这样:

const styleOptions = {
    botAvatarImage: 'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0',
    botAvatarInitials: 'BF',
    userAvatarImage: 'https://github.com/compulim.png?size=64',
    userAvatarInitials: 'WC'
};

window.WebChat.renderWebChat({
    directLine: botConnection,
    styleOptions
 }, document.getElementById('webchat'));

要设置头像气泡的背景,您可以执行以下操作:

const styleOptions = {
    bubbleBackground: 'rgba(0, 0, 255, .1)',
    bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
};

window.WebChat.renderWebChat({
    directLine: botConnection,
    styleOptions
}, document.getElementById('webchat'));