Change the Css of the QnA Bot embedded as webchat

Question

Hi I have embedded a QnA Bot using Web Chat. I need to change the CSS of the Chat window\'s header.

I am embedding the bot as webchat in a ASP.net MVC application.

Answer 1

Firstly, your question is possible duplicate of other SO threads. And as Nicolas R and Ashwin Kumar shared in comments, you can clone WebChat repo and modify the source code to customize WebChat based on your requirement.

If you are not familiar with WebChat repo, you can try the following approach to achieve your requirement: modify the default text from "Chat" to "Click to Ask a Question" and change background color of ".wc-header" to red.

1).In Strings.ts, change title: "Chat" to title: "Click to Ask a Question".

const localizedStrings: LocalizedStrings = {
    'en-us': {
        title: "Chat",

2).In botchat.scss change background-color: $c_brand tobackground-color:red;

.wc-header {
    background-color: $c_brand;

Test result:

Secondly, if possible, you can add webchat in your website via botchat.js (not use the supplied