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

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

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

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

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

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

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

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

Спосіб 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,
  color: {
    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, тому можна змінити лише частину кольорів

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