# Як налаштувати стилі та скрипти? На цій сторінці можна додати **власний 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` або безпечна мітка на `` для ваших CSS-селекторів. 3. Не вставляйте випадковий код з інтернету — він виконується для **всіх операторів**. ### 4. Зберегти 1. Натисніть **«Зберегти»** у **верхній** частині сторінки налаштувань операторської панелі. 2. Дочекайтеся повідомлення про успіх. Якщо копіювання в буфер не вдалося, виділіть текст у сірому блоці та скопіюйте вручну. ## Що відбувається після - **CSS:** правила зберігаються в налаштуваннях операторської панелі та застосовуються в інтерфейсі оператора під час завантаження стилів (за потреби оновіть сторінку лінії діалогів). - **JavaScript:** код зберігається в налаштуваннях і використовується там, де продукт очікує це поле (зокрема сценарії з віджетом на відповідному екрані), а не як «довільний скрипт на будь-якій сторінці». ## Як переконатися, що все вдалось - Відкрийте **операторську панель** / **лінію діалогів** і перевірте зміни для CSS. - Для перевірки JS відкрийте **консоль** у DevTools, якщо у фрагменті передбачено лог або ініціалізацію. - Якщо щось зламалось, відкотіть зміни на тестовому інстансі та зверніться до підтримки або інтегратора. ## Пов'язані матеріали - [Налаштувати операторів](/uk/settings/how-to/configure-operators.md) - [Налаштувати файли](/uk/settings/how-to/configure-files.md) ## Важливі примітки - ⚠️ **Безпека:** кастомний JavaScript виконується в контексті панелі й може вплинути на всіх операторів. - 💡 **Тестування:** спочатку перевіряйте на **тестовому** середовищі, потім на production. - 🔄 **Оновлення:** після оновлення інтерфейсу кастомні селектори можуть потребувати перегляду.