# Як кастомізувати кольори віджету

Віджет ConnectiveOne дозволяє повністю кастомізувати кольорову схему для відповідності брендингу вашого сайту. Кольори можна налаштувати через візуальний конструктор або програмно через JavaScript.

## Способи налаштування кольорів

### Спосіб 1: Візуальний конструктор (Widget Demo)

1. Перейдіть в **Widget Demo** (`/widget/{locale}/?bot-id={bot_id}`)
2. Налаштуйте кольори через візуальний інтерфейс
3. Скопіюйте згенерований код з параметром `colors`

### Спосіб 2: Параметр `colors` при ініціалізації

Передайте кольори через параметр `colors` при ініціалізації віджету:

```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"
    }
  }
});
```

### Спосіб 3: Зміна під час роботи

Змініть кольори під час роботи віджету:

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

## Елементи, які можна кастомізувати

### header (шапка чату)
- `bg` — фон шапки
- `text` — колір тексту
- `border` — колір рамки
- `dot` — колір індикатора

### device (рамка пристрою)
- `container` — фон контейнера
- `bg` — фон рамки
- `border` — колір рамки
- `dot` — колір індикатора

### userInput (поле вводу)
- `bg` — фон поля
- `text` — колір тексту
- `border` — колір рамки
- `icon_color` — колір іконки

### keyboardButton (кнопки клавіатури)
- `bg` — фон кнопки
- `border` — колір рамки
- `text` — колір тексту

### inlineKeyboardButton (inline кнопки)
- `bg` — фон кнопки
- `text` — колір тексту
- `bgc` — колір при наведенні

### sentMessage (відправлені повідомлення)
- `bg` — фон повідомлення
- `text` — колір тексту

### receivedMessage (отримані повідомлення)
- `bg` — фон повідомлення
- `text` — колір тексту

## Використання градієнтів

Ви можете використовувати градієнти та інші CSS значення:

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

Підтримуються всі CSS значення: hex, rgb, rgba, linear-gradient тощо.

## Кастомізація через CSS класи

Ви можете додати CSS класи до кнопок для додаткової стилізації:

**Загальний клас для всіх кнопок:**

В блоці "Повідомлення з клавіатурою" вкажіть:

```json
{
  "widget_buttons_class": "НАЗВА_ЗАГАЛЬНОГО_КЛАСУ"
}
```

**Клас для конкретної кнопки:**

В об'єкті кнопки вкажіть:

```json
{
  "text": "Кнопка",
  "json": {
    "widget_button_class": "НАЗВА_КЛАСУ_КНОПКИ"
  }
}
```

Потім додайте CSS стилі на вашому сайті:

```css
.НАЗВА_ЗАГАЛЬНОГО_КЛАСУ {
  border-radius: 10px;
  font-weight: bold;
}

.НАЗВА_КЛАСУ_КНОПКИ {
  background-color: #FF0000;
}
```

## Обмеження

- Якщо `displayMode === 'frame'`, кольори автоматично видаляються з параметрів ініціалізації
- Якщо кольори не вказані, використовуються значення за замовчуванням
- Кольори об'єднуються з існуючими через `merge`, тому можна змінити лише частину кольорів

## Пов'язані статті

- [Що таке віджет](/uk/channels/explanation/what-is-widget.md)
- [Підключення віджету на сайт](/uk/channels/how-to/setup-widget-on-website.md)
- [Налаштування віджету в Налаштування](/uk/channels/how-to/configure-widget-settings.md)
- [JavaScript API для керування віджетом](/uk/channels/explanation/widget-javascript-api.md)