Change the background color of my Watson Virtual Agent

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);