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. For a React Native softphone, install @dialstack/sdk-native (see Mobile integration for its peer dependencies). 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>
  DialStack.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;
    },
  }).then((dialstack) => {
    // wire your components to `dialstack`
  });
</script>

Import Patterns​

React Applications​

TypeScript
// Core client and types
import { loadDialstackAndInitialize } 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',
  fetchClientSecret: async () => {
    const res = await fetch('/api/dialstack/session', { method: 'POST' });
    const { client_secret } = await res.json();
    return client_secret;
  },
});

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.

What the SDK Reports​

Every request the browser SDK makes to DialStack carries a DialStack-Client header naming the DialStack packages your app loaded, their versions, and the components it has mounted:

Text
DialStack-Client: sdk-js/3.7.0;c=call-logs,voicemails sdk-react/3.7.0

The softphone sends the same information when it connects.

This tells DialStack which SDK versions and components your integration uses. We use it to troubleshoot issues you report, decide what to improve next, and plan deprecations. The header contains no personal data, and the SDK makes no extra requests to send it.

You can add your application's name and version with appInfo:

TypeScript
const dialstack = await loadDialstackAndInitialize({
  publishableKey: 'pk_live_...',
  fetchClientSecret,
  appInfo: { name: 'acme-portal', version: '2.1.0' },
});

Next Steps​

On this page