Як інтегрувати веб-телефон в свою систему

Дзвінки безпосередньо з браузера, без використання додаткових налаштувань і додатків — звичайно, не чудо світу, але функція корисна. Завдяки API Zadarma ви зможете запровадити такий веб-телефон у власний веб-додаток чи будь-яку систему.

Розповідаємо про реалізацію WebRTC на своєму сайті.

WebRTC на власному сайті

Головна відмінність CRM від списку контактів в Excel — інформація про історію взаємин із клієнтами. І ці “взаємини” — найчастіше дзвінки, які завершуються угодами.

Тому більшості CRM систем, для комфортної і повноцінної роботи, необхідна інтеграція з телефонією. І WebRTC це найпростіший у використанні варіант інтеграції.

Після налаштування це буде виглядати як веб-телефон у кутку браузера, через який можна дзвонити і приймати дзвінки. Виглядає він ось так:

Як вбудувати веб телефон на свій сайт?

Почати варто з авторизації. Для отримання прав на дзвінки потрібні ключі авторизації. Ваші — якщо система для своєї компанії або ключі клієнтів — якщо система для широкого використання.

Тепер по пунктах:

1. Ваші користувачі реєструються в Zadarma, включають АТС і копіюють ключі API з нашої системи в вашу. Важливо, що це потрібно зробити для кожного аккаунта. Якщо ви розробляєте систему для себе, то взагалі це варто зробити тільки раз.
2. Після копіювання ключа потрібно задати кожному співробітникові свій номер АТС. У цьому допоможе API і метод /v1/pbx/internal/. Через нього завантажуєте список номерів АТС вашого клієнта, просите клієнта вказати у якого його співробітника який номер в АТС і все це зберігаєте у себе.

Як приклад:

<?php
 
use Zadarma_API\Api;
 
if (isset($_GET['zd_echo'])) {
    exit($_GET['zd_echo']);
}
 
require_once __DIR__ . '/../vendor/autoload.php';
 
$key = 'YOUR_KEY';
$secret = 'YOUR_SECRET';
 
$api = new Api($key, $secret);
$pbxInternal = $api--->getPbxInternal();
//your code to save $pbxInternal->numbers
 
$balance = $api->getBalance();
 
?> 

Для того, щоб додати код на сайт потрібно, для початку, зробити запит на тимчасовий ключ (який діє 72 години) через метод /v1/webrtc/get_key/. І вже після цього додаємо віджет з цим ключем до вашого інтерфейсу:

<?php
 
/**
 * SIP login or login of PBX extension number
 */
$login = 'YOUR_LOGIN';
 
$webrtcKey = $api--->getWebrtcKey($login)->key;
//your code to save $webrtcKey, expiration time 72 hours.
 
?>

<script src="https://my.zadarma.com/webphoneWebRTCWidget/v8/js/loader-phone-lib.js?v=23"></script>
<script src="https://my.zadarma.com/webphoneWebRTCWidget/v8/js/loader-phone-fn.js?v=23"></script>
<script>
    if (window.addEventListener) {
        window.addEventListener('load', function () {
            zadarmaWidgetFn('<?= $webrtcKey?>', '<?= $login?>', 'square' /*square|rounded*/, 'en' /*ru, en, es, fr, de, pl, ua*/, true, "{right:'10px',bottom:'5px'}");
        }, false);
    } else if (window.attachEvent) {
        window.attachEvent('onload', function () {
            zadarmaWidgetFn('<?= $webrtcKey?>', '<?= $login?>', 'square' /*square|rounded*/, 'en' /*ru, en, es, fr, de, pl, ua*/, true, "{right:'10px',bottom:'5px'}");
        });
    }
</script>

Зверніть увагу, що це приклад. Актуальний код ви можете скопіювати в особистому кабінеті.

Тут же замість YOUR_KEY потрібно підставити згенерований для вас ключ, замість YOUR_SIP вкажіть ваш SIP-номер або повний логін внутрішнього номера АТС, з якого плануєте здійснювати дзвінки.

ДУЖЕ ВАЖЛИВО!

Не ставте віджет у відкритому доступі в мережі, інакше через ваш аккаунт зможе зателефонувати будь-який бажаючий.

---

Після виконання цих простих налаштувань, ваші клієнти та/або співробітники зможуть дзвонити і приймати дзвінки безпосередньо з вашої системи.

І ще трішки

Після того як ви налаштуєте інтеграцію, вам може спасти на думку — а що ще можна до цього додати? Як мінімум, дозвольте вашим користувачам бачити статистику про дзвінок і здійснювати будь-які дії. Наприклад, створювати лід або тікет.

Ось лише короткий список функцій інтеграції з власною CRM:

• Спливаюче вікно з інформацією про абонента і посиланням на картку клієнта;
• Статистика дзвінків і записи розмов в картці клієнта;
• Дзвінки з CRM в один клік;
• Автоматичне створення контактів, лідів і угод при отриманні дзвінка від нового клієнта;
• Автоматичне перенаправлення дзвінка на відповідального менеджера під час дзвінка від вже відомого клієнта;

Інструкцію з реалізації цих функцій ви можете знайти тут.