How to set background color of the official Rasa Chat Widget

[Arjaan (Arjaan Buijk)]

Is it possible to somehow define the background color of the official Rasa Chat Widget?

The documentation gives options for:

• data-avatar-background
• data-primary
• data-primary-highlight

But no parameter is available to set the background colors for the widget itself.

Maybe it is possible to provide this styling in a CSS?

[nik202]

@Arjaan yes we can change the background of the official Rasa Chat Widget

1. Need to use CSS style in the code:

<link rel="stylesheet" type="text/css" href="stylesheet.css">

2. in stylesheet.css

need to see the class or try this:

.css-1c77470 {
 background-color: grey;
}

3. Run it and enjoy

Output:

hope this will help! Good Luck!

[Arjaan (Arjaan Buijk)]

I had to use a different class name, but it worked. Thanks!

[nik202]

@Arjaan No worries, glad it worked

[sekhar8 (Chandra Sekhar)]

Hi,@nik202 can we add any title of the chatbot for the same widget please let me know how we can add

thanks in advance

[nik202]

@sekhar8 yes we can add the title, but I have not implemented it personally. I used botfront :- GitHub - botfront/rasa-webchat: A feature-rich chat widget for Rasa and Botfront