Search code examples
botframeworkchatbotdirect-line-botframeworkweb-chat

Is it possible to pin the input window in Web Chat at the end (Microsoft Bot Framework)?

i am building a Chatbot using the Microsoft Bot Framework. Currently i am working on the design of the webchat (Webchat V4 -> https://github.com/microsoft/BotFramework-WebChat) I have noticed, however, that with every new message the input window is moved further down and I have to scroll down to write another message.

Now to my question: Is it possible that you can pin the input window at the bottom and only the chat scrolls?

-

enter image description here

Solution

  • Yes you can, you can pin it using CSS. Just reference the webchat class in your CSS and you can customise it. Below is an excerpt from something I've implemented in Office Fabric UI panel.

    #webchat {
  margin: 0 auto;
  clear: both;
  padding: 0 10px;
  position: fixed;
  bottom: 0;
  top: 38px;
  padding-bottom: 53px;
  max-width: 87%;
  max-height: 90%;

}

    You also have the built in styling options as well, which are really useful