# How to Configure Styles and Scripts? This page lets you add **custom CSS** and **JavaScript** for the operator panel so the UI can match the client’s branding and, where supported, load helper widget code. Treat it as an **advanced** area: mistakes affect **all operators**. ## When You'll Need This - You need the operator panel to match corporate colors, fonts, or layout. - Your project uses a **widget script** for the Operator Helper screen (initialization code is stored here). - You need to tweak visibility or spacing of specific UI areas (via CSS), understanding that selectors may change in future releases. ## What's Important to Know - **Who should edit:** Administrators or supervisors with permission to save operator panel settings, ideally together with someone who knows CSS/JS. - **Risk:** Invalid CSS or JavaScript can break the panel for everyone or make support harder. Test on a **staging** instance first. - **CSS:** Applied in the operator panel context (global styling). Prefer **theme variables** (e.g. Prime `--p-*`) and inspect the live DOM with **Developer tools (F12)** to pick selectors. Some system rules have higher **specificity** — you may need more specific selectors or careful use of `!important`. - **JavaScript:** This field is primarily for **client-side code** used in the operator app (e.g. **Operator Helper** widget initialization). It is **not** the same as bot scenarios in Constructor or **Action Jail** on the Engine. - **Saving:** Changes are saved with the **Save** button at the **top** of the operator settings area (shared with other op-settings fields), not a separate save only inside this screen. ## What You'll See in the Interface (current product UI) 1. A **warning** that the section is for advanced users. 2. Two **accordions** — **Global CSS** and **JavaScript (Operator Helper widget)** — **collapsed by default** so the editors are not opened by mistake. 3. Inside each accordion: a short explanation, the **code editor**, then **ready-to-paste examples** with a **Copy** button (and full text you can select manually), then hints on **where to get selectors** or **where to get script code** (support, frontend developer, widget documentation). ## Step-by-Step Instructions ### 1. Open Styles and Scripts 1. Open **Settings** (`/settings-page`). 2. In the sidebar, under operator panel **Settings**, open **Global style editor** (or go to `/settings-page/op-settings/styles-scripts`). ### 2. Edit CSS 1. Expand the **Global CSS** accordion. 2. Edit your CSS in the editor. Use the **Copy** buttons under **sample snippets** if useful (theme colors, chat list column, app font, column resize handle — examples match common layout classes in the product). 3. After saving, **refresh** the operator line / panel view and check the result. ### 3. Edit JavaScript 1. Expand the **JavaScript (Operator Helper widget)** accordion. 2. Paste or write code according to your **widget / integration** instructions. Sample snippets may include a console check or a safe `data-*` attribute on `` for your CSS hooks. 3. Do not paste random code from the internet — it runs for **all operators**. ### 4. Save 1. Click **Save** at the **top** of the operator settings page. 2. Wait for a successful save message. If copy-to-clipboard fails, select the example text in the grey box and copy manually. ## What Happens Next - **CSS:** Custom rules are stored in operator panel settings and applied in the operator UI when the panel loads the styles (refresh the dialog line if you do not see changes). - **JavaScript:** Stored in settings and used where the product expects this field (e.g. widget flow on the Operator Helper screen), not as arbitrary script on every unrelated page. ## How to Verify Everything Worked - Open the **operator panel** / **dialog line** and confirm visual changes for CSS. - Open **Developer tools → Console** for JavaScript checks if your snippet logs or initializes a widget. - If something breaks, revert the change on staging and contact support or your integration developer. ## Related Materials - [Configure operators](/en/settings/how-to/configure-operators.md) - [Configure files](/en/settings/how-to/configure-files.md) ## Important Notes - ⚠️ **Security:** Custom JavaScript runs in the operator context and can affect all users with access to the panel. - 💡 **Testing:** Always test on a **staging** instance before production. - 🔄 **Updates:** After product UI updates, custom selectors may need to be reviewed.