Ability to change Title Color Background for Share Chatbot

[YAYJAY]

Hi, Flowise is an awesome solution and I might be using it in the simplest way ever, however, I am restricted in ability to deploy because of a lack of color editing on the title.

I use the Share Chatbot link as most of my scenarios are in an iFrame.

There is currently no ability to change from the default blue.

My customers want to be on brand when I am embedding chatbots into their pages.

Thanks

[automaton82]

You can but you need to do it yourself in your own repo today.

To do so, open the existing repo here https://github.com/FlowiseAI/FlowiseChatEmbed

Then clone it into your own repo. Look at Bot.tsx, specifically here around line 483: background: props.bubbleBackgroundColor,

This is where the header is drawing it's background from. Ultimately this color comes from bubbleBackgroundColor={bubbleProps.theme?.button?.backgroundColor ?? defaultButtonColor}

And I think that is falling back to the default const defaultButtonColor = '#3B81F6'

So you could probably just change that const and it would work, I didn't try. But after you change it and recompile web.js, note you'd have to host it yourself somewhere and not use the one on the CDN.

[YAYJAY]

Thank you @automaton82

My different customers require different colors. Will this solution require me to deploy multiple front-end versions of the FlowwiseChatEmbed because I am hardcoding the defaultButtonColor each time?

All other colors are modifiable in the Share Chatbot per chatbot. Whats the likelihood of this getting into the main build as part of the default Share Chatbot configuration?

[automaton82]

My guess it's a lot of work to put this into the product since it'd have to introduce ability to theme somehow.

If that's your goal, then better to just create custom .css files for each of your deployments and try to use CSS targeting to modify the colors with !important on them. It won't be perfect but it's a lot faster and easier.

[YAYJAY]

I don't understand how is it different from all the nine other color selections on that same page for configuring the same chatbot interface.

Thanks for the tip. I don't understand enough about CSS to know how I could edit the page hosting the iFrame for it to take affect on a page living in the iFrame. Nor do I control most of the places that I am putting the iFrame.

[HenryHengZJ]

@YAYJAY you can modify the title color:

theme: {
    button: {
        backgroundColor: "<any-color>" // <- update this
    }
}

[YAYJAY]

@HenryHengZJ - in my use case I create chatbots for various customers and place them using a iFrame in to existing software. Each chatbot deployed needs customer color to fit in with their existing branding.

As I understand it, if I modify that, it's for all deployed Chatbots and I would have to deploy multiple instances of Flowise and modify the default color of each instance.

If the color setting for the title was added into the "Share Chatflow" config page like it is for the nine other color settings on each individual chatflow, then I could continue to deploy chatbots to my customers with a single deployed instance of Flowise.

[dkindlund]

Hey @automaton82 , echoing @YAYJAY 's concerns here -- forcing users to clone FlowiseChatEmbed or deploy custom CSS to apply different design treatments to the chatbot seems very complicated.

As mentioned in multiple other discussions and issues, it would be great if the built-in Share ChatBot option in the main Flowise repo had easy overrides to:

• Change the Title Color Background
• Change the Font
• Change the "Powered By" text

To support this customizability, I get that these options need to be exposed in the standard FlowiseChatEmbed library. If someone were to submit a PR to this repo with these options, would you be okay accepting them into the main repo?

References: https://github.com/FlowiseAI/Flowise/discussions/626 https://github.com/FlowiseAI/Flowise/discussions/1351 https://github.com/FlowiseAI/Flowise/discussions/1515

[dkindlund]

^ Maybe @HenryHengZJ and @Jaredude can comment on this as well, since I don't know if @automaton82 is the original repo maintainer of FlowiseChatEmbed.

[Jaredude]

@YAYJAY you can modify the title color:

theme: {
    button: {
        backgroundColor: "<any-color>" // <- update this
    }
}

Echoing @HenryHengZJ's prior comment. There might be some misunderstanding about how to implement this. This change is purely on the client side and doesn't require custom css or cloning the repo. For example:

This is using the React version, but the pure JS would be identical. Changing the header is just a matter of changing the button.backgroundColor. In this case, I've changed it to 'pink'. This is how everything shows on the webpage:

If you need to have the header color different than the button color, that would require modifying component source code. And in the flowise share bot popup, there is no option to change the button color, but it doesn't seem like either of those are at hand here.

@YAYJAY I hope that clarifies things. One Flowise server can host multiple bots, all of which have different themes as defined by configuring the theme options.

[YAYJAY]

@Jaredude Thank you. for @HenryHengZJ also. To add further clarification to my use cases (plural)

Scenario 1. I use an existing widget, and it provides a bunch of different tools that are in use by my customers. The Widget already has Calendar booking, Forms, Texting, Knowledge Base, Support Chat, and also has support for iFrame which is how I deploy AI Chatbots.

The ability to iFrame anything into the Widget is a single URL

Scenario 2. - WordPress iFrame. I build business directories, and the directory is already using the Popup Widget position and has an iFrame bot in it for the directory. Then an in page iFrame is also enabled by a single URL in the WordPress module that the business directory supports. Note, this page has two iFramed Bots. One for the directory and one for the specific business listing we are on. There are potentially hundreds of iFrame bots on this one directory.

Scenario 3. - GoHighLevel CRM Custom Menu Links The popular CRM product call GHL has an ability to provide what looks like a inbuilt addon to the CRM product via something called a Custom Menu Link. It only allows a single iFrame URL and I have no control to add code snippets with all the configuration overrides. And in this case there is already a popup support widget for the CRM.

In all these scenarios, and more, I can only specify a single iFrame URL not use a custom deployed code snippet to deploy a popup widget.

I am no-code capable, though I did figure out how to deploy ChatEmbed following some instructions to remove the PoweredBy, however, with all customers needing a different color title, I would need to somehow deploy an instance of ChatEmbed for all of them with a different default color.

I would prefer to not even have to deploy ChatEmbed separately at all. All I need is for there to be a color selector on the Title like there is for the NINE other color selectors on the default Share Chatflow.

I'm not sure I understand the implications of introducing this feature. It seems simple to me that if you can offer 9 other color config selectors for the Chatflow, why can't we add a 10th? Please. :)

As @dkindlund said, would you be open to having someone else make the needed changes and would you accept them into the main branch so we can simplify my life, and maybe @dkindlund and probably others. If so, who can I pay to make that change please?

Thanks so much for building a very cool product, maintaining the repo, and engaging with us non-developers that want to use your product. Much appreciated.

[HenryHengZJ]

assigned @0xi4o to take a look!

[YAYJAY]

Yay @0xi4o. go go go! Thank you!