Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
291 views
in Technique[技术] by (71.8m points)

c# - How to style chat window using CSS when using Microsoft Bot Framework

I have created a simple Chat bot through the use of Microsoft Q&A maker and deployment to azure. Out of the box, the bot has its own default style.

I want to be able to edit the look and feel of the chat window, possibly using CSS. I have found a couple of questions here but they do not give the complete answer I am looking for. I have done some research and found information at these URLs:

https://github.com/Microsoft/BotFramework-WebChat https://github.com/Microsoft/BotBuilder/issues/202

The first link above gives this explanation under the heading of 'Styling':

"In the /src/scss/ folder you will find the source files for generating /botchat.css . Run npm run build-css to compile once you've made your changes. For basic branding, change colors.scss to match your color scheme. For advanced styling, change botchat.scss ."

I do not fully understand how these files are connected to my project. I also do not know how to implement the techniques outlined above. I cannot find a specific set of steps to take to change the style of the chat window. Hopefully someone can explain in detail how I can use the techniques above (or that they know already) to change my bot styles.

If anyone knows the most straight forward method to style the Microsoft Bot chat window, or could point me in the right direction, that would be great!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...