Search code examples
botframework

Change the CSS of Chatbot embedded as IFRAME

ISSUE:

Today my chat bot stopped working and started giving the following error. No changes were made on my end when this started happening.

enter image description here I could not find any error in console log. Then I tested the bot with Emulator and in Azure Portal's Test in Webchat feature and the bot worked fine. This bot is using webchat (iframe embed) as well as DirectLine channel. The DirectLine channel works fine it is only the webchat that is not working.

So to test my theory that I am getting the error because of webchat getting updated by Microsoft. I used the embed code in Azure Portal to use the latest webchat and the webchat channel started working.

BRIEF HISTORY: To modify the UI of the webchat I used this method to modify the UI of the IFrame of my bot. This method requires to download the source of IFrame, create an HTML page and use that page as a source of your IFRAME in your website (you can see the customization in the image).

Now that I started getting the issue I mentioned above, I tried to do the same thing with the latest version of webchat but it is not working. The webchat is not sending messages and I cannot find what CSS file this new version of webchat is using.

WHAT I NEED GUIDANCE ON:

  1. Either a way to continue using the old webchat with the proper UI

OR

  1. How to update the UI of this new webchat version?
Solution

  • I can't advise on fixing the iframe version, but this already wasn't officially supported, and with the latest webchat update Microsoft is moving more to recommending botframework-webchat (directline) to format the UI. A good place to start is the branding sample.

    That sample doesn't spell out the options in the code, but if you take a look at the default options file, that should give you everything you need to customize the chat the way you want.

    What this does not do is set up the header that used to be present in ootb webchat (and which I see you customized in your example). Now the best way is to do this in html/css, and you probably can just reuse what you did for your custom option. I just created an additional DIV, set it to height: 40px;, then set the webchat DIV to height: calc(100% - 40px);. Anyone who's good with HTML can probably come up with better than this, essentially you just build your page however you want at that point and the webchat implementation just controls the chat area itself (essentially send box and response/bubble area). I also added a custom button to my header.

    <div id="chatbotTitle"><h3 style="padding-left:10px;">OEM CSC Support Bot</h3><button class="btn" id="transcriptButton">Email Transcript</button></div>
<div id="webchat" role="main"></div>