Botframework-sdk: Custom WebChat Control UI

[karanmartian]

Hi I am trying to integrate my bot into my website and I want to change the default webchat control (the embedded iframe src) that i get from Microsoft when I publish the bot. I really want to skin and have more flexibility over the chat control. at least to the minimum i would like to send input to my bot from a different text box on my page. I guess we would have to know the source code of the Emulator for this? or is there an alternate solution?

[genereddick]

It would be nice if there were some skinning options for the embedded webchat client. However, you can build your own client using the DirectLine API.

http://docs.botframework.com/sdkreference/restapi-directline/#navtitle

[DavePilks]

Is it possible to get the source for the WebChat so that we can skin it?

[dandriscoll]

These are both good suggestions -- we should make the webchat open source, and we should make it skinnable. These seem like separate things because some developers may want to reskin the chat control without forking their own copy of it.

[PrasenjitSaha]

Is there any update on embeded Web Chat Control provided by MS Bot Framework? I want to change Header Text, change CSS etc.

[dandriscoll]

We don't have any announcements yet, sorry. Please stay tuned.

[arieschwartzman]

What we need is to make the DirectLine API cross domain enabled, so we can write our own web client

[dandriscoll]

The API already has a CORS whitelist. Is there something more you need?

[PrasenjitSaha]

Thanks dadriscoll & arieschwartzman. I completely understand that if I need to do any customisation like branding / color change / heading change e.t.c. on Web Chat Control provided by Microsoft Bot that right now is not possible what I need to do I have to configure DirectLine API and build own chat client. Is my understanding is right?

[dandriscoll]

Hi @PrasenjitSaha, that's correct.

[andresvettori]

I just tried to host the webchat control inside my own project but hit the "CORS" wall... and I wonder what the comment made by "dandriscoll" is about: "The API already has a CORS whitelist"
Care to expand a little on this topic? So you say there is a way to make the scenario I have mentioned work? How?

Thanks in advance,

[andresvettori]

Any sample of a WebApp (MVC/WebAPI) exposing a webchat functionality to users and using DirectLine API to talk to my BOT?

[dandriscoll]

Hi @andresvettori, the Direct Line service allows CORS calls from all hostnames. Can you describe the OPTIONS call that's failing in more detail?

We have a Direct Line for C# sample here, although it's a console app, not a website: https://github.com/Microsoft/BotBuilder-Samples/tree/master/CSharp/core-DirectLine

[andresvettori]

I know the DirectLine API call would work, that's clear. The OPTIONS problem I'm having now is not with that API but the WebChat one, as it enforces CORS, but I though there were a way to make it "trust my origin url". I saw the DirectAPI console sample, but was looking for a quick solution for a POC project.
There is going to be time to implement the proper DirectLine web chat UI later, I guess.

Thanks!

[dandriscoll]

Direct Line and Web Chat are 99% the same protocol. Just replace the Web Chat hostname with the Direct Line hostname, and use your Direct Line key instead of your Web Chat key.

[spreddy2714]

Wish you would open the source for webchat on github as soon as possible, it opens up lot of flexibility to developers. I don't see any good reason to have it private protected at the moment :)

[dandriscoll]

Yes, we are working on opening it up.

[andresvettori]

Hi @dandriscoll , I have made the webchat control use the DirectLine API and it worked! It allowed me to customize a little the webchat control and behavior (for example, pre authenticate the user if we already have his/her identity in the web page).

Thanks!

[jcmontx]

Hello @dandriscoll, it would be great if you could open the source code of the web chat. It's quite complex to build it from scratch and a little of an overkill when you just need a few modifications.
Mainly I need the same thing that @karanmartian mentions in the OP, the possibility of giving the bot an input prior the conversation begins.

[dandriscoll]

https://github.com/Microsoft/BotFramework-WebChat

[xadil]

hello @dandriscoll
Is it possible to deploy my bot & the webchat locally and use it just as I use the emulator. Assuming I want to build a bot which is private to my network.

[andresvettori]

Hi @xadil , the use of the emulator is perfectly fine for development but for production usage is not going to work as the BotFramework infrastructure requires the Bot to be exposed to the Internet. If you desire to keep the Bot private you can do it (do not hit the "Publish" button on the Bot page) but users would have to be invited explicitly (you sending them a link to add the Bot as a new contact), for example.

Does that works for you?

[andresvettori]

Hi @dandriscoll , I downloaded and used the new webchat control, much better than the previously published code based on angular. I had to activate the experimental back-channel feature and re-compile, but it seems to work pretty well so far, good work!

[Steeldragon0403]

Hi @andresvettori , I have a small query on "Not publishing the bot to keep it private". If I do not do that, I cannot see my Bot icon in the Webchat window when the bot is responding to my queries. Is it mandatory to publish the bot to have this Icon visible?

Thanks for your response