Hi @julianhoewel_95 ,
If you use a custom canvas like the one in this page: https://docs.microsoft.com/en-us/power-virtual-agents/customize-default-canvas
you can customize the bot and user bot.
This is what I did:
const styleSet = window.WebChat.createStyleSet({
// Add styleOptions to customize Web Chat canvas
bubbleBackground: 'rgba(250, 250, 250, 1)',
bubbleFromUserBackground: 'rgba(250, 250, 250, 1)',
rootHeight: '100%',
rootWidth: '100%',
backgroundColor: 'white',
hideUploadButton: false,
userAvatarBackgroundColor: 'white',
botAvatarBackgroundColor: 'white',
});
// Set the avatar options.
const avatarOptions = {
backgroundColor: 'white',
botAvatarBackgroundColor: 'rgba(255, 255, 255, 1)',
// accent: 'rgba(255, 255, 255, 1)',
botAvatarImage: '../../chatbot/images/chatboticon.png',
botAvatarInitials: 'Bot',
userAvatarImage: '../../chatbot/images/chatboticonuser.png',
userAvatarInitials: 'User',
};
fetch(theURL)
.then(response => response.json())
.then(conversationInfo => {
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: conversationInfo.token,
}),
// webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory(),
// store: store,
styleSet,
styleOptions: avatarOptions
},
document.getElementById('webchat')
);
})
.catch(err => console.error("An error occurred: " + err));
I hope it helps.
