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

Звонки напрямую из браузера, без использования дополнительных настроек и приложений — конечно, не чудо света, но функция полезная. Благодаря 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 в один клик;
• Автоматическое создание контактов, лидов и сделок при звонке от нового клиента;
• Автоматическое перенаправление звонка на ответственного менеджера при звонке от уже известного клиента;

Инструкцию по реализации этих функций вы можете найти здесь.