Change the background color of my Watson Virtual Agent - ibm-watson

Question

I've created a bot using Watson Virtual Agent, and I embedded it in my website. Can I change the background color of the chat window so that it matches the other colors on my site?

Answer 1

You can certainly change the colors of the chat widget to match your brand.
In fact, every color that is used in the chat widget is configurable.
To choose your own colors, you can supply your own colors as part of your config object you pass to the IBMChat.init function.
The example below includes the default colors, but replace the hex codes as you see fit.
var config = {};
//set your other config params
config.styles = {
background: '#3d3d3d',
//the main background color
accentBackground: '#AF6EE8',
/*the background for "accent" elements.
These are the attention grabbing elements like a selected button,
or a loading spinner*/
accentText: '#ffffff',
//the text color for the accentBackground
text: '#ffffff',
//default text color
link: '#ffffff',
/*default link color... this should be a color that works both
with the "background" color and the "secondaryBackground" color.*/
secondaryBackground: '#464646',
/*this is the background for elements that get some emphasis,
but not as much as "accent" elements. e.g. An unselected button
or a container box for a widget.*/
secondaryText: '#f7f7f7',
inputBackground: '#464646',
//background color for your form elements, including the main chat input
inputText: '#f7f7f7'
}
IBMChat.init(config);