Rasa Web chat customizing buttons,colors alligning etc

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.

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.:thinking:

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. :slight_smile:

1 Like

well ill try thankz