How to Configure Styles and Scripts?

Configuring styles and scripts allows you to add custom CSS styles and JavaScript code to adapt the appearance and behavior of the operator panel to match the client's corporate style.

When You'll Need This

  • You need to adapt the operator panel appearance to match the client's corporate style (colors, fonts, sizes).
  • You need to add custom functionality through JavaScript code.
  • You need to change styles of individual interface elements.

What's Important to Know

  • CSS styles — added through DOM injection and applied to the entire operator panel.
  • JavaScript scripts — executed in the operator panel context and can interact with the interface.
  • Selector specificity — some system styles may have higher specificity, so your styles may not apply without !important.
  • Security — be careful with JavaScript code, as it is executed in the system context.

Before You Start

  • You are logged in with administrator or supervisor rights.
  • You have permission to save settings (canSave).
  • You have basic knowledge of CSS and JavaScript (recommended).

Step-by-Step Instructions

1. Open Styles and Scripts Settings

  1. Go to the Settings module through the menu or directly at /settings-page.
  2. In the side menu, find the "Settings" section and expand it.
  3. Click on "Styles and Scripts" (/settings-page/op-settings/styles-scripts).

2. Add CSS Styles

  1. In the "CSS Styles" section, find the code editor.
  2. Enter your CSS code in the editor.
  3. CSS code example:
    .operator-panel {
  --primary-color: #7360f2;
  --background-color: #f5f5f5;
}

.chat-message {
  border-radius: 8px;
  padding: 12px;
}
  4. The editor has syntax highlighting for better readability.

3. Add JavaScript Scripts

  1. In the "JavaScript Scripts" section, find the code editor.
  2. Enter your JavaScript code in the editor.
  3. JavaScript code example:
    // Add custom functionality
document.addEventListener('DOMContentLoaded', function() {
  console.log('Custom script loaded');
  // Your code here
});
  4. Be careful with script execution — they are executed in the system context.

4. Check Syntax

  1. The system may automatically check CSS and JavaScript syntax (if implemented).
  2. If there are syntax errors, they will be highlighted in the editor.
  3. Fix errors before saving.

5. Save Settings

  1. Verify all changes made.
  2. Click the "Save" button at the top of the page.
  3. Wait for a message about successful saving.
  4. If there are syntax errors, fix them and try saving again.

What Happens Next

Styles and scripts are applied to the operator panel:

  • CSS styles are injected into the DOM and applied to the interface.
  • JavaScript scripts are executed when the operator panel loads.
  • Changes are displayed for all operators in the system.

How to Verify Everything Worked

  • Open the operator panel and check that styles are applied.
  • Check the browser console for JavaScript execution errors.
  • Check that custom functionality works correctly.

Important Notes

  • ⚠️ Security: Be careful with JavaScript code — it is executed in the system context and can affect the work of other users.
  • 💡 Testing: It's recommended to test styles and scripts on a test environment first before applying to production.
  • 🔄 Updates: When updating the system, custom styles and scripts may require updates due to interface structure changes.