Dora Cell SDK

The Dora Cell SDK allows you to integrate professional-grade VoIP calling into your JavaScript or React applications. Whether you're building a custom CRM, a helpdesk tool, or a mobile-first web app, our SDK handles the complex WebRTC logic so you can focus on your user experience.

Browser Support

For the best experience, we recommend using Chromium-based browsers (Chrome, Microsoft Edge, Brave, Opera). Our WebRTC implementation is highly optimized for the Chromium engine.

High Performance

Engineered for reliable, low-latency voice communication with crystal-clear audio quality.

Secure Auth

Multiple authentication tiers including public/secret key pairs and session-based tokens.

Core SDK Installation

Install the base SDK to use it in any JavaScript environment (Node.js, Vanilla JS, Vue, etc.).

1npm install @dora-cell/sdk

Initialization

Initialize the SDK using your API credentials. Supported auth types include api-token, extension, and direct.

index.jsjavascript

1import { DoraCell } from "@dora-cell/sdk";
2 
3const sdk = new DoraCell({
4  auth: {
5    type: "api-token",
6    publicKey: "pk_live_your_key",
7    secretKey: "sk_live_your_secret",
8  },
9  environment: "production"
10});
11 
12// Always wrap in async/await or use .then()
13await sdk.initialize();
14console.log("SDK is ready!");

Making & Receiving Calls

The SDK provides a simple interface for call management.

1// Place an outbound call
2const call = await sdk.call("+2348000000000");
3 
4// Hang up
5call.hangup();
6 
7// Answer an incoming call
8sdk.on("call:incoming", (call) => {
9  console.log("Incoming call from:", call.remoteNumber);
10  // To answer:
11  sdk.answerCall();
12});

Event Handlers

Stay updated with the call state by subscribing to SDK events.

1// Listen for connection status
2sdk.on("connection:status", ({ status, error }) => {
3  console.log("SIP Status changed:", status);
4});
5 
6// Listen for call transitions
7sdk.on("call:connected", (call) => {
8  console.log("Conversation started with:", call.remoteNumber);
9});
10 
11sdk.on("call:ended", (call, reason) => {
12  console.log("Call ended. Reason:", reason);
13});

React SDK Installation

The React SDK requires the Core SDK as a peer dependency.

1npm install @dora-cell/sdk @dora-cell/sdk-react

Setting up the Provider

Wrap your application tree with the DoraCellProvider to enable global call management.

layout.tsxtsx

1import { DoraCellProvider } from "@dora-cell/sdk-react";
2import "@dora-cell/sdk-react/styles.css";
3 
4export default function RootLayout({ children }) {
5  return (
6    <DoraCellProvider
7      config={{
8        auth: {
9          type: "api-token",
10          publicKey: "pk_...",
11          secretKey: "sk_...",
12        }
13      }}
14      autoInitialize={true}
15    >
16      {children}
17    </DoraCellProvider>
18  );
19}

Hooks Overview

useCall()

Manage active calls, mute, and duration.

useConnectionStatus()

Monitor SIP registration and errors.

Dialer.tsxtsx

1import { useCall, useConnectionStatus } from "@dora-cell/sdk-react";
2 
3export function Dialer() {
4  const { call, callStatus } = useCall();
5  const { isConnected } = useConnectionStatus();
6 
7  return (
8    <button 
9      onClick={() => call("+234...")}
10      disabled={!isConnected || callStatus !== 'idle'}
11    >
12      {callStatus === 'idle' ? 'Call' : 'Calling...'}
13    </button>
14  );
15}

Built-in UI Components

We provide production-ready components that fit perfectly into your application. Below is a complete overview of the core components and their props.

Dialpad

A flexible keypad for entering numbers and switching between Caller IDs.

initialNumber?: stringPre-fill the dialer input.

showKeys?: booleanShow numeric keypad by default (true).

className?: stringCustom CSS classes.

availableExtensions?: ArrayOverride auto-fetched caller IDs.

selectedExtension?: stringManually select the active caller ID.

onExtensionChange?: fnCallback when caller ID changes.

onCallInitiated?: fnCallback after a call starts.

CallInterface

A slide-over interface that handles the audio and call lifecycle automatically.

isOpen?: booleanControls visibility.

onOpenChange?: fnCallback to request open/close.

onCallEnded?: fnCallback when a call ends.

maximizeIcon?: NodeCustom maximize icon.

minimizeIcon?: NodeCustom minimize icon.

1import { CallInterface, Dialpad, CreditBalance } from "@dora-cell/sdk-react";
2 
3function App() {
4  const [dialerOpen, setDialerOpen] = useState(false);
5 
6  return (
7    <>
8      <header>
9        <CreditBalance />
10      </header>
11      
12      {/* Handles all incoming and outgoing call UI */}
13      <CallInterface 
14        isOpen={dialerOpen} 
15        onOpenChange={setDialerOpen} 
16        onCallEnded={() => console.log('Call Ended')}
17      />
18      
19      <main>
20        <Dialpad 
21          initialNumber="+2348000000000"
22          showKeys={true}
23          onCallInitiated={(num) => console.log('Calling', num)}
24        />
25      </main>
26    </>
27  );
28}

Component Previews

Dialpad Component

A full-featured dialer with Caller ID selection and interactive keys.

Dora-cell

Credit balance:₦1,250.00

Caller ID

+234 800 123 4567

Enter number

Call Interface Component

Responsive floating interface for active and incoming call management.

John Doe

+234 701 555 0123 • Incoming...

Incoming call

John Doe

+234 701 555 0123 • On Call

Ongoing

04:22