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

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

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

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

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

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

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

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

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

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

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

2. Задати кольори повідомлень у чаті

Акордеон «Кольори повідомлень у чаті» задає колір фону повідомлень у стрічці чату для чотирьох авторів:

Рядок	Які повідомлення
Мої повідомлення	Повідомлення, які написав той, хто зараз дивиться чат.
Інші оператори	Повідомлення інших операторів і супервізорів у цьому чаті, а також відповіді AI-агента. Для того, хто лише переглядає чат (наприклад, супервізора, який не писав), — усі оператори.
Клієнт	Повідомлення клієнта (у групових чатах — учасників групи).
Copilot	Підказки Copilot AI оператору, зокрема згорнутий рядок підказки. Клієнт їх не бачить.

У потрібному рядку оберіть колір кружком-пікером або введіть код #RRGGBB у поле поруч (можна без #, у будь-якому регістрі). Невірний код не зберігається — поле повертає попереднє значення.
Праворуч з'явиться зразок повідомлення з цим кольором.
Щоб повернути стандартний вигляд для рядка, натисніть «Скинути». Порожнє поле теж означає «Стандартний».
Натисніть «Зберегти» вгорі сторінки.

Що варто знати:

Колір тексту підбирається автоматично: на світлому фоні — чорний, на темному — білий.
Темна тема: фон приглушується (до тонованого відтінку обраного кольору на темному фоні), текст лишається світлим.
Не задано — повідомлення цього типу виглядають як раніше. Якщо не задано жодного кольору, стрічка не змінюється.
Внутрішні нотатки (свій колір), системні повідомлення та листи з інших звернень не перефарбовуються. Фото, цитати й інші вкладені блоки всередині повідомлення лишаються в кольорах теми.
Інші оператори побачать зміни після оновлення сторінки операторської панелі.

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

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

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

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

5. Зберегти

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

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

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

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

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

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

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

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