Інтеграція 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 — технологію, що лежить в основі браузерних дзвінків. Зв'яжіться з нами, щоб обговорити ваше завдання. Розрахуємо терміни та вартість за один робочий день.