How to Style Chat Window Using CSS When Using Microsoft Bot Framework

How to style chat window using CSS when using Microsoft Bot Framework

How is it working now?

I do not fully understand how these files are connected to my project: assuming that you are using iframe implementation, it means that you are using the compiled version of the source code you found.

If you have a look to the iframe content (doing a GET on the URL), it looks like the following:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>MyBotId</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
        <link href="/css/adaptive/botchat.css" rel="stylesheet" />
        <link href="/css/adaptive/botchat-fullwindow.css" rel="stylesheet" />
    </head>
    <body>
        <div id="BotChatElement"></div>
        <script src="/scripts/adaptive/botchat.js"></script>
        <script>
            var model = {
                 "userId": "demo1234",
                 "userName": "You",
                 "botId": "MyBotId",
                 "botIconUrl": "//bot-framework.azureedge.net/bot-icons-v1/bot-framework-default-8.png",
                 "botName": "MyBotId",
                 "secret": "mySecret",
                 "iconUrl": "//bot-framework.azureedge.net/bot-icons-v1/bot-framework-default-8.png",
                 "directLineUrl": "https://webchat.botframework.com/v3/directline",
                 "webSocketEnabled": "false"
            };
        </script>
        <script>
        BotChat.App({
            directLine: {
                secret: model.secret,
                token: model.token,
                domain: model.directLineUrl,
                webSocket: false
            },
            user: { id: model.userId, name: model.userName },
            bot: { id: model.botId, name: model.botName },
            resize: 'window'
        }, document.getElementById("BotChatElement"));

    </script>
    </body>
</html>

So as you can see, it is referencing a css file, the one compiled by the GitHub project.

How to add your custom css?

On your side, you can edit this css, edit it, and use the same implementation as above but replace the css link to yours.

Can we add custom CSS in Web Chat Channel in Microsoft Bot Framework (.NET/C#)

I have followed the approach mentioned in path - https://github.com/billba/botchattest

This link contains two .html(s), .CSS and .JS files.

I can make changes in CSS according to my requirement, button's style, color and font size.
After Updating CSS

As I have implemented this Web Chat/DirectLine Chat in my SharePoint Online Webpart page, so I faced an issue, which also I have fixed.

Details can be seen in - Using WebChat in SharePoint Script Editor #228

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

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

https://bisser.io/bot-framework-v4-webchat-styling-options/
https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-webchat-customization?view=azure-bot-service-4.0

Is rounding border corners supported in Microsoft bot framework chat window supported

bubbleBorderTopLeftRadius is not defined in the Webchat possible options. See open-source repository: https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js

You can contribute to the repository to add this feature

Is there a way to re-design webchat interface of microsoft bot?

Refer to Update 11/16

Currently there isn't a way to skin the web chat. This is a popular request though and there are few threads on BotBuilder discussing about this:

Styling web chat control
Custom WebChat Control UI

Update 11/16

The Web Chat sample is now open source and available in GitHub: https://github.com/Microsoft/BotFramework-WebChat so you can now do the customization that you want.

How to Style Chat Window Using CSS When Using Microsoft Bot Framework