Call center + Mobile Phone

Возможность интеграции с любым вэб сервисом для осуществления взаимодействия с SIP телефонией.

JavaScript API

webPhone.init(args);

Подключите основной код функцией webPhone.init, как показано в примере.

Основной код рекомендуется размещать внизу страницы, перед закрывающим тегом </body>

Аргументы (args):

```
domain
```
- url страницы
```
watch
```
- объект содержаший callback-функции для отслеживания и обработки состояний расширения webphone
- ```
connect
```
  - callback-функция c информацией о состоянии подключения
- ```
timer
```
  - callback-функция c информацией о таймере текущего звонка
- ```
call
```
  - callback-функция c информацией о текущем звонке
- ```
history
```
  - callback-функция c информацией о расширении web-phone
- ```
extention
```
  - callback-функция c информацией о истории вызовов в рамках текущей сессии
- ```
devices
```
  - callback-функция с информацией об аудиоустройствах, используемых расширением webphone

webPhone.connect(args);

Для авторизации пользователя с веб страницы используется функция connect, которая принимает объект (args) с необходимыми параметрами

Аргументы (args):

```
remember
```
boolean - сохранение пользователя для автоматической повторной авторизации
```
login
```
- логин пользователя
```
password
```
- пароль пользователя
```
socket
```
- socket url, вида wss://sip.example.ru:8080

webPhone.call(phoneNumber);

Совершает исходящий вызов

phoneNumber

string - номер телефона<

webPhone.answer();

Ответить на входящий вызов

webPhone.hangup();

Завершить текущий вызов

webPhone.hold();

Удерживать текущий вызов

webPhone.muteMic(isMicrophoneOff);

isMicrophoneOff

boolean - включить или выключить микрофон,

true

- выключить микрофон,

false

- включить микрофон

webPhone.changeVolume(volumeLevel);

Изменяет уровень громкости вывода аудио

volumeLevel

number|string - число от 0 до 100, соответствует уровню громкости

webPhone.transfer(webPhone.transferPhoneNumber);

Совершает переадресацию текущего вызова

transferPhoneNumber

string - номер телефона для переадресации

Подключение:

      webPhone.init({
   domain: window.location.href,
   watch: {
         connect: function (data) {
            console.log(data);
         },
         call: function (data) {
            console.log(data);
         },
         timer: function (data) {
           console.log(data);
         },
         history: function (data) {
            console.log(data);
         },
         extention: function (data) {
            console.log(data);
         },
         devices: function (data) {
            console.log(data);
         }
   },
});

Авторизация:

      webPhone.connect({
    remember: true,
    login: login,
    password: password,
    socket: socket,
});

Исходящий вызов:

      webPhone.call(document.querySelector('#phoneNumber').value);

Ответить на звонок:

      webPhone.answer();

Завершить текущий вызов:

      webPhone.hangup();

Удерживать текущий вызов:

      webPhone.hold();

Возобновить текущий вызов:

      webPhone.unhold();

Включить/выключить микрофон:

      webPhone.muteMic(true);

Включить/выключить вывод аудио:

      webPhone.muteAudio(true);

Изменить громкость вывода аудио:

      webPhone.changeVolume(50);

Переадресация текущего:

      webPhone.transfer(document.querySelector('#transferNumber').value)

Для удобства понимания работы библиотеки webPhone.js, мы подготовили пример, который размещен на этой странице

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://zvonilka.xsquare.ru/web-phone/webPhone.js"></script>
</head>

<body>
    <div class="wrap">
        <div class="container">
            <h1>Пример использования webPhone.js</h1>
            <form id="loginForm" onsubmit="connect(event)">
                <fieldset>
                    <legend>Авторизация</legend>
                    <input type="text" id="login" placeholder="Логин" />
                    <input type="text" id="password" placeholder="Пароль" />
                    <input type="text" id="socket" placeholder="URL" />
                    <input type="submit" value="Аутентификация">
                </fieldset>
            </form>
            <fieldset>
                <legend>Соединение (watch.connect)</legend>
                <code id="connectJson">-</code>
            </fieldset>
            <fieldset>
                <legend>Звонок (watch.call)</legend>
                <code id="callJson">-</code>
            </fieldset>
            <form id="phone" onsubmit="return false">
                <fieldset>
                    <legend>Телефон</legend>
                    <input type="text" id="number" placeholder="Телефон" />
                    <button onclick="webPhone.call(document.querySelector('#number').value)">Позвонить</button>
                    <button onclick="webPhone.answer()">Ответить на звонок</button>
                    <button onclick="webPhone.hangup()">Завершить</button>
                    <button onclick="webPhone.hold()">Удерживать</button>
                    <button onclick="webPhone.unhold()">Возобновить</button>
                    
                    <button onclick="webPhone.muteMic(false)">ВКЛ. МИКРОФОН</button>
                    <button onclick="webPhone.muteMic(true)">ВЫКЛ. МИКРОФОН</button>
                    
                    <button onclick="webPhone.muteAudio(false)">ВКЛ. АУДИО</button>
                    <button onclick="webPhone.muteAudio(true)">ВЫКЛ. АУДИО</button>
                    
                    <span>Громкость:</span>
                    <input type="range" id="volumeRange" oninput="webPhone.changeVolume(this.value)" name="volume"
                        min="0" max="100">
                </fieldset>
            </form>
            <fieldset>
                <legend>Таймер (watch.timer)</legend>
                <code id="timerJson">-</code>
            </fieldset>
            <form id="transfer" onsubmit="return false">
                <fieldset>
                    <legend>Перевести звонок</legend>
                    <input type="text" id="transferNumber" placeholder="Номер" />
                    <button
                        onclick="webPhone.transfer(document.querySelector('#transferNumber').value)">Перевести</button>
                </fieldset>
            </form>
            <fieldset>
                <legend>Устройста (watch.devices)</legend>
                <code id="devicesJson">-</code>
            </fieldset>
            <fieldset>
                <legend>История вызовов (watch.history)</legend>
                <code id="historyJson">-</code>
            </fieldset>
            <fieldset>
                <legend>Информация о расширении (watch.extention)</legend>
                <code id="extentionJson">-</code>
            </fieldset>
        </div>
    </div>
    <script>
        webPhone.init({
            domain: window.location.href,
            watch: {
                connect: function (data) {
                    document.querySelector('#connectJson').innerHTML = JSON.stringify(data);
                },
                call: function (data) {
                    document.querySelector('#callJson').innerHTML = JSON.stringify(data);
                },
                timer: function (data) {
                    document.querySelector('#timerJson').innerHTML = JSON.stringify(data);
                },
                history: function (data) {
                    document.querySelector('#historyJson').innerHTML = JSON.stringify(data);
                },
                extention: function (data) {
                    document.querySelector('#extentionJson').innerHTML = JSON.stringify(data);
                },
                devices: function (data) {
                    document.querySelector('#devicesJson').innerHTML = JSON.stringify(data);
                    document.querySelector('#volumeRange').value = data.volume;
                }
            },
        });

        function connect(evt) {
            evt.preventDefault();
            const login = document.querySelector('#login').value;
            const password = document.querySelector('#password').value;
            const socket = document.querySelector('#socket').value;
            webPhone.connect({
                remember: true,
                login: login,
                password: password,
                socket: socket,
            });
        };
        window.onload = function () {
            webPhone.saveDomain(window.location.href);
        }
    </script>
    <style>
        .container {
            max-width: 980px;
            margin: 0 auto;
        }
    </style>
</body>

</html>

Преимущества

Быстрая установка в Google Chrome
Запись звонков
Звонок не прерывается при обновлении страницы браузера
Простое javascript API для интеграции

Уникальная разработка, позволяющая внедрить вэб телефонию в любой вэб интерфейс (сайт, CRM и многое другое).

Call center + Mobile Phone

Возможность интеграции с любым вэб сервисом для осуществления взаимодействия с SIP телефонией.

JavaScript API

Преимущества

Кто уже реализовал it системы с помощью LCDP