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

На цій сторінці можна додати власний CSS та JavaScript для операторської панелі, щоб підлаштувати вигляд під бренд клієнта та, за потреби, підключити код віджета (наприклад, для екрана «Помічник оператора»). Це розділ для досвідчених користувачів: помилки впливають на усіх операторів.

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

  • Потрібно підлаштувати кольори, шрифти чи верстку операторської панелі під корпоративний стиль.
  • У проєкті передбачено скрипт ініціалізації віджета для екрана помічника — відповідний код зберігається тут.
  • Потрібно точково змінити видимість або відступи через CSS, розуміючи, що селектори можуть змінитися після оновлень продукту.

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

  • Хто має правити: адміністратор або супервайзер із правом зберігати налаштування операторської панелі, бажано разом із фахівцем, який знає CSS/JS.
  • Ризик: некоректний CSS або JavaScript може зламати інтерфейс для всіх або ускладнити підтримку. Спочатку перевіряйте на тестовому (staging) інстансі.
  • CSS: застосовується в контексті операторської панелі (глобальні стилі). Краще орієнтуватися на змінні теми (наприклад, Prime --p-*) і підбирати селектори через інструменти розробника (F12). Частина системних правил має вищу специфічність — інколи потрібні точніші селектори або обережне використання !important.
  • JavaScript: це поле насамперед для клієнтського коду у браузері оператора (типово — ініціалізація віджета для екрана «Помічник оператора»). Це не сценарії ботів у Constructor і не Action Jail на Engine.
  • Збереження: зміни зберігаються кнопкою «Зберегти» у верхній частині зони налаштувань операторської панелі (спільно з іншими полями op-settings), а не окремою кнопкою лише в цьому блоці.

Що ви побачите в інтерфейсі (актуальна версія екрана)

  1. Попередження, що розділ для досвідчених користувачів.
  2. Два акордеони — «Глобальні CSS-стилі» та «JavaScript (віджет-помічник)» — за замовчуванням згорнуті, щоб випадково не редагувати код.
  3. У кожному акордеоні: короткий текст-пояснення, редактор коду, далі блок готових фрагментів із кнопкою «Копіювати» (текст можна також виділити вручну), потім підказка «Звідки взяти селектори» / «Звідки взяти код».

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

1. Відкрити стилі та скрипти

  1. Перейдіть у модуль Налаштування (/settings-page).
  2. У бічному меню в блоці налаштувань операторської панелі оберіть «Глобальний Редактор стилів» або перейдіть за адресою /settings-page/op-settings/styles-scripts.

2. Редагувати CSS

  1. Розгорніть акордеон «Глобальні CSS-стилі».
  2. Відредагуйте CSS у редакторі. За потреби скористайтеся прикладами нижче (кнопка «Копіювати»): кольори теми, фон лівої колонки списку діалогів, шрифт, смуга зміни ширини колонок — приклади узгоджені з типовою розміткою продукту.
  3. Після збереження оновіть сторінку лінії діалогів і перевірте результат.

3. Редагувати JavaScript

  1. Розгорніть акордеон «JavaScript (віджет-помічник)».
  2. Вставте або напишіть код згідно з інструкцією з інтеграції / віджета. У прикладах можуть бути перевірка через console.log або безпечна мітка на <html> для ваших CSS-селекторів.
  3. Не вставляйте випадковий код з інтернету — він виконується для всіх операторів.

4. Зберегти

  1. Натисніть «Зберегти» у верхній частині сторінки налаштувань операторської панелі.
  2. Дочекайтеся повідомлення про успіх. Якщо копіювання в буфер не вдалося, виділіть текст у сірому блоці та скопіюйте вручну.

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

  • CSS: правила зберігаються в налаштуваннях операторської панелі та застосовуються в інтерфейсі оператора під час завантаження стилів (за потреби оновіть сторінку лінії діалогів).
  • JavaScript: код зберігається в налаштуваннях і використовується там, де продукт очікує це поле (зокрема сценарії з віджетом на відповідному екрані), а не як «довільний скрипт на будь-якій сторінці».

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

  • Відкрийте операторську панель / лінію діалогів і перевірте зміни для CSS.
  • Для перевірки JS відкрийте консоль у DevTools, якщо у фрагменті передбачено лог або ініціалізацію.
  • Якщо щось зламалось, відкотіть зміни на тестовому інстансі та зверніться до підтримки або інтегратора.

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

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

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