How to Customize Widget Colors

ConnectiveOne widget allows full customization of the color scheme to match your website branding. Colors can be configured through a visual constructor or programmatically through JavaScript.

Color Configuration Methods

Go to Widget Demo (/widget/{locale}/?bot-id={bot_id})
Configure colors through the visual interface
Copy the generated code with the colors parameter

Method 2: `colors` Parameter During Initialization

Pass colors through the colors parameter during widget initialization:

kw('init', {
  bot_id: 1,
  colors: {
    header: {
      bg: "#5B6BFF",
      text: "#ffffff",
      border: "#E4E4E4",
      dot: "#B8A6EE"
    },
    device: {
      container: "#594DA0",
      bg: "#734FE1",
      border: "#E4E4E4",
      dot: "#B8A6EE"
    },
    userInput: {
      bg: "#594DA0",
      text: "#FFFFFF",
      border: "transparent"
    },
    keyboardButton: {
      border: "#BB0044",
      bg: "#BB0044",
      text: "#FFFFFF"
    },
    inlineKeyboardButton: {
      bg: "#BB0044"
    }
  }
});

Method 3: Change During Operation

Change colors during widget operation:

kw_event('kwcolor', {
  header: {
    bg: "#FF0000",
    text: "#ffffff"
  }
});

Customizable Elements

header (chat header)

bg — header background
text — text color
border — border color
dot — indicator color

device (device frame)

container — container background
bg — frame background
border — border color
dot — indicator color

userInput (input field)

bg — field background
text — text color
border — border color
icon_color — icon color

keyboardButton (keyboard buttons)

bg — button background
border — border color
text — text color

inlineKeyboardButton (inline buttons)

bg — button background
text — text color
bgc — hover color

sentMessage (sent messages)

bg — message background
text — text color

receivedMessage (received messages)

bg — message background
text — text color

Using Gradients

You can use gradients and other CSS values:

kw('init', {
  bot_id: 1,
  colors: {
    header: {
      bg: "linear-gradient(130deg, #734FE1, #D14EE0)"
    }
  }
});

All CSS values are supported: hex, rgb, rgba, linear-gradient, etc.

Customization Through CSS Classes

You can add CSS classes to buttons for additional styling:

General class for all buttons:

In the "Message with keyboard" block, specify:

{
  "widget_buttons_class": "GENERAL_CLASS_NAME"
}

Class for specific button:

In the button object, specify:

{
  "text": "Button",
  "json": {
    "widget_button_class": "BUTTON_CLASS_NAME"
  }
}

Then add CSS styles on your website:

.GENERAL_CLASS_NAME {
  border-radius: 10px;
  font-weight: bold;
}

.BUTTON_CLASS_NAME {
  background-color: #FF0000;
}

Limitations

If displayMode === 'frame', colors are automatically removed from initialization parameters
If colors are not specified, default values are used
Colors are merged with existing ones through merge, so you can change only part of the colors