README is not clear about UI customization

[Kagigz]

Finding how to customize the webchat UI is currently not straightforward.
Some of the style options are available here:
https://github.com/Microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleSetOptions.js
But it's complicated to find for example how to set the height of the chat window, or change completely the aspect of the webchat (apart for colors etc.)

There are a lot of samples that show how to customize the style but you don't really know how to embed that into a webpage for example.

Also, the "How to use" section is a bit misleading because when you try the code snippet, what you get isn't exactly like the screenshot right under it.

[corinagum]

What do you mean by "embed that into a webpage"?
You can use rootHeight and rootWidth to adjust the size of the Web Chat container.

There is currently an issue open to update the root README.md at #1625. I will get to that as soon as possible.

[compulim]

Agree on the style options. It has been an ongoing challenge for us because there are easily 50+ things you can customize. We are extracting everything that is customizable into this file. We are thinking to make a Codepen, so dev can easily try out different things.

For the height of the chat window, since it is an UI component, it is up to the container to decide what the size the Web Chat UI should be (we will fill 100%/100% on the container Web Chat is being put into). We used to ask the dev to put width/height in, but we receive a lot of feedbacks that the dev forget to set width/height. And it cause Web Chat to show up as small as possible and make it looks bad (fixed in #1267).

@corinagum could you follow up with "how to use" section?

[corinagum]

@Kagigz I have updated the READMEs, hope that helps! Thanks for your submission.

#1752