SIP Telephony Integration: WebRTC, Click-to-Call & CRM

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

Timelines are for typical projects. If you have a non-standard architecture — get in touch, we will estimate for free within 1 day.

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.

Email Campaign Integration: Why Does It Often Break?

We’ve observed that a trigger email sent 10 minutes after registration converts 4–5 times better than the same email sent after 24 hours. This isn’t a marketing myth—it’s mechanics: while the user is still warm, while they remember the context. But most integrations with email services are built like this: form submits → synchronous HTTP request to API → if the API is slow, the user waits 3 seconds → the email either goes out or doesn’t, nobody knows. In one project, we saw a 30% drop in conversion simply because the email service responded with 504 and Laravel’s queue driver wasn’t configured. Lost emails often hit customers silently – no log, no alert, just a missing order confirmation.

If you’re facing lost emails or spam folder issues, order an audit of your current integration – we’ll find bottlenecks within 2 days.

Providers and Their APIs

Unisender — a Russian provider popular in the SMB segment. REST API, simple. Adding a contact: importContacts, sending a transactional email: sendEmail. Important: for transactional emails (order confirmations, password resets), Unisender Go is a separate service with a different API and separate pricing. Mixing bulk and transactional mailings in one stream is bad for domain reputation. Unisender Go handles up to 1000 requests per second.

SendPulse — provides email, SMS, web push, Viber, and Telegram bots through a unified API. Convenient for projects requiring an omnichannel approach. Automation 360 is a visual chain builder; you can trigger automation via API events. The PHP SDK (sendpulse/rest-api-php-sdk) is maintained but updated irregularly – better to use Guzzle directly.

Mailchimp — a choice for international audiences and marketing teams accustomed to the Mailchimp ecosystem. Transactional email via Mandrill (a subsidiary service). Marketing API v3 for list, tag, and campaign management. Webhooks for opens, clicks, unsubscribes, bounces.

SMS. For Russia: SMSCenter, MTS Exolve, Devino Telecom, SMS Aero. Their APIs are similar: a send method with phone, message, sender parameters (sender name must be registered separately with the operator). One nuance: the sender name must be registered through the aggregator with a contract – otherwise SMS won’t be sent on MTS/MegaFon/Beeline networks.

How to Build an Integration That Doesn’t Lose Emails?

Separate Transactional and Marketing Streams

Transactional emails (order confirmations, password resets, delivery status) go through a dedicated sender domain or subdomain tx.example.com. Marketing campaigns go through mail.example.com or news.example.com. If a marketing campaign receives many spam complaints, it should not affect the reputation of the transactional stream. According to SendGrid documentation, transactional messages should be sent through a dedicated IP pool to prevent cross-contamination.

Queue and Retry

Any call to the email API goes through a queue (Laravel Queue, Bull, Celery). If Unisender returns a 503, the job retries after 5 minutes, then 15, then 60. After 5 failed attempts, it goes to a dead letter queue with an alert. The user already received their 200 OK and knows nothing about the issue. This approach reduces bounce rate on projects to 0.5%.

Example Laravel job:

public function handle(): void
{
    try {
        $response = Http::post(config('services.unisender.email_url'), $this->params);
        if ($response->failed()) {
            $this->release(300); // retry after 5 min
        }
    } catch (\Throwable $e) {
        $this->release(300);
    }
}

Templates

We store templates in code (Blade, Twig, React Email), not in the provider’s interface. Reasons: versioning via Git, browser preview without sending, testability. For complex templates with dynamic content — react-email with export to HTML via @react-email/render.

Validation and Consent

Before adding a contact to a list — double opt-in (confirmation email). Store the confirmation timestamp in your own database. Upon unsubscription — synchronously unsubscribe both at the provider and in your database. Ignoring webhook unsubscriptions is a direct path to account suspension at the provider. All processes comply with Федеральный закон № 152-ФЗ «О персональных данных».

Deliverability Monitoring and DKIM Setup

Connect provider webhooks for events: bounce (hard and soft), spam_complaint, unsubscribe. Hard bounce — immediately mark the email as invalid in your database, stop sending. Soft bounce 3 times in a row — same. Metrics: open rate, click rate, bounce rate, unsubscribe rate — review at least once a week. Our certified engineers configure alerts in Grafana/Prometheus.

DKIM configuration steps:

1. Generate a key pair (e.g., openssl genrsa -out private.key 2048).
2. Publish the public key in DNS as a TXT record for the selector (e.g., mail._domainkey.tx.example.com).
3. Provide the selector to the provider (SendGrid, Mailgun, Unisender).
4. Verify with dig TXT mail._domainkey.tx.example.com.

SPF, DKIM, DMARC must be configured separately for each stream. We use subdomains with different DNS records.

Why Is It Important to Separate Streams?

If you send a marketing campaign from the same domain as transactional emails and receive spam complaints, you risk getting the domain blocked — and users will stop receiving even order confirmations. SPF, DKIM, DMARC (Sender Policy Framework, DomainKeys Identified Mail, Domain‑based Message Authentication, Reporting and Conformance) must be configured separately for each stream. In one project, a marketing blast with 12% spam complaints blocked the transactional domain for 48 hours — we had to re‑authenticate with Google and Yandex.

What Does the Integration Scope Include?

• Audit of current communication streams and domain reputation (SPF, DKIM, DMARC)
• Provider and schema selection: transactional vs marketing traffic
• Configuration of SPF, DKIM, DMARC DNS records
• Development of email templates (HTML + dynamic content)
• Backend integration via queues and API
• Webhook setup for deliverability and complaints
• Operations documentation and team training
• Deliverability guarantee and post‑launch support

We deliver production‑ready documentation, access to monitoring dashboards, and a handover session with your engineers. Our certified engineers provide a 30‑day post‑launch health check guarantee.

Timelines and Cost

Cost is calculated individually after audit. We provide turnkey service: from analysis to production monitoring. Contact us for a free engineer consultation — we’ll evaluate your project and give accurate timelines. Over 7 years of experience in email service integration, 50+ projects implemented. Order a free audit of your current integration and receive a report with recommendations and estimated savings.