Botframework-sdk: [Feature Request] WebChat Customization - Allow user to configure UI colors in channel config page

[NotengoID]

Hi,

I want to change the color on webchat, how could I do it?

I've found this on CSS
.wc-header background-color:#D32F2F
.wc-message-from-me .wc-message-content background-color: #D32F2F;
.wc-message-from-me svg.wc-message-callout path fill: #3A96DD;

[eanders-MS]

Our plan is to allow such style modifications from the WebChat channel config page, but we've not implemented this yet. For the time being, you must fork or clone the webchat repo and serve the control from your site. This will allow you the freedom to modify the css to suit your needs. The site's README includes instructions to get you started with building the project.

[wu2014]

I used the standard Bot Framework WebChat channel to get an IFRAME of mybot and embeded in my website. But now the bot can not support Carousel very well, also I want to change some css style of my bot. How can I do that? Thanks

[eanders-MS]

Hi @wu2014 Webchat Card and Carousel fixes are incoming. See open pull request here: https://github.com/Microsoft/BotFramework-WebChat/pull/282. Be sure to let us know if these fixes don't address the issues you're seeing!

For custom CSS in the webchat control, please see my previous answer above. This is an interim solution until we further develop the webchat channel config page to include customization controls.

[wu2014]

Hi, Eric,
Thanks for your quick and nice reply.
I'M using the standard webchat iframe, not the repo you mentioned.
My bot in Skype works well, but using inframe to embed in website, it
doesn't not work in some elements.
I also try this repo for webchat, but lose the bot icon and the top
welcoming message.
Thanks
Yinyuan

On Jan 18, 2017 2:11 PM, "Eric Anderson" [e-mail] wrote:

Hi @wu2014 https://github.com/wu2014 Webchat Card and Carousel fixes
are incoming. See open pull request here: Microsoft/BotFramework-
WebChat#282 https://github.com/Microsoft/BotFramework-WebChat/pull/282.
Be sure to let us know if these fixes don't address the issues you're
seeing!

For custom CSS in the webchat control, please see my previous answer
above. This is an interim solution until we further develop the webchat
channel config page to include customization controls.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/BotBuilder/issues/2057#issuecomment-273617971,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJ8A4XWM3zO4OkwfZrxAbQlFDMJu-Gs-ks5rTo3ygaJpZM4LmLYe
.

[IanLawrence]

Is there any timeline for this implementation in the channel config page?

[danmarshall]

Hi @IanLawrence we don't have a timeline for this feature but it is on our backlog. In the meanwhile, we'd like to know what level of customization that people are needing. Is it just background colors?

[IanLawrence]

Hey @danmarshall ..I actually managed to work around it by using Direct Line but basically I wanted to change everything visible in the chat (color, images, texts) . Could not find where the text Chat comes from and the images (send, upload image) but I did not look too hard yet

[danmarshall]

Thanks for the feedback @IanLawrence . You'll find the text in this file and upload & send buttons in SVG data. These can be overridden with your own CSS.

[fokstephanie]

My team and I are using WebChat and as for customization of that interface, it would be great if we were able to change chat bubble colours as well as the colour of the 'Chat' tab, especially since we want the chat UI to match our brand.

[maba4891]

Would be great if we could also add some menu to wc-header to restart the bot or show some help information (similar to the persistent menu that Facebook provides).

For now I host on Azure, include the webchat via directline and overwrite the botchat.css styles where I need it. E.g. to change the background color of the Chat tab:

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

[ericvanisko]

Hi - It would be ideal if we could easily customize background colors (of chat and header), header title, and font & font size.

Any idea of a timeline for when some customization will be available for WebChat? In the mean time, we are working to switch to Direct Line to enable customization.

[compulim]

@ericvanisko we are working on UI revamp on Web Chat, accent color is a top ask. Can you file a suggestion to Web Chat repos about the scenario you want to enable? Thanks!

[EricDahlvang]

Closing since this should be on the https://github.com/Microsoft/BotFramework-WebChat/ repository.