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

Method 1: Visual Constructor (Widget Demo)

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

Method 2: color Parameter During Initialization

Pass colors through the color parameter during widget initialization:

kw('init', {
  bot_id: 1,
  color: {
    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,
  color: {
    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