CTI-панель (на стороннем сайте)

Примечание

технология WebRTC работает стабильно только на Chromium-подобных браузерах: Google Chrome, Яндекс Браузер, Microsoft Edge, Chromium.

Установка

В тег head вставьте ссылку на стиль:

<link rel="stylesheet" href="https://pbx.runtel.org/assets/widgets/cti-panel/styles.css">

Предупреждение

вместо pbx.runtel.org в ссылках Вам необходимо указать адрес вашего личного кабинета.

В нужное место страницы вставить код самой панели:

<div class="cti-panel cti-panel-wrapper"><cti-panel-root><div id="loader" class="bg-loader"><div class="r-loader"></div></div></cti-panel-root></div>

В конец тега body вставить скрипты в перечисленном порядке:

<script src="https://pbx.runtel.org/assets/widgets/cti-panel/runtime.js" defer></script>
<script src="https://pbx.runtel.org/assets/widgets/cti-panel/polyfills.js" defer></script>
<script src="https://pbx.runtel.org/assets/widgets/cti-panel/scripts.js" defer></script>
<script src="https://pbx.runtel.org/assets/widgets/cti-panel/main.js" defer></script>

Предупреждение

вместо pbx.runtel.org в ссылках Вам необходимо указать адрес вашего личного кабинета.

Укажите параметр source, в который указывается путь к личному кабинету. Он может отличаться от пути откуда загружаются скрипты.

<cti-panel-root source="https://pbx.runtel.org/">

Примечание

Авторизация в CTI-панели происходит по Сотруднику.

Параметр locale отвечает за возможность выбора языка. Если выставить значение данного параметра в false (или убрать), то изменение языка у панели будет спрятан, а использоваться будет тот, который задан в настройках системы по умолчанию, без возможности смены.

<div class="cti-panel cti-panel-wrapper">
        <cti-panel-root source="https://lk-rjdtest.pbx.megafon.ru/" locale="true">
                 <div id="loader" class="bg-loader"><div class="r-loader"></div></div>
        </cti-panel-root>
</div>

События CTI-панели

  • incall - событие на входящий вызов, возвращает входящий номер клиента и имя звонящего.

  • answer - событие на ответ оператора, возвращает входящий номер клиента.

Подписаться на данные события необходимо в событии инициализации CTI-панели cti-panel-init главного элемента cti-panel-root:

document.querySelector('cti-panel-root').removeEventListener('cti-panel-init', (evt)=>{}); // вызывается после каждого входа в панель, поэтому нужно очистить, прежде чем подписываться
document.querySelector('cti-panel-root').addEventListener('cti-panel-init', evt => {
  console.log('%cПодписка на инициализаццию CTI-панели..', 'color: green; font-weight: 700;');

  document.querySelector('cti-panel').removeEventListener('incall', (evt)=>{});
  document.querySelector('cti-panel').addEventListener('incall', (evt) => {
    console.log('%cСобытие "Входящий вызов": '+evt.detail.number+', '+evt.detail.name, 'color: green; font-weight: 700;');
  });

  document.querySelector('cti-panel').removeEventListener('answer', (evt)=>{});
  document.querySelector('cti-panel').addEventListener('answer', (evt) => {
    console.log('%cСобытие "Ответ на входящий вызов": '+evt.detail.number+', '+evt.detail.name, 'color: green; font-weight: 700;');
  });
});

Для совершения исходящего вызова нужно:

  1. Определить функцию:

function callTo(number, name) {
    console.log('%cСовершаю исходящий вызов: '+number+', '+name, 'color: green; font-weight: 700;');
    let incallEvent = new CustomEvent("callTo", {'detail': {number: number, name: name || ''}});
    document.querySelector('cti-panel').dispatchEvent(incallEvent);
}

  1. Использовать метод callTo с передачей в него номера, на который нужно позвонить:

callTo('89000000000', 'ООО РогаКопыта');

Для разрегистрации CTI-панели нужно:

  1. Определить функцию

function ctiPanelLogout() {
    let logoutEvent = new CustomEvent("logout");
    document.querySelector('cti-panel').dispatchEvent(logoutEvent);
}

  1. Использовать метод ctiPanelLogout:

ctiPanelLogout();

Здесь Основная информация по настройке CTI-панели.

Примечание

помните, что при изменении исходящей Группы в разделе c_user, необходимо обновить страницу c CTI-панелью.