Hi,
we implemented a virtual agent on our website based on the concept that the bot automatically starts the conversation when it is opened (https://docs.microsoft.com/en-us/power-virtual-agents/configure-bot-greeting). This work's fine.
The problem we have is that the bot's icon is not visible on our website, but in contrast to that it's showing just fine on the demo-website or in the virtual agent preview. Website (live)
Preview in Virtual Agents
Any solutions or hints for this problem?
Thanks in advance!
Julian
Hey, where have you hosted the image? Is the image accessible from anywhere?
The icon is hosted directly in virtual agents, nowhere else.
As you see in my screenshots the icon is showing in the preview, but not on our website where the bot is embedded.
Unfortunately I don't have access to the HTML-Code, because our website is managed by an external company.
Is it necessary to also upload the bot's icon into the website's html files?
Yes, I would try this.
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.
Keep up to date with current events and community announcements in the Power Virtual Agents community.
A great place where you can stay up to date with community calls and interact with the speakers.