Reputation: 162

Change the Css of the QnA Bot embedded as webchat

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.

I am using the iframe method to embed the bot in webchhat window. Using the iframe method how do i change the css.

And also the default text from "Chat" to "Click to Ask a Question"

I downloaded the botchat.css and botchat.js. I have included the css and js file in _Layout.cshtml. I changed the background color of the element ".wc-header" to red in botchat.css. But still the change is not reflected.

I want to know why the botchat.css shows botchat.css is taken from https://webchat.botframework.com/css/webchat-stable/botchat.css

Can someone help me on how to make the webchat window to pick up the botchat.css which i have modified and included in _Layout.cshtml.

Thank you in advance

Upvotes: 0

Answers (2)

bharathy

Reputation: 162

Hi this is what I did in order to change the Css and chat title of the QnABot.

first i placed the iframe in the _Layout.cshtml file. The src of the iframe is a HTML file called MyFAQChat.html

To generate the content of the MyFAQChat.html you can do the following.

First place only the iframe in the _Layout.cshtml like this

<div id='botDiv' style='height: 30px; position: fixed; bottom: 0;right: 0; z-index: 1000; background-color: #fff'><div id='botTitleBar' style='height: 30px; width: 300px; position:fixed; cursor: pointer;'></div><iframe width='300px' height='300px' src='https://webchat.botframework.com/embed/YOURBOTHANDLE?s= secretforWebchat'></iframe>

Then using F12 you can see the contents of the iframe. it will look something like this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>MyBot</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="../../Content/botchat.css"   rel="stylesheet" />

        <link href="/css/webchat-stable/botchat-fullwindow.css" rel="stylesheet" />
</head>
<body>
    <div id="BotChatElement"></div>
        <script src="Scripts/jquery-1.12.3.js"></script>
        <script src="Scripts/Custom/botchat.js"></script>

    <script>
        var model = {

  "userId": "someuserid",
  "userName": "You",
  "botId": "botIDhere",

  "botName": "botNamehere",
  "secret": "webchatsecretidhere",

  "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',
            locale: 'en'
        }, document.getElementById("BotChatElement"));


    </script>
   <script>
   $(document).ready(function () {
       var id = document.getElementsByClassName("wc-header");         
            id[0].innerHTML="Click for Help";
        });
   </script>
</body>
</html>

You can copy the contents of the iframe and save it as a HTML file. Then reference this html file in the iframe placed in the _Layout.cshtml.

The html file contains the code to change the title of the chat window. I am changing it to click for Help on document.ready function.

To change the CSS of the bot window..i first downloaded the botchat.css and botchat.js from the cdn and then changed the css and added the link to the css in the MyFAQChat.html.

This is the method i used without using webchat repo.

I added the iframe in the layout.cshtml in the document.ready function

$(document).ready(function () {
var div = document.createElement("div");
            document.getElementsByTagName('body')[0].appendChild(div);
            div.outerHTML = "<div id='botDiv' style='height: 38px; position: fixed; bottom: 0; z-index: 1000; background-color: #fff'><div id='botTitleBar' style='height: 38px; width: 400px; position:fixed; cursor: pointer;'></div><iframe width='400px' height='600px' src='https://webchat.botframework.com/embed/DSWebBotForFAQs?s=0SRsueCeamk.cwA.JIM.ShMx5BDubHOaIOY3fxrdB_do7iBd1os'></iframe></div>";

            document.querySelector('body').addEventListener('click', function (e) {
                e.target.matches = e.target.matches || e.target.msMatchesSelector;
                if (e.target.matches('#botTitleBar')) {
                    var botDiv = document.querySelector('#botDiv');
                    botDiv.style.height = botDiv.style.height == '600px' ? '38px' : '600px';
                };
            });

        });

Upvotes: 2

Fei Han

Reputation: 27793

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 <iframe> code). To change background color of ".wc-header", you can use the following CSS code snippet to override the default style.

.wc-header{
    background-color:red !important;
}

Note: We will vote your thread as duplicate, if you have new question while customizing WebChat, please feel free to post back.

Edit:

why the botchat.css shows botchat.css is taken from https://webchat.botframework.com/css/webchat-stable/botchat.css

You use the supplied code, which points at a Web Chat instance hosted by Microsoft, the botchat.css is also hosted by Microsoft.

Upvotes: 1

Change the Css of the QnA Bot embedded as webchat

Answers (2)

Related Questions