Edit Microsoft ChatBot UI design

Question

I have setup a QnA Bot via the Azue BotService, and I want to use the WebChat channel, but the default MS Design for the chat interface is quite bland; is there a way for me

Answer 1

It depends on how you want to integrate the webchat in your page but yes it is possible to change the aspect, it's only css and js

All the details are provided on the GitHub account for the Webchat: https://github.com/Microsoft/BotFramework-WebChat

In a few words:

Want to run a custom build of WebChat? Clone this repo, alter it, build it, and reference your built botchat.css and botchat.js files.

And for Styling:

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.