Термины и определения:

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

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

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

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

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

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

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

Веб-звонок – осуществление звонка из браузера клиента по протоколу 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;         /* изменить шрифт */ }

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

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

Навигация:

Термины и определения:

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

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

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

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

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

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

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

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

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

Подключить облачную телефонию просто

ООО «Сервис-Коммюникэйшн»

Отдел по работе с клиентами

Техническая поддержка