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!
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.
To customize the WebChat module, head on over to https://github.com/Microsoft/BotFramework-WebChat and fork the repository, then you can add your own CSS customizations and deploy your own custom themed chat interface. You will find the styling options here: https://github.com/Microsoft/BotFramework-WebChat/tree/master/src/scss
Customizing WebChat
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.
Card Sizes / Responsiveness
WebChat strives to use responsive design when possible. As part of this, WebChat cards come in 3 sizes: narrow (216px), normal (320px) and wide (416px). In a full-window chat, these sizes are invoked by a CSS media query in the /botchat-fullwindow.css style sheet. You may customize this style sheet for the media query breakpoints in your own application. Or, if your WebChat implementation is not a full-window experience, you can manually invoke card sizes by adding the CSS classes wc-narrow and wc-wide to the HTML element containing your chat.
Strings
You can alter or add localized strings in /src/Strings.ts:
- Add one or more locales (with associated localized strings) to
localizedStrings
- Add logic to map the requested locale to the supported locale in
strings
- Please help the community by submitting a pull request.
Behaviors
Behavioral customization will require changing the TypeScript files in /src. A full description of the architecture of WebChat is beyond the scope of this document, but here are a few starters:
Architecture
Chat is the top-level React componentApp creates a React application consists solely of ChatChat largely follows the Redux architecture laid out in this video series- To handle async side effects of Redux actions,
Chat uses Epic from redux-observable - here's a video introduction
- Underlying
redux-observable (and also DirectLineJS) is the RxJS library, which implements the Observable pattern for wrangling async. A minimal grasp of RxJS is key to understanding WebChat's plumbing.
Building WebChat
- Clone (or fork) this repo
npm installnpm run build (to build on every change npm run watch, to build production npm run prepublish)
This builds the following:
/built/*.js compiled from the TypeScript sources in /src/*.js - /built/BotChat.js is the root/built/*.d.ts declarations for TypeScript users - /built/BotChat.d.ts is the root/built/*.js.map sourcemaps for easier debugging/botchat.js webpacked UMD file containing all dependencies (React, Redux, RxJS, polyfills, etc.)/botchat.css base stylesheet/botchat-fullwindow.css media query stylesheet for a full-window experience
