CODEWITHSUNDEEP
javascripthtmlazurebotframeworkchatbot
Elelio
Elelio

Reputation: 307

How to add chat bot v4 avatar icon in web chat?

I have to add an avatar to bot respons but i don't find the way to do it.

I have tried with the botAvatarInitials and userAvatarInitials Change the avatar of the bot within the dialog box but it isn't exactly what I want.

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

There is a way to use an image? Or at least change the avatar bubble color?

Upvotes: 2

Views: 1494

Answers (1)

Matt Stannett
Matt Stannett

Reputation: 2728

Yes you can set an image by using the botAvatarImage property as outlined in this sample.

It will look something like this:

const styleOptions = {
    botAvatarImage: 'https://learn.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'));

To set the background for the avatar bubble you can do the following:

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

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

Upvotes: 3

Related Questions