A simple web page with a maximized Web Chat that displays initials for both the bot and the user.
- Fork this repository
- Navigate to
/Your-Local-WebChat/samples/04.a.display-user-bot-images-stylingin command line - Run
npx serve - Browse to http://localhost:5000/
- Type
hello: you should see the initials displayed next to user and bot speech bubbles in the transcript.
Jump to completed code to see the end-result
index.html.
This sample will show you how to implement your own initials displayed next to .
This sample starts with the full-bundle CDN sample as the base template.
First, we want to add the styleOptions object to our index.html page and add the initials as values within the object. This object will be passed into Web Chat. The keys for the bot and user initials are botAvatarInitials and userAvatarInitials, respectively.
Add the initials for both the user and the bot. The new object should look like the following:
const { token } = await res.json();
- const styleOptions = {};
+ const styleOptions = {
+ botAvatarInitials: 'BF',
+ userAvatarInitials: 'WC'
+ };Finally, make sure the styleOptions object is passed into Web Chat, like so:
…
window.WebChat.renderWebChat({
- directLine: window.WebChat.createDirectLine({ token })
+ directLine: window.WebChat.createDirectLine({ token }),
+ styleOptions
}, document.getElementById('webchat'));
…That's it!
Here is the finished index.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Avatar with images and initials</title>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
html, body { height: 100% }
body { margin: 0 }
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
(async function () {
https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
const { token } = await res.json();
+ const styleOptions = {
+ botAvatarInitials: 'BF',
+ userAvatarInitials: 'WC'
+ };
window.WebChat.renderWebChat({
- directLine: window.WebChat.createDirectLine({ token })
+ directLine: window.WebChat.createDirectLine({ token }),
+ styleOptions
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));
</script>
</body>
</html>View the list of available Web Chat samples