dntel-voip-sdk

A lightweight and customizable contact/chat panel SDK built with React.
Easily embed a contact widget into any React application with built-in routing, Recoil state management, and API integration.

📦 Installation

npm install dntel-voip-sdk
# or
yarn add dntel-voip-sdk

Peer dependencies: Ensure the following libraries are installed in your host app:

npm install react react-dom recoil react-router-dom @tanstack/react-query

⚠️ Required Setup

1. Wrap your app with SDKProvider

Before using any component, wrap your application with the SDKProvider and pass the required config:

import { SDKProvider } from 'dntel-voip-sdk';
import 'dntel-voip-sdk/dist/index.css';

<SDKProvider
  config={{
    token: 'your-auth-token',
  }}
>
  {/* Your components here */}
</SDKProvider>;

2. Copy static icon assets

This SDK uses static icon assets (e.g., phone.svg). To ensure these work correctly, add the following postinstall script to your package.json:

"scripts": {
  "postinstall": "mkdir -p public/dntel-voip-sdk/icon && cp -r node_modules/dntel-voip-sdk/dist/public/icon/* public/dntel-voip-sdk/icon"
}

After installation, icons will be served from:

/public/dntel-voip-sdk/icon/

🚀 Usage

Example App.tsx

import React from 'react';
import { SDKProvider } from 'dntel-voip-sdk';

const App = () => {
  return <SDKProvider config={{ token: 'your-auth-token' }}></SDKProvider>;
};

export default App;

Example ConversationPage (Routing for Inbox items)

import { Conversation } from 'dntel-voip-sdk';
import { useParams } from 'react-router-dom';

const ConversationPage = () => {
  const { id } = useParams();

  return <Conversation conversationId={id as string} />;
};

export default ConversationPage;

🧱 Public Components

| Component | Description | | -------------- | ---------------------------------------------------- | | SDKProvider | Context provider for auth, API config, and state | | Conversation | Detailed conversation screen (used in routes) | | Setting | Settings page for contact configuration | | Contacts | Public component to render contact list or directory |

📁 File Structure

The SDK is bundled into:

dist/
├── index.js         # Main entry (ESM)
├── index.css        # Compiled styles
├── public/
│   └── icon/        # Static icons (e.g., phone.svg)
└── ...

📝 License

MIT