Custom Style for Bot Framework composer

Question

I am creating a bot using bot framework composer. How can i change the style of chat window. I want to customize the chat window with my webpage theme.

Answer 1

Hello @Sumeet Chandel

Thanks for reachin out to us, yes, you can customize your chat window - https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-webchat-customization?view=azure-bot-service-4.0

The Web Chat control provides rich customization options: you can change colors, sizes, placement of elements, add custom elements, and interact with the hosting webpage. Below are several examples of how to customize the Web Chat UI.

You can find the full list of all the settings that you can modify in Web Chat in the StyleOptions.ts file. The default values for Web Chat can be found in the defaultStyleOptions.ts file

These settings will generate a style set, which is a set of CSS rules enhanced with glamor. You can find the full list of CSS styles generated in the style set in the createStyleSet.ts file.

You can also Integrate Web Chat into your website
The Web Chat overview describes how to integrate the Web Chat control into your website: https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-webchat-overview?view=azure-bot-service-4.0

I hope this helps! Please let us know if you have any more question.

Regards,
Yutong

-Please kindly accept the answer if you feel helpful to support the community, thanks a lot.