5

I am developing a training ChatBot application, where I am using Microsoft Bot Framework (.NET/C#).

When, I am using Configuring Channel - "Skype" or "Facebook"- My chat window's look-and-feel is nice without writing any css/style code, as it's visible in default css of Skype and facbook.

But when I am trying to show the same chat using Web Chat Channel in my SharePoint/Web Page (.aspx or .html), . It's not showing up in the correct/nice format, please see the below image for more details. I wonder, can we add custom css/style if I want to show this chat-bot using Web Chat channel only on any web page.

Image

Virendra Kumar
  • 309
  • 3
  • 11

3 Answers3

3

The WebChat control is an Open Source project so you can contribute changes back to the project or fork it and make any changes that you would like.

The repository can be found here.

Lars
  • 9,976
  • 4
  • 34
  • 40
0

It looks like you're using the older Web Chat control. The new, open source Web Chat control (still in preview) has much richer support for buttons, markdown, cards, etc. The new control is not enabled by default yet, but you can enable it for your bot on the Web Chat configuration page on the dev portal.

Eric Anderson
  • 193
  • 5
  • I can't see any option to enable such a setting in the 'Configure Web Chat' page - in fact, it's blank apart from the 'I'm done configuring Web Chat' button. – oflahero Dec 23 '16 at 10:24
  • (Though my bot is currently unpublished and is just using an Azure free tier right now - maybe you get more options if the bot is actually published?) But what Eric is saying appears to make sense - the web chat as it appears on the bot configuration page is the nice shiny new version decorated with React tags, but the one you get when using the embed iframe is older, with just Angular tags and no React-y stuff. – oflahero Dec 23 '16 at 10:27
  • OK, I'm a big fat idiot. You have to 'Add a site' first. :) – oflahero Dec 23 '16 at 10:32
0

I have followed the approach mentioned in path - https://github.com/billba/botchattest

This link contains two .html(s), .CSS and .JS files.

I can make changes in CSS according to my requirement, button's style, color and font size. After Updating CSS

As I have implemented this Web Chat/DirectLine Chat in my SharePoint Online Webpart page, so I faced an issue, which also I have fixed.

Details can be seen in - Using WebChat in SharePoint Script Editor #228

Virendra Kumar
  • 309
  • 3
  • 11