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 <html> 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.

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.