Skip to main content

Installation

Install the DialStack SDK packages your app needs, using your preferred package manager.

Package Managers​

For a React app:

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

# yarn
yarn add @dialstack/sdk-react @dialstack/sdk-js

# pnpm
pnpm add @dialstack/sdk-react @dialstack/sdk-js

@dialstack/sdk-js is required alongside @dialstack/sdk-react — it provides the core client, and importing it is what registers the underlying components.

For a Node.js backend, install @dialstack/sdk-server. To build a softphone without React, install @dialstack/sdk-webrtc. See the SDK overview for what each package covers.

CDN (Vanilla JavaScript)​

For non-bundled applications, use the UMD build via CDN:

HTML
<script src="https://unpkg.com/@dialstack/sdk-js"></script>
<script>
  const dialstack = DialStack.initialize({
    publishableKey: 'pk_live_YOUR_KEY',
  });
</script>

Import Patterns​

React Applications​

TypeScript
// Core client and types
import { initialize } from '@dialstack/sdk-js';

// The shared provider and hooks
import { DialstackComponentsProvider } from '@dialstack/sdk-react';

// Each component has its own import path
import { CallLogs } from '@dialstack/sdk-react/call-logs';
import { Voicemails } from '@dialstack/sdk-react/voicemails';

// Types
import type { DialStackInstance, CallLog, AppearanceOptions } from '@dialstack/sdk-js';

Vanilla JavaScript / Web Components​

TypeScript
// Web Components, no React dependency. Importing this registers the custom elements
import { loadDialstackAndInitialize } from '@dialstack/sdk-js';

const dialstack = await loadDialstackAndInitialize({
  publishableKey: 'pk_live_YOUR_KEY',
});

Server-Side (Node.js)​

TypeScript
// Server SDK for API calls
import { DialStack } from '@dialstack/sdk-server';

const dialstack = new DialStack(process.env.DIALSTACK_API_KEY);

TypeScript Configuration​

The SDK includes full TypeScript support. Ensure your tsconfig.json includes:

JSON
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "esModuleInterop": true
  }
}

Each package declares its own type entry points, so subpath imports such as @dialstack/sdk-react/call-logs resolve under "moduleResolution": "bundler" or "node16", and also under the legacy "moduleResolution": "node".

Peer Dependencies​

@dialstack/sdk-js, @dialstack/sdk-webrtc, and @dialstack/sdk-server have no peer dependencies.

@dialstack/sdk-react expects these to be installed alongside it:

  • @dialstack/sdk-js, at the matching major version
  • @xyflow/react
  • react and react-dom

Your package manager will report the exact ranges it expects if any are missing. Check @dialstack/sdk-react's peerDependencies for the versions a given release supports.

If you're not using React, use the Web Components in @dialstack/sdk-js instead:

TypeScript
import { loadDialstackAndInitialize } from '@dialstack/sdk-js';

Browser Compatibility​

BrowserMinimum Version
Chrome80+
Firefox75+
Safari13.1+
Edge80+

Requirements:

  • ES2015+ (ES6) support
  • Web Components v1 (Custom Elements, Shadow DOM)
  • Fetch API
warning

Internet Explorer is not supported.

Next Steps​

On this page