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. 
and chage colors inside buttons.
Instead of <script src="https://storage.googleapis.com/mrbot-cdn/webchat-latest.js"></script> can i download it from github and customize it and for the <script src=""></script> can i use my local machine location where my customized code.
Hey @rishier827, If you want customize the buttons, colors or other properties of the Rasa webchat, you try the below steps which worked for me:
I have written style.css to customize the css properties of the webchat, I have inspected the UI and have got the class names of the elements that I wanted to change.
Step1: Make sure you include the webchat.js before you import the style.css as shown below:
Step2: updating the css properties in the style.css file:
Stpe3: Now you can check the UI:
Let me know if this helps you. 
4 Likes
well ill try thankz
Where in the code or github can I find ccs propities or class names what I want to change? for example .launcher
Hey @rishier827, what aligment you want to do, you meant to say you the css of how the buttons are placed?
I want to have those buttons one after one on same size
do you mean vertical aligment?
yep do you have any suggestion
Below is the CSS:
.conversation-container .replies {
display:block
}
it gives the below output, let me know if this helps you:
2 Likes
yep it worked
Great 
1 Like
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?
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
Hi @JiteshGaikwad ,
Below is the test HTML and style.css. But it is still not working.
HTML Code:
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:
I hope that helps
2 Likes
Fantastic! Works like a charm!! Thank you so much Jitesh! 
1 Like
You’re welcome 
, glad that it helped you.