How to create bot avatar in bot framework c#

Kumar, Nitesh 20 Reputation points


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.

Azure AI Bot Service
Azure AI Bot Service
An Azure service that provides an integrated environment for bot development.
687 questions
A set of technologies in the .NET Framework for building web applications and XML web services.
3,794 questions
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
9,511 questions
0 comments No comments
{count} votes

Accepted answer
  1. navba-MSFT 9,580 Reputation points Microsoft Employee

    @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'
          directLine: window.WebChat.createDirectLine({
              token: '<Your Direct Line token>'}),
          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.

    User's image

    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.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful