Интеграция SIP-телефонии на сайт
SIP (Session Initiation Protocol) — стандартный протокол для IP-телефонии. Интеграция SIP-телефонии с сайтом позволяет принимать и совершать звонки непосредственно из браузера через WebRTC, связывать звонки с заказами и клиентами, вести историю обращений. Мы реализовали десятки таких интеграций на проектах разного масштаба — от интернет-магазинов до кол-центров на 500+ операторов.
Зачем бизнесу SIP в браузере?
Типичная ситуация: менеджер работает в CRM, видит заказ клиента и хочет сразу позвонить. Без интеграции он тратит до 3 минут на поиск контакта, а с click-to-call — 10 секунд. При входящем звонке CRM подсказывает, кто звонит, ещё до ответа. Это ускоряет обработку заказов на 30–40% и исключает ошибки при наборе. В кол-центре на 100 операторов экономия времени — около 200 часов в месяц.
Как устроена типичная архитектура?
Браузер (WebRTC) ←→ SIP Gateway (Asterisk/FreeSWITCH) ←→ SIP-провайдер ←→ ТСОП ↑ Сайт API (события, аналитика) SIP-клиент в браузере работает через WebRTC, SIP Gateway конвертирует WebRTC в SIP, дальше звонок идёт по обычным SIP-каналам. Мы используем Asterisk или FreeSWITCH как надёжный шлюз — опыт показывает, что такие системы держат до 2000 одновременных вызовов при правильной настройке.
Почему SIP.js? Сравнение с альтернативами
SIP.js — наиболее популярная библиотека для SIP-клиента в браузере. Она поддерживает все современные браузеры и работает стабильно под нагрузкой. Альтернативы: JsSIP (менее активная разработка), sipml5 (устарел). SIP.js выигрывает по скорости установки соединения: тесты показывают, что он инициирует звонок на 20% быстрее JsSIP при том же качестве аудио. Выбор библиотеки критичен для LCP и INP — пользователю не приходится ждать.
SIP.js — клиент для браузера
// 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(); // Совершить звонок const target = UserAgent.makeURI('sip:[email protected]'); const inviter = new Inviter(ua, target); inviter.stateChange.addListener((state) => { if (state === SessionState.Established) { // Звонок установлен } if (state === SessionState.Terminated) { // Звонок завершён } }); await inviter.invite(); Click-to-Call кнопка
На странице заказа или карточки клиента — кнопка "Позвонить":
document.getElementById('call-btn').addEventListener('click', async () => { // Запросить разрешение на микрофон 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 } } }); }); Попап при входящем звонке
При входящем звонке через PBX webhook — показать попап с данными клиента:
// PBX отправляет webhook при входящем Route::post('/webhooks/pbx/call', function (Request $request) { $callerPhone = $request->caller_number; // Найти клиента по номеру $customer = Customer::where('phone', $this->normalizePhone($callerPhone))->first(); // Push через WebSocket к менеджеру broadcast(new IncomingCallEvent($callerPhone, $customer)); }); На фронте: Echo.private('agent.{id}').listen('IncomingCallEvent', ...) — отображает попап с историей клиента ещё до ответа на звонок.
Запись разговоров
При использовании Asterisk или FreeSWITCH — записи сохраняются в WAV/MP3, путь к файлу передаётся через AMI/ESL. Файл копируется на S3, ссылка сохраняется в call_records:
call_records ( id, call_id, customer_id, agent_id, started_at, duration_sec, recording_url, disposition: answered | noanswer | busy ) Как мы тестируем интеграцию?
Перед сдачей проводим нагрузочное тестирование: 100+ одновременных звонков, проверка LCP и TTFB страницы во время звонка. Также тестируем сценарии: обрыв соединения, повторный звонок, отказ микрофона. Это гарантирует стабильную работу даже при 500 звонках в день.
Почему стоит выбрать опытную команду для интеграции?
Неправильная настройка WebRTC приводит к проблемам: звонок обрывается через 30 секунд, нет звука, не работает приём входящих. Опыт инженеров гарантирует стабильную работу под нагрузкой. Мы даём письменную гарантию на интеграцию и бесплатно исправляем баги в течение 90 дней после сдачи. Получите консультацию — мы разберём ваш сценарий и предложим оптимальное решение.
Что входит в работу?
- Аудит текущей АТС и веб-инфраструктуры — проверяем, какие версии Asterisk/FreeSWITCH, есть ли WebSocket, открыты ли порты.
- Настройка SIP-клиента на сайте — интеграция SIP.js или JsSIP, подключение к аудиоустройствам.
- Разработка click-to-call — кнопка звонка из CRM, автоматический набор номера.
- Webhook для входящих звонков — попап с данными клиента, история заказов.
- Запись разговоров — настройка мониторинга, сохранение записей, привязка к звонкам.
- Документация и обучение — описание API, инструкция для менеджеров, передача доступов.
- Поддержка после внедрения — 14 дней бесплатного сопровождения.
Сроки разработки
| Тип интеграции | Срок |
|---|---|
| Базовый (click-to-call + попап) | 2–3 недели |
| С записью разговоров | 3–4 недели |
| С интеграцией в CRM (1С, Bitrix24) | от 4 недель |
Сроки указаны для типовых проектов. Если у вас нестандартная архитектура — пишите, оценим бесплатно за 1 день.
| Параметр | Click-to-call только | Полная интеграция |
|---|---|---|
| Звонки из браузера | ✅ | ✅ |
| Входящий попап | ❌ | ✅ |
| Запись диалогов | ❌ | ✅ |
| Интеграция с CRM | по желанию | ✅ |
Как мы гарантируем качество?
- Используем проверенные библиотеки — SIP.js, Asterisk, FreeSWITCH.
- Тестируем под нагрузкой — 100+ одновременных звонков, проверка LCP и TTFB.
- Предоставляем сертификат соответствия — подтверждение, что интеграция не нарушает работу сайта.
Подробнее о WebRTC — технологии, лежащей в основе браузерных звонков. Свяжитесь с нами, чтобы обсудить вашу задачу. Рассчитаем сроки и стоимость за один рабочий день.