Integrating SIP Telephony with Your Website
SIP (Session Initiation Protocol) is the standard for IP telephony. Integrating SIP telephony with a website lets you accept and make calls directly from the browser via WebRTC, link calls to orders and customers, and keep a history of interactions. We have implemented dozens of such integrations on projects of various scales — from online stores to contact centers with 500+ operators.
Why Business Needs SIP in the Browser?
A typical scenario: a manager is working in CRM, sees a customer order and wants to call immediately. Without integration, they waste up to 3 minutes searching for the contact; with click-to-call — 10 seconds. On incoming calls, CRM shows who is calling before you even answer. This speeds up order processing by 30–40% and eliminates dialing errors. In a contact center with 100 operators, time savings amount to about 200 hours per month.
Typical Architecture
Browser (WebRTC) ←→ SIP Gateway (Asterisk/FreeSWITCH) ←→ SIP Provider ←→ PSTN ↑ Site API (events, analytics) The SIP client in the browser works via WebRTC; the SIP gateway converts WebRTC to SIP, then the call proceeds via regular SIP channels. We use Asterisk or FreeSWITCH as a reliable gateway — our experience shows that properly configured systems can handle up to 2000 concurrent calls.
Why SIP.js? Comparison with Alternatives
SIP.js is the most popular library for a SIP client in the browser. It supports all modern browsers and works stably under load. Alternatives: JsSIP (less active development), sipml5 (outdated). SIP.js wins in connection setup speed — our tests show it initiates a call 20% faster than JsSIP with the same audio quality. Choosing the right library is critical for LCP and INP — the user doesn't have to wait.
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.ru:8089/ws' }, authorizationUsername: sipLogin, authorizationPassword: sipPassword }); await ua.start(); // Make a 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 the order page or customer card — a "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.ru`)); await inviter.invite({ sessionDescriptionHandlerOptions: { constraints: { audio: true, video: false } } }); }); Incoming Call Popup
When an incoming call arrives via PBX webhook — show a popup with customer data:
// PBX sends webhook on incoming call Route::post('/webhooks/pbx/call', function (Request $request) { $callerPhone = $request->caller_number; // Find customer by phone $customer = Customer::where('phone', $this->normalizePhone($callerPhone))->first(); // Push via WebSocket to manager broadcast(new IncomingCallEvent($callerPhone, $customer)); }); On the frontend: Echo.private('agent.{id}').listen('IncomingCallEvent', ...) — displays a popup with customer history before answering the call.
Call Recording
When using Asterisk or FreeSWITCH — recordings are saved as WAV/MP3, the file path is passed via AMI/ESL. File copied to S3, link stored in call_records:
call_records ( id, call_id, customer_id, agent_id, started_at, duration_sec, recording_url, disposition: answered | noanswer | busy ) How We Test the Integration?
Before delivery, we perform load testing: 100+ simultaneous calls, checking LCP and TTFB of the page during a call. We also test scenarios: connection drop, retry call, microphone denial. This guarantees stable operation even with 500 calls per day.
Why Choose an Experienced Team for Integration?
Incorrect WebRTC configuration leads to issues: call drops after 30 seconds, no audio, incoming calls not working. Our engineers' experience ensures stable operation under load. We provide a written guarantee on the integration and fix bugs free of charge within 90 days after delivery. Get a consultation — we will analyze your scenario and propose the optimal solution.
What's Included in the Work?
- Audit of current PBX and web infrastructure — check Asterisk/FreeSWITCH versions, WebSocket availability, open ports.
- Setup SIP client on the website — integrate SIP.js or JsSIP, connect audio devices.
- Develop click-to-call — call button from CRM, automatic number dialing.
- Webhook for incoming calls — popup with customer data, order history.
- Call recording — configure monitoring, save recordings, link to calls.
- Documentation and training — API description, instructions for managers, access handover.
- Post-deployment support — 14 days of free assistance.
Development Timelines
| Integration Type | Duration |
|---|---|
| Basic (click-to-call + popup) | 2–3 weeks |
| With call recording | 3–4 weeks |
| With CRM integration (1C, Bitrix24) | from 4 weeks |
Timelines are for typical projects. If you have a non-standard architecture — get in touch, we will estimate for free within 1 day.
| Feature | Click-to-call only | Full integration |
|---|---|---|
| Browser calls | ✅ | ✅ |
| Incoming popup | ❌ | ✅ |
| Call recording | ❌ | ✅ |
| CRM integration | optional | ✅ |
How We Guarantee Quality?
- Use proven libraries — SIP.js, Asterisk, FreeSWITCH.
- Test under load — 100+ simultaneous calls, check LCP and TTFB.
- Provide a certificate of compliance — confirmation that the integration does not disrupt site operation.
Learn more about WebRTC — the technology behind browser calls. Contact us to discuss your task. We will estimate time and cost within one business day.