AsterPBX WebRTC Phone Widget Demo


<!-- Add this to any webpage -->
<script src="https://phone.supported.systems/widget.js"
        data-server="wss://sip.supported.systems/ws"
        data-extension="100"
        data-password="your-password"
        data-realm="sip.supported.systems"
        data-display-name="Support Line">
</script>

Features

Secure by Default

DTLS-SRTP encryption for all media, WSS for signaling

NAT Traversal

Built-in STUN/TURN support for reliable connectivity

Customizable

Light/dark themes, position options, and CSS overrides

Mobile Ready

Responsive design works on phones and tablets

Call Events

JavaScript API for programmatic control

Multi-Tenant

Support for different realms and extensions

Configuration Options

data-server

WebSocket URL for SIP signaling. Use wss:// for secure connections. Example: wss://sip.example.com:8089/ws

data-extension

SIP extension number to register as. This is the "username" for authentication.

data-password

SIP password for the extension. Keep this secure!

data-realm

SIP realm/domain for authentication. Usually matches your SIP domain.

data-display-name

Caller ID name shown in the widget header and sent to called parties.

data-position

Widget position: bottom-right (default), bottom-left, top-right, or top-left.

data-theme

Color theme: dark (default) or light. CSS variables can override colors.

data-auto-register

Set to "false" to prevent automatic registration on page load.

JavaScript API


// Make a call programmatically
AsterPBXPhone.call('5551234567');

// Hang up current call
AsterPBXPhone.hangup();

// Toggle mute
AsterPBXPhone.mute();

// Toggle hold
AsterPBXPhone.hold();

// Check registration status
if (AsterPBXPhone.isRegistered()) {
  console.log('Phone is ready');
}

// Check if currently in a call
if (AsterPBXPhone.isInCall()) {
  console.log('Call in progress');
}

AsterPBX WebRTC Widget

Quick Start