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

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

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

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

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

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

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

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: Зміна під час роботи

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

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 значення:

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

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

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

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

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

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

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

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

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

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

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

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

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

Обмеження

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

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

• Що таке віджет
• Підключення віджету на сайт
• Налаштування віджету в Налаштування
• JavaScript API для керування віджетом