How to override default css of rasa webchat

[Loki]

Hi all, I am trying to customize css of profile Image in rasa webchat. I imported App.css in my App.js file . but when I test it, default css values are overriding my css values. How can I change this ?

App.css have my css values

[InnoOmnia]

How and where you refer to app.css file?

[Loki]

I use it in my app.js file

import Widget from 'rasa-webchat';
import './App.css'

function App() {
  return (
    <div className="App">
        <Widget
      initPayload={"/get_started"}
      socketUrl={"http://localhost:5500"}
      socketPath={"/socket.io/"}
      customData={{"language": "en"}} 
      title={"Title"}
     profileAvatar={profileAvatarURL}
        />
    </div>
  );
}

export default App;

[InnoOmnia]

@Loki

import './App.css'

how about adding semicolon to end?

import ‘./App.css’;

[Loki]

@InnoOmnia JavaScript semicolons are optional. but I still tried, did not work

[nik202]

Hi @Loki, Right. Its easy peasy!

Solution 1: You can directly mention the css code in the Rasa Webchat snippet which is every easy, please see this tutorial video: Best Ways To Customize Rasa-webchat - YouTube

Solution 2: If you have a project folder (clone from the Rasa Webchat) and running on npm server node 3000 I guess for ReactJS app; then the process is all different.

But, If you only using the Rasa Webchat Snippet code and want to customise using your own CSS, then please follow my solution thread: Integrating Chatbot-Widget ((https://github.com/JiteshGaikwad/Chatbot-Widget) ) to a Wordpress site? - #7 by nik202

Please ask me endless question on this!