How to Customize Link Colors and Highlight Text in Flowise AI Chatbot and Adjust the size of the image used in the chat button?

[ccamedia]

Hi everyone,

I'm currently integrating a Flowise AI chatbot into my WordPress site using the Divi theme, and I'm looking to customize the appearance of links and highlighted text within the chat interface. Specifically, I want to:

Change the color of links to #fc9a3f.
Adjust the size of the image used in the chat button. I want to remove the space around and only use the picture as chat button.

Thank you in advance for your help!

[714Lemons]

I think you have to change line 34 in this file: https://github.com/FlowiseAI/FlowiseChatEmbed/blob/main/src/assets/index.css
Here is some more information about the chat embed: https://docs.flowiseai.com/using-flowise/embed

[ccamedia]

[ccamedia]

Hi @714Lemons, the links finally work, and the changes in the index.css are now effective. However, I'm struggling to change the colors of the headings and lists. I've added the styles to index.css using !important, but it doesn’t seem to have any effect. Any advice?

[714Lemons]

Hey I can't look at the code right now but I think it has something to do with the markdown rendering/parsing of the text. Maybe where I suggested to change the link color. Did you check how the headings are defined in the message html in the frontend?

[blissiraDC]

Hey @ccamedia, I found the answer to this. I added this to index.css, change the color of course to whatever you require.

I have noticed that it sometimes takes a while for the changes to take effect, maybe that JSdelvr has to propagate web.js?

Here is the code

.prose :where(strong):not(:where([class~=not-prose],
[class~=not-prose] *)) {
color:#abe7ff;
font-weight:600
}

[ccamedia]

Hey @blissiraDC, thank you for your quick response. Does this affect all the headlines and bullet points? I've made the changes now. How long did it take for the color to update in your case? It does not look like it works right now... hmm

[blissiraDC]

It picks up the bullets and normal font size headlines, but for larger headline fonts like what GPT 4o outputs no, I am still trying to get that showing. Its very weird but I have found that I have to refresh several times or even completely clear my browser cache before I see any changes. Which seems to be the case more often than not.

[ccamedia]

Hey @blissiraDC , thanks so much for your help. Unfortunately, the chatbot I've been working on for so long is messing up the CSS on my website, and I'm stuck... It's really frustrating! Most of my clients use the same theme as I do (Divi), so this issue might completely derail my plans to sell personalized AI chatbots. You can see what happens when I embed the chatbot on my test page... cca-media.at/test/ :(

[blissiraDC]

@ccamedia how did you get the gradient color in the header?

[ccamedia]

Hey blissiraDC - just copy this css in the "theme": backgroundColor: "linear-gradient(45deg, #8839ae, #db2547, #fc9a3f)", you can adjust the colors as you want.

[blissiraDC]

Hey @ccamedia thanks for your reply, unfortunately that option is not available in full page embed. I would love an answer to your question though, it seems nothing I change in index.css seems to have any effect.