Using Siperb Provisioning (Direct to PBX)

This integration path uses Siperb’s provisioning service to manage your SIP configuration centrally — but your phone still connects directly to your own PBX via WebSocket, without routing through Siperb’s proxy. It’s a good middle ground: you get the convenience of managed credentials and device settings, while keeping your call traffic between the browser and your PBX.

You’ll need a Siperb account for this option, but the provisioning service itself is available on all plans.

When to Use This

  • You want to manage SIP credentials through a control panel rather than hard-coding them
  • You’re deploying to multiple users or devices and need centralised configuration
  • Your PBX already supports WebSocket and WebRTC natively
  • You don’t need Siperb’s proxy, transcoding, or SIP trace features

Prerequisites

  • A Siperb accountsign up here
  • A Personal Access Token (PAT) — generated from the Admin Control Panel under Developer Settings
  • An Embedded Script Device — created in Developer Settings, with its Registration Mode set to WebSocket
  • Your PBX’s SIP details entered into the device’s WebSocket configuration in the Admin Control Panel

Setting Up Your Device

Before writing any code, you need to configure a few things in the Siperb Admin Control Panel:

  1. Create your Embedded Script Device
    • As account owner: Settings → Admin Control Panel → Developer Settings
    • As domain admin: Settings → Admin Control Panel → Domain Users → (select user) → Developer Settings
  2. Change the Registration Mode to “WebSocket”
    • Select the embedded script device you just created
    • At the bottom of the page, change Registration Mode from “Proxy” to WebSocket
    • This reveals the server detail fields — enter your PBX’s address, username, password, and WebSocket port
  3. Copy your PAT and Device Token
    • You’ll find both on the Developer Settings page
    • Keep these safe — don’t share them, email them, or commit them to public repositories

Option A: Provisioning + Your Own SIP Client

Use this if you want to use your own SIP stack (SIP.js, JsSIP, or custom code) rather than the Browser Phone UI. The SDK handles login and provisioning — you handle the phone.

Load the SDK

<script src="https://cdn.siperb.com/lib/Siperb-Web-Phone/Web-Phone-<version_number>.umd.min.js"></script>

Login, Provision, and Use the Data

<script>
const main = async function() {
    // Login with your Personal Access Token
    const accessToken = "<YOUR_PERSONAL_ACCESS_TOKEN>";
    let session;
    try {
        session = await window.Siperb.Login(accessToken);
    } catch (error) {
        console.error('Failed to get session:', error);
        return;
    }

    // Fetch provisioning data
    const provisioning = await window.Siperb.GetProvisioning({
        UserId: session.UserId,
        DeviceToken: "<YOUR_KNOWN_DEVICE_TOKEN>",
        SessionToken: session.SessionToken,
        EnableCache: true,
        ProvisioningKey: "SIPERB_PROVISIONING"
    });

    // Now use the provisioning data with your own SIP client
    // Key fields available:
    //   provisioning.SipWssServer
    //   provisioning.SipWebsocketPort
    //   provisioning.SipUsername
    //   provisioning.SipPassword
    //   provisioning.SipDomain
    //   provisioning.SipServerPath

    console.log('Provisioning complete:', provisioning);

    // Example: wire up JsSIP, SIP.js, or your own client here
    // JsSIP example: https://github.com/Siperb/Web-Phone/blob/main/test-JSSIP.html
    // SIP.js example: https://github.com/Siperb/Web-Phone/blob/main/test-SIPJS.html
};

window.addEventListener('load', async function() { await main(); });
</script>

Option B: Provisioning + Browser Phone SDK

Use this if you want the full Browser Phone UI — Siperb handles login, provisioning, and the phone interface. You just embed it.

<iframe id="phoneFrame"
    style="width:400px; height:640px; border:1px solid #ccc; border-radius:5px; overflow:hidden;"
    allow="microphone; autoplay">
</iframe>

<script>
const main = async function() {
    // Login
    const accessToken = "<YOUR_PERSONAL_ACCESS_TOKEN>";
    let session;
    try {
        session = await window.Siperb.Login(accessToken);
    } catch (error) {
        console.error('Failed to get session:', error);
        return;
    }

    // Fetch provisioning
    const provisioning = await window.Siperb.GetProvisioning({
        UserId: session.UserId,
        DeviceToken: "<YOUR_KNOWN_DEVICE_TOKEN>",
        SessionToken: session.SessionToken,
        EnableCache: true,
        ProvisioningKey: "SIPERB_PROVISIONING"
    });

    // Load Browser Phone UI
    const phoneFrame = document.getElementById("phoneFrame");
    await window.Siperb.LoadBrowserPhone(phoneFrame);

    // Provision the phone
    const phoneAPI = await window.Siperb.ProvisionPhone({
        Provisioning: provisioning,
        PhoneFrame: phoneFrame,
        ProfileUserId: "<instance_id>",
        SessionId: "<session_id>",
        UserId: "<user_id>",
        EnableAvatar: true,
        EnabledSettings: false,
        EnableDialPad: true,
        EnableCallTransfer: true,
        EnableCallHold: true,
        EnableCallMute: true,
        UiThemeStyle: 'light',
        Language: 'auto',
        OnLoad: function() {
            phoneAPI.Toast("Phone is ready.");
        }
    });

    phoneAPI.InitTooltips();
    console.log('Browser Phone provisioned and running.');
};

window.addEventListener('load', async function() { await main(); });
</script>

Try it live: Run in CodePen

SDK Functions Used

FunctionDescription
Login(pat)Authenticates with your Personal Access Token. Returns a session object with UserId and SessionToken.
GetProvisioning(options)Fetches device configuration from the Siperb provisioning service. Returns the full provisioning object.
LoadBrowserPhone(iframeElement)Loads the Browser Phone UI into an iframe. Must be called before ProvisionPhone.
ProvisionPhone(options)Provisions the phone with credentials and UI configuration. Returns the phone API.

Note on Credentials

Even with provisioning, the SIP credentials are still visible in the browser because the phone connects directly to your PBX. If you need to keep credentials completely hidden from the client, use the Provisioning + Proxy option instead — that routes all SIP traffic through Siperb’s servers, so your PBX details never reach the browser.