Skip to content
Branch: master
Find file History
corinagum Move to prettier! (#2038)
* Update eslint

* Move .prettierrc to each package

* Prettier pass

* Localization cleanup

* More Localization cleanup + prettier

* post-prettier cleanup

* Update CHANGELOG.md

* Update /actionDispatched.js

* Remove .md files from prettier and add manual .md file command

* Remove timestamp from localization params

* Ignore .md files in lint-staged
Latest commit a10096a Jun 4, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md
index.html Improve mobile UX of Web Chat via viewport meta tag (#1919) Apr 22, 2019

README.md

Sample - Display User and Bot Initials on Web Chat

Description

A simple web page with a maximized Web Chat that displays initials for both the bot and the user.

Test out the hosted sample

How to run

  • Fork this repository
  • Navigate to /Your-Local-WebChat/samples/04.a.display-user-bot-images-styling in command line
  • Run npx serve
  • Browse to http://localhost:5000/

Things to try out

  • Type hello: you should see the initials displayed next to user and bot speech bubbles in the transcript.

Code

Jump to completed code to see the end-result index.html.

Getting started

Goals of this bot

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!

Completed code

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/master/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>

Further reading

Full list of Web Chat hosted samples

View the list of available Web Chat samples

You can’t perform that action at this time.