Web Phone Manual Setup

This is the simplest way to get Web Phone running — and it’s completely free. You load the Browser Phone SDK, provide your PBX’s SIP credentials directly, and the phone connects over WebSocket. No Siperb account, no provisioning service, no proxy. Just your code and your PBX.

This approach is ideal for developers who want full control, are comfortable managing SIP credentials, and have a PBX that already supports WebSocket and WebRTC (or plan to configure it to do so).

What You’ll Need

A web page served over HTTPS
A SIP-compatible PBX with WebSocket support enabled (e.g., Asterisk with res_http_websocket, FreeSWITCH with mod_verto or SIP over WSS)
Your PBX must present a valid TLS/SSL certificate — browsers require a secure WebSocket connection (wss://) for microphone access
SIP credentials (username, password, domain) for the extension you want to register

Important Note on Security

With this approach, your SIP credentials are embedded in the browser’s source code. Anyone who inspects the page can see them. This is fine for internal tools, development, and testing — but for public-facing deployments, consider using Siperb Provisioning with the Proxy instead, which keeps credentials server-side.

Step 1: Load the SDK

Add the Web Phone SDK to your page. You can place it in the <head> or <body> — the script can load asynchronously:

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

Get the latest version number from the GitHub releases page, or use the CDN URL directly.

Once loaded, the SDK exposes everything under the window.Siperb namespace. Since the script may load asynchronously, always wait for the page to be ready:

window.addEventListener('load', async () => {
    // SDK is ready to use here
});

Step 2: Create Your Provisioning Object

Since you’re not using Siperb’s provisioning service, you provide the SIP configuration yourself. Here’s the minimum required:

const custom_provisioning = {
    RegistrationMode: "Socket",         // Required for direct PBX connection
    profileName: "My Name",             // Displayed in the phone's profile section
    SipWssServer: "pbx.example.com",    // Your PBX address (must have valid SSL)
    SipUsername: "extension_100",       // SIP username for registration
    SipPassword: "****",                // SIP password for digest auth
    SipDomain: "pbx.example.com",       // SIP domain (or "localhost")
    ProfileUserName: "John Smith",      // Displayed as caller ID text
    SipContact: "",                     // Empty string or a static contact user
    SipWebsocketPort: 8089,             // Your PBX's WSS port
    SipServerPath: "/ws",               // WebSocket server path
};

Step 3: Load and Provision the Phone

Add an iframe to your page for the phone UI, then load and provision it:

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

<script>
const custom_provisioning = {
    RegistrationMode: "Socket",
    profileName: "My Name",
    SipWssServer: "pbx.example.com",
    SipUsername: "extension_100",
    SipPassword: "****",
    SipDomain: "pbx.example.com",
    ProfileUserName: "John Smith",
    SipContact: "",
    SipWebsocketPort: 8089,
    SipServerPath: "/ws",
};

const main = async function() {
    const phoneFrame = document.getElementById("phoneFrame");

    // Load the Browser Phone UI into the iframe
    await window.Siperb.LoadBrowserPhone(phoneFrame);

    // Provision the phone with your SIP credentials
    const phoneAPI = await window.Siperb.ProvisionPhone({
        Provisioning: custom_provisioning,
        PhoneFrame: phoneFrame,
        ProfileUserId: "device_01",
        SessionId: "session_01",
        UserId: "user_01",

        // Optional UI settings
        EnableAvatar: true,
        EnabledSettings: false,
        EnableDialPad: true,
        EnableCallTransfer: true,
        EnableCallHold: true,
        EnableCallMute: true,
        EnableCallRecording: true,
        EnableDeviceSelector: true,
        UiThemeStyle: 'light',       // 'light', 'dark', or 'system'
        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

Function	Description
`LoadBrowserPhone(iframeElement)`	Loads the Browser Phone UI into the specified iframe. Must be called first and awaited.
`ProvisionPhone(options)`	Provisions the phone with SIP credentials, UI settings, and callbacks. Returns the phone API object.

What’s Next

Once your phone is running, you can:

Add Click to Dial functionality to initiate calls programmatically
Customise the UI settings via the ProvisionPhone options
If you outgrow the manual approach, upgrade to Siperb Provisioning for centralised credential management