PLuG widget customization

There are three ways to customize the PLuG widget. They can be combined: SDK values take priority over dashboard settings, and CSS overrides both.

1. Dashboard settings — No-code configuration in DevRev Settings.

2. SDK initialization — Programmatic options passed to plugSDK.init().

3. CSS customization — Full brand styling via a custom stylesheet.

1. Dashboard settings

Go to Settings > PLuG & Portal > PLuG Chat.

Configuration tab

Styling tab

Layout tab

Conversations tab

Language & Region tab

2. SDK initialization

Pass options to plugSDK.init(). These override any matching settings configured in the dashboard.

window.plugSDK.init({
  app_id: '<your_unique_app_id>',          // Required
  theme: 'light',                           // 'light' | 'dark'
  accent_color: '#0047FF',                  // Hex color
  primary_text_color: '#111111',            // Hex color
  enable_default_launcher: true,            // Show floating launcher button
  custom_launcher_selector: '#my-trigger',  // CSS selector for custom trigger
  widget_alignment: 'right',               // 'left' | 'right'
  spacing: {
    bottom: '20px',                         // Distance from bottom of screen
    side: '20px',                           // Distance from side of screen
  },
  disable_plug_chat_window: false,          // Set true to use search-only mode
  session_token: '<backend_generated_token>', // Identifies logged-in users
  enable_session_recording: false,          // Enable session recording
  session_recording_key: '<key>',           // Key for session recording
  send_button_disable_duration: 5000,       // ms; controls one-message-at-a-time timeout
});

Parameter reference

Priority: Values passed to init() override dashboard settings. CSS overrides both.

3. CSS customization (deep brand styling)

For full brand alignment — fonts, component shapes, spacing, etc — you can use Computer or upload a custom stylesheet manually. Both options are available from Settings > PLuG & Portal > PLuG Chat > Styling > Custom stylesheet.

Option A — Use Computer (recommended)

Computer has a dedicated skill for PLuG theming. Describe your brand or share a screenshot, and Computer generates a theme, gives you a live preview URL to review, and can re-upload and publish directly. No manual file handling needed.

*"I want to redesign PLuG to match our brand. Here's our website: https://yourcompany.com"*

*"Redesign PLuG to match this screenshot."* [attach screenshot]

Iterate conversationally until it looks right, then tell Computer to publish. Nothing goes live until you approve it.

Option B — Download the template and edit manually

1. Go to Settings > PLuG & Portal > PLuG Chat > Styling > Custom stylesheet.

2. Click Download CSS template to get all available selectors with the BEM-style prefix.

3. Edit the file to match your brand. Override only the properties you need.

4. Upload it and click Preview to see changes live before publishing.

5. Click Save and Publish.

What you can style

The class system covers all PLuG surfaces:

Buttons

Cards

Lists

Tabs

SnapKit Buttons

SnapKit Cards

CSS limits and behavior

• Stylesheets are size-limited for performance. If your file exceeds the limit, PLuG falls back to defaults and shows an error in Settings.

• Override only the properties you need. Avoid re-declaring the full default stylesheet.

• Customizations apply per chat widget.

• CSS overrides do not affect the Portal, only the PLuG widget.
  

One message at a time

When enabled, PLuG prevents users from sending a second message while the CX Agent is still responding. This avoids duplicate conversations and prevents automations from firing more than once.

How it works:

PLuG cannot always know upfront whether the conversation will go to a CX Agent or a human. So:

• On the first message, the send button is disabled for up to 5 seconds ( This is customisable at org level ) while PLuG waits to learn who is responding.

• If the response comes from a CX Agent, disabling becomes intelligent. The button stays disabled only while the agent is actively streaming, then re-enables automatically.

• If the other side is a human agent, disabling stops entirely.

The input field remains active throughout so users can keep composing.

Toggle: Settings > PLuG & Portal > PLuG Chat > Conversations > One message at a time — on by default.

CX Agent response streaming

The CX Agent streams responses token-by-token so users see answers appearing in real time. Before its first tool call, the agent sends a brief personalised acknowledgement, which eliminates the silent wait.

Streaming is off by default for all organisations on web. To turn it ON pass enable_streaming parameter while initialising the SDK and make sure to turn ON the streaming for that respective agent via Agent studio.

window.plugSDK.init({
    ...,
    enable_streaming: true,
  });

Streaming behaviour is configurable per agent via Agent Studio.

On mobile SDKs (iOS / Android), streaming support has been added. Refer to the iOS and Android SDK reference pages for the current syntax.

Related articles

• PLuG Web SDK — Installation

• PLuG Web SDK — Methods

• PLuG Web SDK — User identity

• Install PLuG search

• Customise PLuG search

• PLuG Nudges