#1625: Update root README.md and SAMPLES.md (#1752)

* Update root README.md and SAMPLES.md * Update CHANGELOG.md * Re-upload screenshots
microsoft · Feb 25, 2019 · b95462b · b95462b
1 parent 5e17850
commit b95462b
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -73,6 +73,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `core`: Fix [#1057](https://github.com/Microsoft/BotFramework-WebChat/issues/1057). Fixed suggested actions destined for other recipients should not show up, by [@compulim](https://github.com/compulim) in PR [#1706](https://github.com/Microsoft/BotFramework-WebChat/pull/1706)
 - `component`: Fixed pt-br locale not being selected, added `X minutes ago` and missing translations, by [@pedropacheco92](https://github.com/pedropacheco92) in PR [#1745](https://github.com/Microsoft/BotFramework-WebChat/pull/1745)
 - `component`: Fix [#1741](https://github.com/Microsoft/BotFramework-WebChat/issues/1741) where `scrollToEndButton` does not have `type="button"`by [@corinagum](https://github.com/corinagum) in PR [#1743](https://github.com/Microsoft/BotFramework-WebChat/pull/1743)
+- `component`: Fix [#1625](https://github.com/Microsoft/BotFramework-WebChat/issues/1625) to update `README.md` by [@corinagum](https://github.com/corinagum) in PR [#1752](https://github.com/Microsoft/BotFramework-WebChat/pull/1752)
 
 ### Removed
 - `botAvatarImage` and `userAvatarImage` props, as they are moved inside `styleOptions`, in PR [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)

diff --git a/README.md b/README.md
@@ -30,16 +30,21 @@ Here is how how you can add Web Chat control to your website:
     <script>
       window.WebChat.renderWebChat({
         directLine: window.WebChat.createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' }),
-        userID: 'YOUR_USER_ID'
+        userID: 'YOUR_USER_ID',
+        username: 'Web Chat User',
+        locale: 'en-US',
+        botAvatarInitials: 'WC',
+        userAvatarInitials: 'WW'
       }, document.getElementById('webchat'));
     </script>
   </body>
 </html>
 ```
+> `userID`, `username`, `locale`, `botAvatarInitials`, and `userAvatarInitials` are all optional parameters to pass into the `renderWebChat` method.
 
-> If `userID` is not specified, it will default to `default-user`. Multiple users sharing the same user ID is not recommended; their user state will be shared.
+> If `userID` is not specified, it will default to a random user ID. Multiple users sharing the same user ID is not recommended; their user state will be shared.
 
-![Screenshot of Web Chat](https://raw.githubusercontent.com/Microsoft/BotFramework-WebChat/master/doc/webchat-screenshot.png)
+![Screenshot of Web Chat](https://raw.githubusercontent.com/Microsoft/BotFramework-WebChat/master/doc/weatherquery.png.jpg)
 
 ## Integrate with JavaScript
 

diff --git a/SAMPLES.md b/SAMPLES.md
@@ -10,6 +10,46 @@ You can find the full list of all settings that you can easily modify in Web Cha
 
 These settings will generate a *style set*, which is a set of CSS rules enhanced with [glamor](https://github.com/threepointone/glamor). You can find the full list of CSS styles generated in the style set on the [`createStyleSet.js` file](https://github.com/Microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/createStyleSet.js).
 
+
+## Set the size of the Web Chat container
+
+It is now possible to adjust the size of the Web Chat container using `styleSetOptions`. The following example has a `body` background-color of `paleturquoise` to show the Web Chat container (section with white background).
+
+```js
+…
+<head>
+  <style>
+    html, body { height: 100% }
+    body {
+      margin: 0;
+      background-color: paleturquoise;
+    }
+
+    #webchat {
+      height: 100%;
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <div id="webchat" role="main"></div>
+  <script>
+    (async function () {
+    window.WebChat.renderWebChat({
+      directLine: window.WebChat.createDirectLine({ token }),
+      styleOptions: {
+        rootHeight: '100%',
+        rootWidth: '50%'
+      }
+    }, document.getElementById('webchat'));
+    })()
+  </script>
+…
+```
+Here is the result:
+
+<img alt="Web Chat with root height and root width set" src="https://raw.githubusercontent.com/Microsoft/BotFramework-WebChat/master/doc/rootHeightWidth.png" width="600"/>
+
 ## Change font or color
 
 Instead of using the default background color and the fonts used inside of the chat bubbles, you can customize those to match the style of the target web page. The code snippet below allows you to change the background color of messages from the user and from the bot.