Custom css

[senturiwebdesign]

Hi all,

Is there anybody that knows how to add custom css or overwrite css from Tailwind?

For instance:

• Adding back the scrollbar (which is now overwritten by Tailwind)
• Changing the background color of the typing bubble
• Aligning the text bubble right next to the avatar, instead of it being under the avatar.
• etc.

Ideally I would like to just have a css file (for instance loaded in the head of my website) that overwrites everything. I also tried changing the index.css and pushing that, but that does not work.

Any ideas?

Thanks!
Stijn

[toi500]

Ideally I would like to just have a css file (for instance loaded in the head of my website) that overwrites everything. I also tried changing the index.css and pushing that, but that does not work.

That is not going to work since the chatbot will render on it own. You need to address this from the source code.

1. Clone the repository

2. Run yarn install (Just 1 time)

3. Now you can change the source code. You need to insert all your new css rules at the end of this file, and marking them as !important; https://github.com/FlowiseAI/FlowiseChatEmbed/blob/main/src/assets/index.css

4. Run yarn build (Every time you modify the source code and want to generate a new web.js file, the chatbot)

This will generate a new web.js / chatbot with all your changes.

5. Host this new file web.js and insert the file path in the flowise script. Please note you need to use 1 diferent path everytime you make a modification. Jsdelivr and GH will cache the file so in order you see your changes, you need to rename the file web.js all the time; something like web-01.js, web-02.js...

Here is an example:

If you mean the new scrollbar in the text area, I used this. Look much better.

textarea::-webkit-scrollbar {
  width: 5px;
  background-color: #fff !important;
}

textarea::-webkit-scrollbar-thumb {
  background-color: #f5f5f5 !important;
  border-radius: 5px !important;
}

textarea::-webkit-scrollbar-thumb:hover {
  background-color: #f0f0f0 !important;
}

[senturiwebdesign]

@toi500, you are amazing!

Thanks for your quick elaborate answer. I got it working!

Cheers,
Stijn

[blissiraDC]

@toi500 WOW!! So glad I just found this post! This is MASSIVE!!! Thank you so much for your awesome explanation!! Do you happen to know where the value is for the title bar when in full screen embed mode? Thanks 1000000000x