Embed via npm

The recommended method for any application that already has a build pipeline (Vite / webpack / Rollup / Next.js / Nuxt / Angular CLI…). The SDK ships TypeScript declarations and tree-shakable ES modules.

1. Install the package

The SDK is published as either an internal tarball (zorio-webphone-sdk-1.0.0.tgz) or via a scoped npm registry that the Zorio team provisions per partner.

# Option A — install directly from a Zorio-provided tarball
npm install ./zorio-webphone-sdk-1.0.0.tgz

# Option B — via scoped registry (if your partnership has been granted access)
npm install @zorio/webphone-sdk

Versions

SDK v1 uses sip.js@0.21.x as the WebRTC + SIP signaling transport. Bundle ~85 KB gzipped, SIP.js is bundled — you do not need to install it separately.

2. Import and initialize

import { ZorioWebphone } from '@zorio/webphone-sdk'

const phone = await ZorioWebphone.connect({
  apiBase: 'https://acme.zorio.example',
  token:   bearerToken,
  mount:   '#zorio-phone', // leave empty to run headless
})

ZorioWebphone.connect() returns a Promise — await it before calling phone.call() or subscribing to events.

3. TypeScript

The package ships .d.ts files; import types directly:

import type {
  ConnectOptions,
  ZorioCall,
  ZorioWebphoneError,
  CallOptions,
  DiagnoseResult,
} from '@zorio/webphone-sdk'

const opts: ConnectOptions = {
  apiBase: import.meta.env.VITE_ZORIO_API_BASE,
  token:   import.meta.env.VITE_ZORIO_TOKEN,
  mount:   '#zorio-phone',
  layout:  'docked',
  theme:   'auto',
  locale:  'vi',
  autoRegister: true,
}

const phone = await ZorioWebphone.connect(opts)

4. Vue 3 integration example (Composition API)

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue'
import { ZorioWebphone } from '@zorio/webphone-sdk'

const phoneRef = ref<ZorioWebphone | null>(null)

onMounted(async () => {
  phoneRef.value = await ZorioWebphone.connect({
    apiBase: 'https://acme.zorio.example',
    token:   await getBearerToken(),
    mount:   '#zorio-phone',
  })

  phoneRef.value.on('incoming_call', ({ call, contact }) => {
    console.log('Incoming call:', contact?.full_name || call.number)
  })
})

onBeforeUnmount(async () => {
  await phoneRef.value?.disconnect()
})
</script>

<template>
  <div id="zorio-phone" />
</template>

5. React integration example

import { useEffect, useRef } from 'react'
import { ZorioWebphone } from '@zorio/webphone-sdk'

export function WebphoneWidget({ token }: { token: string }) {
  const phoneRef = useRef<ZorioWebphone | null>(null)

  useEffect(() => {
    let cancelled = false
    ;(async () => {
      const phone = await ZorioWebphone.connect({
        apiBase: 'https://acme.zorio.example',
        token,
        mount:   '#zorio-phone',
      })
      if (cancelled) { await phone.disconnect(); return }
      phoneRef.current = phone
    })()
    return () => {
      cancelled = true
      phoneRef.current?.disconnect()
    }
  }, [token])

  return <div id="zorio-phone" />
}

6. Notable v7 features

Auto-reconnect + re-register supervisor

SDK v7 automatically re-registers SIP whenever the WebSocket is throttled (background tab) or the network drops. You do not need to write your own reconnect logic — just listen for the auto_reconnect event so you can show a banner like "Reconnecting…" to the user.

Pagehide cleanup

When the user closes the tab, the SDK automatically unregisters cleanly against the Zorio PBX to avoid stale registrations (which would otherwise cause missed inbound calls within the timeout window). Works even when embedded via a bundler.

Early media

Outbound calls over mobile play ringback / IVR carrier announcements as soon as the SIP 183 Session Progress arrives instead of being silent until the callee answers. Enabled by default in SDK v7 (earlyMedia: true).

7. Suggested bundler configuration

Vite / Rollup tree-shake well by default. If you use webpack < 5 and hit Cannot resolve module, add:

// webpack.config.js
module.exports = {
  resolve: {
    fallback: { crypto: false, stream: false, buffer: false },
  },
}

See also:

• API methods
• Events
• Quickstart HTML