panfilov.digital panfilov.digital
AngularJS, SPA, White label, Интеграции и API, Личные кабинеты
Сайт, каталог оборудования, кабинет и интерфейс виртуальной АТС

Сайт, каталог оборудования, кабинет и интерфейс виртуальной АТС

КЛИЕНТ

«Зебра Телеком» входит в группу «Ростелеком» и продаёт связь бизнесу: виртуальную АТС, отслеживание звонков, номера 8-800. Клиент здесь — компания, а подключение согласуют несколько человек сразу.

САЙТ, КОТОРЫЙ РАБОТАЕТ КАК МАГАЗИН

Телеком обычно продаёт через заявку и звонок менеджера. Мы собрали корпоративный сайт по логике интернет-магазина: услугу можно выбрать, положить в корзину и оформить, не связываясь с отделом продаж.

На главной — основные направления, внутри услуги уточняются детали: тариф, красивый номер, срок. Для IP-телефонии нужны специальные аппараты, поэтому оборудование вынесли в отдельный каталог с фильтрами.

Каталог IP-телефонов с фильтрами по характеристикам

ЛИЧНЫЙ КАБИНЕТ ДЛЯ ЮРЛИЦ

Кабинет собран под корпоративного клиента, а не под частного абонента. Реквизиты счёта вынесены в отдельный раздел — они нужны бухгалтерии постоянно. Номера 8-800 приостанавливаются в один клик, переадресация настраивается там же.

Оплата — картой, банковским переводом или электронным кошельком, счёт на юридическое лицо формируется прямо в кабинете.

Личный кабинет: услуги, номера и оплата в одном окне

ИНТЕРФЕЙС ВИРТУАЛЬНОЙ АТС

Бэкенд облачной АТС у заказчика был готов, наша часть — фронтенд поверх его API. Начали с UX-исследования: телефонная станция — это десятки настроек, и в них нужно разобраться человеку, который не занимается связью профессионально.

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

Настройки виртуальной АТС: сценарии звонка и голосовое меню

КАК СОБИРАЛИ ИНТЕРФЕЙС

Собрали одностраничное приложение поверх API телефонной платформы Kazoo — той самой, что маршрутизирует звонки. Оператору важно, чтобы настройка не уводила инженера в консоль, поэтому все действия (от переадресации до сценария) делаются в одном окне и применяются сразу.

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

Интерфейс покрыли автотестами. Для внутреннего продукта оператора это не роскошь: ошибка в сценарии звонка стоит клиенту потерянных вызовов, а не сломанной вёрстки.

ОДИН ИНТЕРФЕЙС — ДВА ОПЕРАТОРА

Тот же интерфейс работал под двумя брендами: «АТС ЗебраТелеком» и «Центральный Телеграф». Мы заложили это заранее — адрес сервера, логотипы, набор иллюстраций и язык задаются настройками, а тексты живут в словарях, а не в вёрстке.

По сути получился white label до того, как это стали так называть: оператор мог продавать облачную АТС под собственной маркой, не заказывая интерфейс заново.

Технологии

AngularJS, SPA, Kazoo API, Gulp, Karma, Stylus, PHP

Услуга по этому проекту

B2B-порталы и личные кабинеты

Персональные цены, остатки, резерв товара, договоры и счета. Оптовые продажи переезжают из почты и мессенджеров в систему.

Следующий проект

Стартап по вызову мастера на дом: сайт, приложения и продуктовая команда