Search code examples
javascriptbotframework

BotFramework-WebChat Replace chat avatar with placeholder

I want to change the chat avatar, and the avatar of the bot, but setting the backgroundImage doesn't work enter image description here 

var styleSet = window.WebChat.createStyleSet({
    backgroundColor: '#f3f3f3',
    bubbleBackground: '#FFFFFF',
    bubbleBorderRadius: 5,
    bubbleTextColor: 'Black',
    bubbleFromUserBackground: '#3a8dde',
    bubbleFromUserBorderRadius: 5,
    bubbleFromUserTextColor: 'White',

});
styleSet.avatar = {
    alignItems: 'center',
    borderRadius: '50%',
    color: 'white',
    backgroundColor: 'gray',


    display: 'flex',
    height: "50px",
    justifyContent: 'center',
    overflow: 'hidden',
    width: "50px"
};

window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({token: 'My.Secret.token'}),
    //styles
    styleSet: styleSet,
    botAvatarInitials: 'BF',
    userAvatarInitials: 'WC'

}, document.getElementById('webchat'));
Solution

  • There is currently no solution for setting background images, but there is a workaround you can use with idiosyncratic styling, originally shared here on GitHub. 

    import { createStyleSet } from 'botframework-webchat;

const styleSet = createStyleSet({});
styleSet.avatar = {
    ...styleSet.avatar,
    '&.from-user': { 
         backgroundImage:'url(\'https://github.com/compulim.png?size=64\')' 
    },
   '&:not(.from-user)': {     
       backgroundImage:'url(\'https://learn.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0\')' }
    };
};

<ReactWebChat
  botAvatarInitials= ' '
  userAvatarInitials= ' '
  styleSet={styleSet}`
/>

    In JavaScript, you can do the following:

    const styleSet = window.WebChat.createStyleSet();
  styleSet.avatar = { 
      ...styleSet.avatar,
     '&.from-user': { 
         backgroundImage:'url(\'https://github.com/compulim.png?size=64\')' 
      },
     '&:not(.from-user)': {     
         backgroundImage:'url(\'https://learn.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0\')' }
      };

  window.WebChat.renderWebChat({
     directLine: window.WebChat.createDirectLine({ token }),
     styleSet,
     botAvatarInitials: ' ',
     userAvatarInitials: ' '
}, document.getElementById('webchat'));