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]

Thanks! But where is now the css file or where exactly I have to put it? Could you make an example?

@JiteshGaikwad I have to admit your chatbot is amazing! It is way more better customoizable and more on point than the rasa webchat! Thanks for this amazing chatbot widget!

@bolder_pete if you like it then you can give it a star on the Github repo :wink: [image] JiteshGaikwad/ChatbotWidget ChatBot UI to integrate with Rasa's REST channel. Contribute to JiteshGaikwad/ChatbotWidget development by creating an account on GitHub.

Hey I try yours out. But I have some formatting issues. thebot messages are not formatted right if you send html text like <p>rhrhrh</p> Then the text is outside the bot message windows… Also bold tags like <strong> are omitted and ignored. So how could I format my text with your widget? (Markdown also nots works.) Thanks alot. Maybe you can short answer here before I post on your repo? :wink:

hmm yes, that why I tried html. This works not either? Also, in which file do you handover the url to the rasa server if it an other IP than the default?

Oh, but still interested where or how you put this css inside the above code. Many Thanks

CSS: JiteshGaikwad/ChatbotWidget/blob/main/static/css/style.css body { font-family: "Lato", sans-serif; background: url("../img/body.png") no-repeat center center fixed; background-size: cover; } /* ============= css related to chats =============== */ .widget { display: none; width: 350px; right: 15px; height: 500px; bottom: 5%; position: fixed; background: #fff; border-radius: 10px 10px 10px 10px; box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.16), 0 0px 5px 0 #00000096; } This file has been truncated. show original and rasa server url JiteshGaikwad/ChatbotWidget/blob/main/static/js/constants.js const action_name = "action_greet_user"; const rasa_server_url = "http://localhost:5005/webhooks/rest/webhook"; const sender_id = uuidv4();

Thanks! But to what question you refer by referring this css script?^^ is about formatting? I already used this to change sizes and fonts, but is it also about html tags? And: html tags like strong are suppressed. That is bad. How would I format a title to be bold or italic?

Rasa Web chat customizing buttons,colors alligning etc

Rasa Open Source

JiteshGaikwad (Jitesh Gaikwad) March 23, 2021, 12:57pm 59

Right now it doesn’t support markdown but maybe I can add it in the future updates. thanks

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