Hi is there any ways or documentation to customize rasa web chat like changing its color changing icons changing button stylings etc. chat starting button and closing button customizing. [image] and chage colors inside buttons. [image.png]

Below is the CSS: .conversation-container .replies { display:block } it gives the below output, let me know if this helps you: [Screenshot%20from%202020-03-11%2017-52-18]

[image] JiteshGaikwad: .conversation-container .replies { display:block } yep it worked

Thanks for the code. I applied the same but the style.css is not overwriting the default electric blue color mode.

Where did you added the style.css in your html file?

Hi @JiteshGaikwad , Below is the test HTML and style.css. But it is still not working. HTML Code: [image] style.css .conversation-container .header { background-color: #F5360D; } .conversation-container client { background-color: #F5360D; } .conversation-container close-button { background-color: #F5360D; } .launcher { background-color: #F5360D; } Still, the default webchat color is been shown there. Please have a look at: https://rasa-webchat-test.glitch.me/ Thanks in advance if you find some time to suggest a way around.

hey @Swapratim , the css classnames have been changed: .rw-conversation-container .rw-header{ background-color: #F5360D; } .rw-conversation-container .rw-client{ background-color: #F5360D !important; } .conversation-container close-button { background-color: #F5360D; } .rw-launcher{ background-color: #F5360D; } Output: [image] I hope that helps :slight_smile:

Fantastic! Works like a charm!! Thank you so much Jitesh! :slight_smile:

You’re welcome :blush:, glad that it helped you.

@JiteshGaikwad this is really amazing. Can i use this with Angular ? I want to create front end using Angular js.

Rasa Web chat customizing buttons,colors alligning etc

Rasa Open Source

Swapratim (Swapratim) April 4, 2020, 3:07pm 16

Created the style.css and add the stylesheet link in the head of html - didn’t worked. Then I added along with the webchat script - didn’t worked either. Like this:

WebChat.default.init

Topic		Replies	Views
Rasa Webchat Integration Tutorials, Resources & Videos webchat , contribution	185	30920	August 29, 2023
Connect rasa to a web site with the recommeded plataform Rasa Open Source	62	14102	February 16, 2022
Customize whole Rasa-webchat widget Tutorials, Resources & Videos community , rasa	0	913	August 6, 2021
Rasa webbot Rasa Open Source	53	5966	July 18, 2021
Error return of buttons in rasa webchat Rasa Open Source	72	3564	February 14, 2022

Rasa Web chat customizing buttons,colors alligning etc

Related topics