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]

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.

@JiteshGaikwad Thank you for your great explanations. Please provide your opinion there Custom User Interface for Rasa chatbot Thank you.

HI its better if you add specific version <script src="https://storage.googleapis.com/mrbot-cdn/webchat-v0.7.21.js"></script> becuause in latest version , <script src="https://storage.googleapis.com/mrbot-cdn/webchat-latest.js"></script> .conversation-container .header is as → .rw-conversation-container .rw-header [image] Here the link of documentation if you want to read more [image] GitHub - botfront/rasa-webchat: A feature-rich chat widget for Rasa and Botfront A feature-rich chat widget for Rasa and Botfront. Contribute to botfront/rasa-webchat development by creating an account on GitHub. So its better if you change webchat-latest.js into specified version or refactor your style.css with latest style format .rw-conversation-container .rw-header{ background-color: #F5360D; }

[image] JiteshGaikwad: .rw-launche Hi! Im trying to make something similar to this, but I want to align the text to the center of the button. Is this possible? Thanks!

If anyone is having the same question I solved this just adding this to style.css: .conversation-container .replies { display:inline-block; } .conversation-container .reply{ display:block; text-align: center; }

Hi, I want to change the font size in rasa webchat. How to do that? Also, can I change the overall size of the chat window? Thanks

In older versions .conversation-container .message { margin: 10px; display: flex; font-size: 14px; font-family: Roboto,serif; flex-wrap: wrap; } in the css you can change font-size: 14px; to any size as you wish in latest versions [image] with latest version you have to use just check latest version .rw-conversation-container .rw-message{ font-size: 14px; }

Rasa Web chat customizing buttons,colors alligning etc

Rasa Open Source

Swapratim (Swapratim) April 27, 2020, 3:21pm 24

Thank you very much @rishier827 - much appreciated. I’m already using in that way too now.

Topic		Replies	Views
Rasa Webchat Integration Tutorials, Resources & Videos webchat , contribution	185	30922	August 29, 2023
Connect rasa to a web site with the recommeded plataform Rasa Open Source	62	14112	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