Як налаштувати стилі та скрипти?

Налаштування стилів та скриптів дозволяє додати кастомні CSS стилі та JavaScript код для адаптації вигляду та поведінки операторської панелі під корпоративний стиль клієнта.

Коли знадобиться

  • Потрібно адаптувати вигляд операторської панелі під корпоративний стиль клієнта (кольори, шрифти, розміри).
  • Треба додати кастомну функціональність через JavaScript код.
  • Потрібно змінити стилі окремих елементів інтерфейсу.

Що важливо знати

  • CSS стилі — додаються через ін'єкцію в DOM та застосовуються до всієї операторської панелі.
  • JavaScript скрипти — виконуються в контексті операторської панелі та можуть взаємодіяти з інтерфейсом.
  • Специфічність селекторів — деякі системні стилі можуть мати вищу специфічність, тому ваші стилі можуть не застосовуватися без !important.
  • Безпека — будьте обережні з JavaScript кодом, оскільки він виконується в контексті системи.

Перед початком

  • Ви увійшли в систему з правами адміністратора або супервайзера.
  • Ви маєте дозвіл на збереження налаштувань (canSave).
  • Ви маєте базові знання CSS та JavaScript (рекомендовано).

Покрокова інструкція

1. Відкрити налаштування стилів та скриптів

  1. Перейдіть до модуля Налаштування через меню або безпосередньо за адресою /settings-page.
  2. У бічному меню знайдіть розділ "Налаштування" та розгорніть його.
  3. Натисніть на пункт "Стилі та скрипти" (/settings-page/op-settings/styles-scripts).

2. Додати CSS стилі

  1. У секції "CSS стилі" знайдіть редактор коду.
  2. Введіть ваш CSS код у редактор.
  3. Приклад CSS коду:
    .operator-panel {
  --primary-color: #7360f2;
  --background-color: #f5f5f5;
}

.chat-message {
  border-radius: 8px;
  padding: 12px;
}
  4. Редактор має підсвітку синтаксису для кращої читабельності.

3. Додати JavaScript скрипти

  1. У секції "JavaScript скрипти" знайдіть редактор коду.
  2. Введіть ваш JavaScript код у редактор.
  3. Приклад JavaScript коду:
    // Додати кастомну функціональність
document.addEventListener('DOMContentLoaded', function() {
  console.log('Custom script loaded');
  // Ваш код тут
});
  4. Будьте обережні з виконанням скриптів — вони виконуються в контексті системи.

4. Перевірити синтаксис

  1. Система може автоматично перевіряти синтаксис CSS та JavaScript (якщо реалізовано).
  2. Якщо є синтаксичні помилки, вони будуть підсвічені в редакторі.
  3. Виправте помилки перед збереженням.

5. Зберегти налаштування

  1. Перевірте всі внесені зміни.
  2. Натисніть кнопку "Зберегти" у верхній частині сторінки.
  3. Дочекайтеся повідомлення про успішне збереження.
  4. Якщо є синтаксичні помилки, виправте їх та спробуйте зберегти знову.

Що відбувається після

Стилі та скрипти застосовуються до операторської панелі:

  • CSS стилі ін'єктуються в DOM та застосовуються до інтерфейсу.
  • JavaScript скрипти виконуються при завантаженні операторської панелі.
  • Зміни відображаються для всіх операторів у системі.

Як переконатися, що все вдалось

  • Відкрийте операторську панель та перевірте, що стилі застосовані.
  • Перевірте консоль браузера на наявність помилок виконання JavaScript.
  • Перевірте, що кастомна функціональність працює коректно.

Пов'язані матеріали

Важливі примітки

  • ⚠️ Безпека: Будьте обережні з JavaScript кодом — він виконується в контексті системи та може впливати на роботу інших користувачів.
  • 💡 Тестування: Рекомендується спочатку протестувати стилі та скрипти на тестовому середовищі перед застосуванням на production.
  • 🔄 Оновлення: При оновленні системи кастомні стилі та скрипти можуть потребувати оновлення через зміни в структурі інтерфейсу.