How to create bot avatar in bot framework c#

Question

I have created a chatbot using Microsoft Bot Framework v4 in C#, I am looking for ways to add avatar to the bot.

I am not able to find any documentation online to do so in c#. i do see documentation for this in node js (Web Chat).

is it even possible in c#? has anyone done this before?

thanks in advance.

Answer 1

@Kumar, Nitesh Welcome to Microsoft Q&A Forum, Thank you for posting your query here!

I understand that your ask is related to adding an avatar to the bot.

The avatar can be added in the Web Chat client, not in the bot code itself. Here’s how you can do it:

1. You need to customize your Web Chat client. This is done on the front-end, not in the C# code of your bot. The avatar is a feature of the Web Chat UI, not the bot itself.
2. In your Web Chat customization, you can use the botAvatarImage property to provide an image URL for the bot avatar. Here’s an example of how you can do this:

 // Set the avatar options. 
     const avatarOptions = {
        botAvatarImage: '<URL to your bot avatar image>',
        botAvatarInitials: 'BF',
        userAvatarImage: '<URL to your user avatar image>',
        userAvatarInitials: 'WC'
     };

    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({
          token: '<Your Direct Line token>'}),
      styleSet,
      styleOptions: avatarOptions
    }, document.getElementById('webchat'));

Use the botAvatarInitials property to set the avatar initials for the bot, which appears on the left-hand side of the control. Use the userAvatarInitials property to set the avatar initials for the user, which appear on the right-hand side.

Use the botAvatarImage and userAvatarImage properties to provide image URLs for the bot and user avatars. The control will display these in place of the initials.

More Info here.

Remember, this customization is done in the Web Chat client that runs in the browser, not in your bot’s C# code. Your bot’s job is to process messages and generate responses. It’s the job of the Web Chat client to present those messages and responses in a conversational UI, and that’s where avatars come into play.

Hope this answers.