SIP Telephony Integration on Website
SIP (Session Initiation Protocol) is a standard protocol for IP telephony. Integrating SIP telephony with website allows receiving and making calls directly from browser via WebRTC, linking calls with orders and customers, and maintaining call history.
SIP Integration Architecture
Browser (WebRTC) ←→ SIP Gateway (Asterisk/FreeSWITCH) ←→ SIP Provider ←→ PSTN
↑
Site API (events, analytics)
SIP client in browser works via WebRTC, SIP Gateway converts WebRTC to SIP, then call goes via regular SIP channels.
SIP.js — Browser Client
// npm install sip.js
import { UserAgent, Inviter, SessionState } from 'sip.js';
const ua = new UserAgent({
uri: UserAgent.makeURI('sip:[email protected]'),
transportOptions: {
server: 'wss://sip.yourpbx.com:8089/ws'
},
authorizationUsername: sipLogin,
authorizationPassword: sipPassword
});
await ua.start();
// Make call
const target = UserAgent.makeURI('sip:[email protected]');
const inviter = new Inviter(ua, target);
inviter.stateChange.addListener((state) => {
if (state === SessionState.Established) {
// Call established
}
if (state === SessionState.Terminated) {
// Call ended
}
});
await inviter.invite();
Click-to-Call Button
On order or customer card page — "Call" button:
document.getElementById('call-btn').addEventListener('click', async () => {
// Request microphone permission
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const inviter = new Inviter(ua, UserAgent.makeURI(`sip:${phoneNumber}@pbx.com`));
await inviter.invite({
sessionDescriptionHandlerOptions: {
constraints: { audio: true, video: false }
}
});
});
Popup on Incoming Call
On incoming call via PBX webhook — show popup with customer data:
// PBX sends webhook on incoming
Route::post('/webhooks/pbx/call', function (Request $request) {
$callerPhone = $request->caller_number;
// Find customer by number
$customer = Customer::where('phone', $this->normalizePhone($callerPhone))->first();
// Push via WebSocket to manager
broadcast(new IncomingCallEvent($callerPhone, $customer));
});
On frontend: Echo.private('agent.{id}').listen('IncomingCallEvent', ...) — displays popup with customer history before answering.
Call Recording
When using Asterisk or FreeSWITCH — recordings saved in WAV/MP3, file path passed via AMI/ESL. File copied to S3, link saved in call_records:
call_records (
id, call_id, customer_id, agent_id,
started_at, duration_sec,
recording_url, disposition: answered | noanswer | busy
)
Development timeframe: 2–3 weeks for full integration with SIP client in browser, click-to-call, and incoming popup.