How to Configure Styles and Scripts?

This page lets you set chat message colours by author (no CSS knowledge needed) and 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 CSS and JavaScript as an advanced area: mistakes affect all operators.

When You'll Need This

Operators confuse their own messages, colleagues’ messages, client messages and Copilot suggestions in the chat feed — use message colours.
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)

A warning that the section is for advanced users.
Three accordions. The first, Chat message colours, is open right away. Global CSS and JavaScript (Operator Helper widget) are collapsed by default so the editors are not opened by mistake.
Inside the CSS and JavaScript accordions: 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

Open Settings (/settings-page).
In the sidebar, under operator panel Settings, open Global style editor (or go to /settings-page/op-settings/styles-scripts).

2. Set Chat Message Colours

The Chat message colours accordion sets the background colour of messages in the chat feed for four authors:

Row	Which messages
My messages	Messages written by the person viewing the chat.
Other operators	Messages from other operators and supervisors in this chat, and AI agent replies. For someone only viewing the chat (for example, a supervisor who has not written), every operator.
Client	Client messages (in group chats, group members).
Copilot	Copilot AI suggestions to the operator, including the collapsed row. The client does not see them.

In a row, pick a colour with the swatch picker or type a #RRGGBB code in the field next to it (the # is optional, any case). An invalid code is not saved — the field returns to the previous value.
A sample message in that colour appears on the right.
To return a row to the standard look, click Reset. An empty field also means “Default”.
Click Save at the top of the page.

Good to know:

Text colour is picked automatically: black on light backgrounds, white on dark ones.
Dark theme: the background is softened (a tint of the chosen colour on the dark background) and the text stays light.
Not set — messages of that type look as before. If no colour is set, the feed does not change.
Internal notes (they have their own colour), system messages and emails from other tickets are not recoloured. Photos, quotes and other nested blocks inside a message keep the theme colours.
Other operators see the change after reloading the operator panel.

3. Edit CSS

Expand the Global CSS accordion.
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).
After saving, refresh the operator line / panel view and check the result.

4. Edit JavaScript

Expand the JavaScript (Operator Helper widget) accordion.
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.
Do not paste random code from the internet — it runs for all operators.

5. Save

Click Save at the top of the operator settings page.
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.