Skip to main content

JavaScript SDK

The official DialStack SDKs let you embed voice features in your application with ready-made components (call logs, voicemail, phone numbers, routing, onboarding, a softphone) and call the API from your backend.

Packages​

The SDK ships as five packages. Install the ones your app needs:

PackageUse it for
@dialstack/sdk-jsThe browser core: initialization, the REST client, types, and the Web Components for plain HTML, Vue, Angular or Svelte. Required by @dialstack/sdk-react
@dialstack/sdk-reactReact components and hooks
@dialstack/sdk-webrtcA headless calling client for building your own softphone in any framework. No dependencies
@dialstack/sdk-nativeThe softphone for React Native apps: provider, <Softphone> and composable pieces. See Mobile integration
@dialstack/sdk-serverNode.js backends: session and user-token creation, the REST API, webhooks

Importing @dialstack/sdk-js registers the Web Components for you. @dialstack/sdk-js/pure is the side-effect-free alternative for server-side rendering and tests, where you register the elements yourself. See Setup.

Each React component has its own import path, so your app only pulls in what it uses. The @dialstack/sdk-react root provides the shared provider and hooks.

Installation​

Bash
npm install @dialstack/sdk-react @dialstack/sdk-js

See Installation for the other packages, the script-tag build and TypeScript settings.

Quick example​

TypeScript
import { loadDialstackAndInitialize } from '@dialstack/sdk-js';
import { DialstackComponentsProvider } from '@dialstack/sdk-react';
import { CallLogs } from '@dialstack/sdk-react/call-logs';

const dialstack = await loadDialstackAndInitialize({
  publishableKey: 'pk_live_YOUR_KEY',
  fetchClientSecret: async () => {
    const res = await fetch('/api/dialstack/session', { method: 'POST' });
    const { client_secret } = await res.json();
    return client_secret;
  },
});

function App() {
  return (
    <DialstackComponentsProvider dialstack={dialstack}>
      <CallLogs />
    </DialstackComponentsProvider>
  );
}

Your backend's /api/dialstack/session route creates the session. See Sessions.

Embedded components​

ComponentWhat it doesReactWeb Component
CallHistoryCompact list of recent calls with one phone number, with AI summariesYesYes
CallLogsPaginated table of the account's calls, with filteringYesYes
VoicemailsA user's voicemail inbox with playback and transcriptionsYesYes
PhoneNumbersEvery number on the account, including in-progress orders and portsYesYes
PhoneNumberOrderingSearch for available numbers and order themYesYes
AIAgentConfiguration form for an AI receptionistYesYes
DialPlanVisual dial-plan viewer and editorYes—
OnboardingPortalMulti-step account onboarding wizardYes—
SoftphoneEmbedded WebRTC phone, ready-made or assembled from piecesYes—

PhoneNumberOrdering and AIAgent don't have guide pages yet; their links go to the SDK reference for their props. Component basics covers what all the components share.

Server SDK​

  • Accounts — create and manage customer accounts
  • Users — manage users within accounts
  • Phone numbers — search, order and manage numbers
  • Sessions — create session tokens for embedded components

Next steps​

On this page