Embed via UMD/CDN

The right approach for static websites, WordPress, legacy CRMs without a bundler, or air-gapped environments without outbound CDN access. A single <script> tag is enough to use the ZorioWebphone class via a global variable.

1. UMD file layout

File	Size (~)	Use case
`zorio-webphone.umd.cjs`	85 KB gzip	`<script src=...>`
`zorio-webphone.umd.js`	85 KB gzip	Stable CDN alias
`zorio-webphone.esm.js`	80 KB gzip	`<script type="module">`

Every bundle already bundles sip.js@0.21.x + every runtime dependency — no extra scripts to load.

2. Drop-in via the Zorio CDN

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Webphone demo</title>
</head>
<body>
  <div id="zorio-phone" style="position:fixed;bottom:24px;right:24px"></div>

  <script src="https://cdn.zorio.vn/webphone-sdk/v1/zorio-webphone.umd.cjs"></script>
  <script>
    const { ZorioWebphone } = window.ZorioWebphoneSDK

    ZorioWebphone.connect({
      apiBase: 'https://acme.zorio.example',
      token:   '<bearer-token-from-login>',
      mount:   '#zorio-phone',
    }).then((phone) => {
      window.phone = phone // handy for debugging
      phone.on('incoming_call', ({ call, contact }) => {
        console.log('Incoming call:', contact?.full_name || call.number)
      })
    })
  </script>
</body>
</html>

Global namespace

The UMD bundle exposes window.ZorioWebphoneSDK. Destructure the main class: const { ZorioWebphone } = window.ZorioWebphoneSDK. You should not touch window.SIP (the bundled SIP.js) — always go through the ZorioWebphone class to stay forward-compatible.

3. ESM script tag (modern browsers)

html

<script type="module">
  import { ZorioWebphone } from 'https://cdn.zorio.vn/webphone-sdk/v1/zorio-webphone.esm.js'

  const phone = await ZorioWebphone.connect({
    apiBase: 'https://acme.zorio.example',
    token:   bearerToken,
    mount:   '#zorio-phone',
  })
</script>

4. Self-host (air-gapped environments)

If the application runs in an internal network without outbound CDN access (real estate, banking, healthcare), download the SDK tarball and serve it from your own nginx/Apache:

/var/www/static/vendor/zorio-webphone.umd.cjs
/var/www/static/vendor/zorio-webphone.d.ts

html

<script src="/static/vendor/zorio-webphone.umd.cjs"></script>

CSP — Content Security Policy

When self-hosting or embedding into a page with a strict CSP, add the following directives:

connect-src wss://*.zorio.example https://*.zorio.example;
media-src   blob:;
script-src  'self' https://cdn.zorio.vn;

WebRTC needs blob: for the MediaStream audio element, and wss:// for SIP signaling.

5. Pattern for WordPress / legacy CRM

html

<!-- Drop into the theme footer.php or a plugin shortcode -->
<div id="zorio-phone"></div>

<script src="https://cdn.zorio.vn/webphone-sdk/v1/zorio-webphone.umd.cjs"></script>
<script>
(function () {
  // Get the bearer token from the CRM backend session
  fetch('/wp-json/my-app/v1/zorio-token', { credentials: 'include' })
    .then(r => r.json())
    .then(({ token }) => window.ZorioWebphoneSDK.ZorioWebphone.connect({
      apiBase: 'https://acme.zorio.example',
      token,
      mount:   '#zorio-phone',
      layout:  'docked',
      theme:   'auto',
    }))
    .then((phone) => { window.phone = phone })
    .catch(console.error)
})()
</script>

6. v7 features in the UMD bundle

Every bundle (UMD / ESM / npm) ships the same feature set:

Auto-reconnect supervisor — automatically re-registers when WSS drops / the tab is backgrounded.
Pagehide cleanup — closing the tab triggers an unregister to the Zorio PBX.
Early media — outbound calls hear ringback / IVR carrier audio from SIP 183 Session Progress.

Diagnostic preflight

Before connect(), you can run a preflight to check HTTPS / mic / WSS / STUN / TURN:

const r = await window.ZorioWebphoneSDK.ZorioWebphone.diagnose({
  apiBase: 'https://acme.zorio.example',
  token,
})
if (!r.micOk)  alert('Please grant microphone permission')
if (!r.wssOk)  alert('Firewall is blocking WSS 443')

7. Environment requirements

The page must be served over HTTPS (WebRTC mandate, except localhost).
Browser >= Chrome 90 / Edge 90 / Firefox 90 / Safari 14.
The user must have at least one gesture (click/tap) on the page before the first incoming call, to bypass Safari/iOS autoplay policy — otherwise you will receive the audio_autoplay_blocked event.

Embed via UMD/CDN ​

1. UMD file layout ​

2. Drop-in via the Zorio CDN ​

3. ESM script tag (modern browsers) ​

4. Self-host (air-gapped environments) ​

5. Pattern for WordPress / legacy CRM ​

6. v7 features in the UMD bundle ​

7. Environment requirements ​

Embed via UMD/CDN

1. UMD file layout

2. Drop-in via the Zorio CDN

3. ESM script tag (modern browsers)

4. Self-host (air-gapped environments)

5. Pattern for WordPress / legacy CRM

6. v7 features in the UMD bundle

7. Environment requirements