# 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 `colors` parameter

### Method 2: `colors` Parameter During Initialization

Pass colors through the `colors` parameter during widget initialization:

```javascript
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:

```javascript
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:

```javascript
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:

```json
{
  "widget_buttons_class": "GENERAL_CLASS_NAME"
}
```

**Class for specific button:**

In the button object, specify:

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

Then add CSS styles on your website:

```css
.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

---

## Related Articles

- [What is a widget](/en/channels/explanation/what-is-widget.md)
- [Connect widget to website](/en/channels/how-to/setup-widget-on-website.md)
- [Configure widget in Settings](/en/channels/how-to/configure-widget-settings.md)
- [Widget JavaScript API](/en/channels/explanation/widget-javascript-api.md)