@wsocket-io/support

Embeddable live chat support widget for wSocket.

Installation

npm / yarn / pnpm

npm install @wsocket-io/support

CDN (script tag)

<script
  src="https://cdn.jsdelivr.net/npm/@wsocket-io/support/dist/support.min.js"
  data-server="https://node00.wsocket.online"
  data-org="YOUR_ORG_ID"
  data-key="YOUR_API_KEY"
></script>

Usage

Script Tag (CDN)

Drop the script tag in your HTML and the widget auto-initializes:

<script
  src="https://cdn.jsdelivr.net/npm/@wsocket-io/support/dist/support.min.js"
  data-server="https://node00.wsocket.online"
  data-org="your-org-id"
  data-key="your-api-key"
  data-color="#6366f1"
  data-position="right"
  data-locale="en"
  data-title="Support"
></script>

Script Tag Attributes

| Attribute | Required | Default | Description | | --------------- | -------- | -------------------------------- | ----------------------- | | data-server | No | https://node00.wsocket.online | wSocket server URL | | data-org | Yes | — | Your Organization ID | | data-key | No | — | API key for auth | | data-color | No | #6366f1 | Primary theme color | | data-position | No | right | Widget position (left / right) | | data-locale | No | auto-detect | Language (en, pt, es) | | data-title | No | Support | Chat window header title |

Programmatic (ES Module)

import { SupportWidget } from '@wsocket-io/support';

const widget = new SupportWidget({
  serverUrl: 'https://node00.wsocket.online',
  orgId: 'your-org-id',
  apiKey: 'your-api-key',
  theme: { primaryColor: '#6366f1' },
  position: 'right',
  locale: 'en',
  headerTitle: 'Support',
});

widget.mount();

Next.js / React

'use client';

import { useEffect } from 'react';
import { SupportWidget } from '@wsocket-io/support';

export function SupportChat() {
  useEffect(() => {
    const widget = new SupportWidget({
      serverUrl: 'https://node00.wsocket.online',
      orgId: 'your-org-id',
      apiKey: 'your-api-key',
    });

    widget.mount();

    return () => widget.destroy();
  }, []);

  return null;
}

Theming

Customize colors and appearance via the theme option:

const widget = new SupportWidget({
  serverUrl: '...',
  orgId: '...',
  apiKey: '...',
  theme: {
    primaryColor: '#6366f1',
    primaryHover: '#4f46e5',
    textOnPrimary: '#ffffff',
    bgColor: '#ffffff',
    textColor: '#1f2937',
    visitorBubble: '#6366f1',
    agentBubble: '#f3f4f6',
    borderRadius: '16px',
  },
});

Localization

Built-in support for English, Portuguese, and Spanish. Pass locale to override auto-detection:

const widget = new SupportWidget({
  serverUrl: '...',
  orgId: '...',
  apiKey: '...',
  locale: 'pt', // 'en' | 'pt' | 'es'
});

API

SupportWidget

| Method | Description | | ----------- | ----------------------------------- | | mount(el?) | Mount the widget (default: document.body) | | destroy() | Remove widget and disconnect WebSocket |

Exports

| Export | Description | | --------------- | ------------------------------ | | SupportWidget | Main widget class | | SupportWidgetConfig | Config type | | WidgetTheme | Theme customization type | | WidgetStrings | i18n strings type | | DEFAULT_THEME | Default theme object | | getStrings | Get strings for a locale | | detectLocale | Auto-detect browser locale |

License

MIT — wsocket.io