Звонок с сайта ¶

Интеграция Звонок с сайта:

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

Термины и сокращения ¶

АТС – виртуальная АТС, которая используется для приема и обработки телефонных вызовов.

Кнопка – визуальная кнопка, появляется на сайте после интеграции.

Сайт – сайт клиента, на котором размещена кнопка.

Веб-звонок – осуществление звонка из браузера клиента по протоколу webRTC (по клику на Кнопку) с использованием гарнитуры или встроенных в устройство клиента динамика и микрофона.

Форма обратного вызова – форма для ввода номера телефона клиентом.

Обратный вызов – осуществление звонка АТС по номеру указанному в Форме обратного вызова, после ответа клиентом звонок переводится АТС в очередь колл-центра, CRM-систему, на Внутренний номер или мобильный телефон оператора.

Индивидуальный индентификатор - уникальный идентификатор виджета, для каждого свой.

Token – случайный набор данных, используемый для формирования запросов между АТС и Сайтом.

Подключение интеграции ¶

Зайдите в личный кабинет виртуальной АТС с правами администратора, в раздел Маркетплейс и нажмите на модуль Звонок с сайта:
Убедитесь, что Статус в положении вкл, как на рисунке и добавьте Виджет кликом на кнопку:

Можно добавить любое количество виджетов. Каждый виджет будет иметь свой Индивидуальный индентификатор:

Удалить ненужный виджет можно кликом на кнопку .
Можно выбрать 2 разных типа вызовов для виджета: Обратный вызов и Через веб-телефон. (см. Типы интеграции)
Выберите маршрут, который будет отвечать за внутреннюю маршрутизацию (см. раздел domain_dp_base):

Для попадания звонка на очередь колл-центра, простейший внутренний маршрут будет выглядеть так:

Условия маршрутизации задаются как на рисунке:
При выборе типа вызовов в значении Обратный вызов появляются дополнительные поля:
Группа для исходящих вызовов (см. раздел Группы)

Время жизни задачи (время в секундах, в течении которого будет выполняться задача)

Попытки выполнения (число попыток выполнить задачу, дозвонитьтся клиенту)

Задержка между попытками (время в секундах между попытками вызовов)
Примечание

Для корректой маршрутизации исходящего вызова должен быть создан исходящий маршрут, и в условиях маршрутизации выбрана группа, указанная в поле Группа для исходящих вызовов
После сохранения настроек можно скопировать Код вставки виджета на сайт по кнопке копировать .

На этом подключение интеграции завершено!

Удаление и отключение интеграции ¶

Удалить ненужный виджет можно кликом на кнопку . Когда все виджеты в интеграции удалены, интеграция становится не активной. Также можно на время отключить интеграцию, переведя переключатель Статус в положение выкл.

Вставка виджета на сайт ¶

Далее скопированный виджет (код и параметры описаны в разделе Код виджета для разработчиков), необходимо вставить в блок <body></body> вашего сайта. После этого на сайте появится Кнопка .

Тестирование настроек виджета ¶

Виджет можно протестировать из формы без непосредственного размещения на сайте. На каждой вкладке, после сохранения интеграции, появляется кнопка Звонить . При нажатии на которую, будет произведена попытка звонка с параметрами, заданными на вкладке.

Типы интеграции ¶

Виджет работает в трех режимах:

Режим Обратный вызов - параметр type равен 0 в коде инициализации виджета (см. строка 16 в Код виджета для разработчиков).
Заполняется автоматически, изменять код вставки не требуется. В этом режиме при нажатии на Кнопку будет показана Форма обратного вызова для ввода номера и совершен Обратный вызов при подтверждении ввода.
Режим Через веб-телефон - параметр type равен 1 в коде инициализации виджета (см. строка 16 в Код виджета для разработчиков).
Заполняется автоматически, изменять код вставки не требуется. В этом режиме Кнопка появится на сайте только после проверки доступности гарнитуры или встроенных средств связи в устройство, проверки браузера на поддержку технологий.
Режим Настраиваемый - параметр type равен 2 в коде инициализации виджета (см. строка 16 в Код виджета для разработчиков).
Для этого режима необходимо исправить код вставки в ручную. Необходимо создать в интеграции виджеты с типами Через веб-телефон и Обратный вызов.

Индивидуальный индентификатор из виджета Через веб-телефон должен быть подставлен в код вставки в поле processing (см. строка 3 в Код виджета для разработчиков).

Индивидуальный индентификатор из виджета Обратный вызов должен быть подставлен в код вставки в поле processing2 (см. строка 4 в Код виджета для разработчиков).

Код виджета для разработчиков ¶

Код вставки состоит из 3-х блоков:

Блок для вставки HTML-кода.

<div id="callback_content"></div>
<script> ... </script>

Кода загрузки виджета на языке JavaScript

    const cdn_server="https://адрес вашей АТС";
    const call_server="https://адрес вашей АТС";

    ... {Код загрузки модулей} ...

Функции инициализации виджета с заданными параметрами

    api('init',{
        "contentId":"callback_content",
        "processing":"74a9...",
        "processing2":"245a...",
        "lang":{
            "title":"Вам перезвонить?",
            "body":"Укажите номер телефона и мы вам перезвоним.",
            "placeholder":"Номер для перезвона",
            "error":"Введен не корректный номер",
            "pattern":"-?[0-9]*(\\.[0-9]+)?",
            "btn_ok":"Жду звонка!",
            "btn_cancel":"Отмена",
            "invalid":"Некорректный номер",
            "message":"С Вами скоро свяжется наш сотрудник!"
        },
        "type":2,
        "key":"Token",
        "server":"https://адрес вашей АТС/integration/webcall/"
    });

Настройка виджета для разработчиков ¶

Рассмотрим параметры кода вставки (Код виджета для разработчиков).

Блок 2 содержит 2 переменные call_server - адрес подключения АТС и cdn_server - адрес расположения компонент виджета.

По умолчанию переменные содержат одинаковые ссылки, но если Вы хотите использовать старые версии библиотек или экспериментальные, то cdn_server - может отличаться.

Рассмотрим параметры блока 3:

contentId - идентификатор HTML-тега, внутри которого будет загружен виджет;
processing - Индивидуальный индентификатор виджет Вашей интеграции;
processing2 - Индивидуальный индентификатор для виджет Обратный вызов, используется только с type равным 2;
lang - языковые настройки Формы обратного вызова;
type - режим работы виджета (см. Типы интеграции);
key - Token для взаимодействия с АТС;
server - адрес API для взаимодействия с АТС.

Также Вы можете менять стили Кнопки и Формы обратного вызова. Для этого понадобятся хотя бы элементарные знания и навыки работы со стилями (CSS).

Например, поменять цвет Кнопки:

.widget-webcall .mdc-fab {
        background-color: orange;
}

Изменить цвет кнопок на Форме обратного вызова:

.widget-webcall .mdc-button--raised:not(:disabled) {
        background-color: #6200ee;
}

Задать картинку на Форме обратного вызова:

.widget-webcall .mdc-dialog__surface {
        background-image: url('Путь до Вашей картинки');
        background-size: cover;
}

Либо Вы можете глобально поменять настройки виджета:

:root {
        --mdc-theme-primary: #6200ee;
        /* установить основной цвет */

        --mdc-theme-secondary: #6200ee;
        /* установить дополнительный цвет */

        --mdc-theme-on-primary: #000;
        /* цвет поверх основного цвета, например, текста */

        --mdc-typography-font-family: Roboto;
        /* изменить шрифт */
}

Для более детального изучения механизма кастомизации стилей читайте здесь