User Avatar in Ms Bot virtual Assistant bot framework V4

0
votes

I am developing a chat bot using MS bot framework V4 and virtual assistant.I am looking for ways to add avatar.

1) Bot avatar in Azure Web Chat I updated the bot icon, but the avatar is showing up only when I test in azure web chat.How to setup my bot avatar so that it will show up consistently in every bot channel

2) User avatar. I am authenticating my user making use of MS graph API and I can find the profile image in token, but not sure where to configure it so that it will show user's avatar along with each response/message

I have gone through the Demo for setting the bot framework server and the webchat for the bot by following the samples provided

bot server == https://github.com/Microsoft/BotBuilder-Samples

webchat == https://github.com/Microsoft/BotFramework-WebChat

but there is no proper example or documentation on how to set the user image after the user has signed in. using the signed user object.

I looked into the discussions mentioned here, here and here. Any suggestions ?

enter image description here

3
c#.net-corebotframework

3 Answers

2
votes

Bot avatar: avatar management is different given channels. There is no way to globally modify your bot avatar for every channel:

  • For Teams, it is a property of your app package
  • For the webchat, you can setup the image on your webchat code
  • Etc

User avatar: same here, there is no quick way of changing the image of the user in the webchat after its start. You pointed the right topic, you will have to dig in the webchat code

1
votes

Nicolas is correct regarding avatar management across different channels. This answer specifically addresses the "User avatar" question.

Updating the user avatar in Web Chat is possible, however it will require you to use React (or similar) for re-rendering, as well as for state management. This Stack Overflow solution (located here) details how to achieve this.

It does use AAD for obtaining the user photo (for use as the avatar). If you are not using AAD, then change the code to make the appropriate service and API call(s).

Hope of help!

0
votes

If you are following the webchat samples available at: https://github.com/Microsoft/BotFramework-WebChat. User avatar can be changed by creating a style set using createStyleSet method where you can put many style properties to customize your webchat UI. Among those properties is userAvatarImage which will take the image url for user avatar. hope this helps.