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:

style

Stpe3: Now you can check the UI:

Let me know if this helps you. :slight_smile:

3 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

In the above hierachy i was unable to find button alliginig.

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:

Screenshot%20from%202020-03-11%2017-52-18

2 Likes

yep it worked

Great :relaxed:

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

2 Likes

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

1 Like

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