@cleverstack/dialer-widget

React SIP dialer widget for CleverStack Home, using a SIP server backend. Provides a customizable, embeddable softphone UI for web apps.

Install

npm install --save @cleverstack/dialer-widget

Usage

import { CSDialer } from "@cleverstack/dialer-widget";

function App() {
  return (
    <CSDialer
      apiKey="YOUR_API_KEY"
      user_id="USER_ID"
      authAPI="https://api.cleverstack.in"
      sipDomain="sip.cleverstack.in"
      wssServer="sip.cleverstack.in"
      wssPort={7443}
      open // optional, controls widget open state
      // ...other optional props (see below)
    />
  );
}

export default App;

Props

| Prop | Type | Required | Description | | ------------------ | ------ | -------- | ---------------------------------------------------- | | apiKey | string | Yes | API key for authentication | | user_id | string | Yes | User ID for SIP registration | | authAPI | string | Yes | Base URL for authentication API | | sipDomain | string | Yes | SIP domain (e.g. sip.cleverstack.in) | | wssServer | string | Yes | WebSocket server for SIP (e.g. sip.cleverstack.in) | | wssPort | number | No | WebSocket port (default: 7443) | | org | number | No | Organization ID | | type | string | No | Auth type (e.g. jwt) | | userStatus | string | No | User status (e.g. available) | | open | bool | No | Controls widget open state | | position | string | No | Position of the widget | | dimensions | object | No | Widget size (width/height) | | showFloatingIcon | bool | No | Show/hide floating icon | | isCallingEnabled | bool | No | Enable/disable calling | | extraButtons | array | No | Add extra buttons | | hideCloseButton | bool | No | Hide close button | | hideBorderRadius | bool | No | Remove border radius | | mode | string | No | Widget mode (e.g. conference) | | endCurrentCall | func | No | Callback to end call | | dialerControls | object | No | Custom dialer controls | | activeCampaign | object | No | Active campaign info |

Features

• SIP registration and call handling (using SIP.js)
• Modern, responsive UI (Material-UI)
• Audio device selection and management
• Call transfer, hold, mute, and DTMF support
• Customizable props for integration and theming
• Redux state management

Development

npm install
npm start
# Build for production
npm run build

License

License

MIT