Приложение помогает менеджерам сразу после обращения клиента по телефону подготовить персональное коммерческое предложение (с учётом скидки, модели, монтажа и количества).
Приложение было создано для оптимизации работы менеджеров по продажам и повышения конверсии обращений в реальные сделки. Оно генерирует PNG/PDF, которые отправляются в мессенджеры. Это повысило доверие к компании и обеспечило рост продаж минимум на 40 %.
Ключевая особенность — приложение изначально проектировалось как мобильное веб-приложение, чтобы менеджер мог работать не только из офиса, но и с любого смартфона. При обращении клиента по телефону менеджер, даже находясь в дороге или на объекте, вносит информацию в приложение и после звонка сразу отправляет в мессенджер готовое коммерческое предложение.
💡 Коротко: Как работает?
Менеджер вносит информацию:
При обращении клиента по телефону менеджер вносит информацию в приложение и после звонка сразу отправляет в мессенджер готовое коммерческое предложение со скидкой и полным расчётом.
Клиент получает:
Клиент получает готовое, визуальное предложение, не забывает условия — выбор падает в нашу пользу. А данные автоматически попадают в клиентскую базу: менеджеры могут дозваниваться и предлагать скидки повторно.
▶️ Про продукт: Цели и технологии
Основная задача — создать внутренний инструмент для менеджеров компании splitberry.by, который позволил бы быстро формировать персонализированные коммерческие предложения, автоматизировать расчёты и вести учёт клиентов.
Проект был реализован по принципу "mobile-first", так как для настольных компьютеров в компании уже использовалось другое решение (оно разработано, так же мной и будет описано в другой статье). Главный фокус был на том, чтобы менеджеры могли эффективно работать со смартфонов без привязки к рабочему месту.
Мой личный вклад: Я лично разрабатывал всё приложение с нуля, включая:
- Проектирование интерфейса (UI/UX) и логики калькулятора.
- Frontend-разработку на Angular с использованием библиотеки компонентов PrimeNG.
- Backend-разработку на фреймворке Laravel для обработки данных и подключения к базе.
- Создание графических элементов (баннеров).
Дизайн и брендинг:
Цветовая палитра была подобрана на основе логотипа компании для сохранения фирменного стиля:
- Фон: белый (#fff)
- Кнопки и акцентные элементы: синий (#3b82f6)
- Фон меню: голубой (#a4c7ff)
- Фон боковых меню: background-color: #e8e8e8;
🔧 Функционал и реализация web приложения
1. Форма регистрации и авторизации
Для доступа к системе реализована страница входа (https://splitberry.by/ip/login).
- Реализация: Для переключения между формами входа и регистрации используется компонент p-tabView из библиотеки PrimeNG.
- Валидация: Поля ввода проверяются на корректность заполнения и наличие запрещённых символов в реальном времени. В случае ошибки под полем мгновенно появляется текстовое уведомление красного цвета, что делает процесс исправления интуитивно понятным.
2. Главная страница и верхнее меню
После авторизации пользователь попадает на главный экран, который является ядром приложения.
Верхнее меню
Меню содержит две основные кнопки по бокам и логотип компании по центру.
- Кнопка «Монтаж» (слева): При нажатии плавно выезжает боковая панель, где менеджер может указать стоимость стандартного монтажа кондиционера, а также добавить и оценить любые дополнительные работы (например, прокладка трассы свыше стандарта, высотные работы и т.д.).
- Кнопка «Заказчик» (справа): Открывает правую боковую панель. Здесь настраиваются параметры конкретного предложения:Количество кондиционеров.
Имя, телефон и адрес заказчика.
Персональная скидка в процентах (%).
Сумма предоплаты.
Выбор рекламного баннера для шапки предложения.
Поле для дополнительной информации.
Все изменения, вносимые в этих меню, мгновенно отображаются в основном блоке коммерческого предложения.
3. Основной блок main (область для сохранения файла)
Это центральная часть страницы, которая и формирует итоговый документ.
- Header: Вверху располагается шапка с логотипом, слоганом компании, временем работы и контактными телефонами. Как только менеджер вводит данные клиента (имя, телефон, адрес), они автоматически появляются в шапке, персонализируя предложение.
- Баннер: Ниже идёт яркий баннер, который можно сменить в меню «Заказчик» для разных акций или типов клиентов.
- Секция «Оборудование»:Слева расположено изображение кондиционера. Изначально это заглушка.
Над изображением находится кнопка выбора модели, реализованная с помощью компонента p-panelMenu (PrimeNG). Она открывает многоуровневый список: Бренд → Серия → Модель.
При выборе конкретной модели приложение обращается к базе данных, после чего на странице автоматически обновляются: изображение, технические характеристики (в центре) и цена (справа). - Секция «Монтаж оборудования»: В этот блок подтягиваются все данные, введённые в меню «Монтаж». Здесь же отображается применённая персональная скидка. Внизу секции калькулятор автоматически просчитывает итоговую сумму с учётом стоимости оборудования и всех работ.
- Нижний блок информации:
В футере предложения отображаются условия сделки:
- Срок гарантии.
- Срок доставки.
- Срок выполнения работ.
Эти параметры также настраиваются в меню «Заказчик». Завершается блок фразой «Спасибо за сотрудничество!» и ссылкой на основной сайт компании.
4. Нижнее меню управления
- Кнопка «Сброс» (круглая стрелка): Сбрасывает только информацию о текущем заказчике (ФИО, адрес, скидку), но сохраняет данные о монтаже. Это экономит время менеджера при формировании однотипных предложений для разных клиентов.
- Кнопка «Печать»: Справа расположена ключевая кнопка с селектором формата сохранения: PNG или PDF.PNG: Идеально для быстрой отправки предложения клиенту в мессенджер (Viber, Telegram, WhatsApp).
PDF: Используется для отправки официальных коммерческих предложений на email другим компаниям или требовательным клиентам. - Кнопка «Выход»: Завершает сеанс и возвращает на страницу авторизации.
🎯 Бизнес‑эффект и стратегия
Одной из важнейших бизнес-функций приложения является сбор данных о клиентах.
- Механизм сбора: При нажатии на кнопку «Печать», если не указаны имя и телефон заказчика, появляется модальное окно с требованием заполнить эти поля. Это обязательный шаг.
- Обеспечил полную мобильность сотрудников, позволив им работать с любого смартфона без привязки к офисному компьютеру.
- Мгновенные ответы клиенту повышают конверсию на десятки процентов - проверено!!!
- Ценность данных: Вся информация (контакты клиента, выбранная модель, дата запроса, итоговая стоимость) сохраняется в базу данных. Это формирует ценный актив для компании:Повышение конверсии: Менеджеры могут повторно связываться с клиентами, которые не приняли решение сразу, и предлагать улучшенные условия или большую скидку.
Сегментация клиентов: База позволяет анализировать спрос на определённые модели и бренды.
Повторные продажи: Через полгода-год клиентам можно предлагать плановое техническое обслуживание их кондиционеров.
Маркетинг: Собранная база используется для информирования о новых акциях или продлении гарантии.
📖 Заключение
Разработанное веб-приложение — это не просто калькулятор, а мощный инструмент продаж, который решил сразу несколько бизнес-задач:
- Увеличил конверсию и итоговые продажи на 40%.
- Стандартизировал и ускорил работу менеджеров.
- Повысил лояльность клиентов за счёт быстрого и персонализированного подхода.
- Создал ценный актив в виде структурированной клиентской базы для будущего развития бизнеса.
❓FAQ (Часто задаваемые вопросы)
1. Почему вы выбрали Angular + PrimeNG и Laravel?
Angular + PrimeNG дают гибкий UI и удобный UX, а Laravel — надёжный и быстрый backend.
2. Как быстро можно отправить КП клиенту?
После ввода данных — мгновенно: PNG отправляется в мессенджер, PDF можно отправить другой компании.
3. Как работает генерация KPI‑ФАЙЛОВ?
После ввода всех данных нажимается "Печать" → формат PNG или PDF → файл формируется и сохраняется локально, с проверкой обязательных полей.
4. Как используется база клиентов?
При отправке КП собираются имя, телефон, модель, скидка — данные сохраняются, менеджеры могут напоминать клиентам через полгода или предлагать продление гарантий и сервис.
📬 Мои Контакты
Готовы обсудить ваш проект? Свяжитесь со мной здесь, в LinkedIn, или
по телефону: + 375 (29) 855 55 96
telegram: @DmitrYakovlevDev
email: dmitrii.yakovlev@mail.ru
Спасибо, что дочитали статью!
С уважением, Дмитрий Яковлев
#вебразработка #созданиесайтов #кейс #ecommerce #frontend #SEO
#web-приложение #дизайн #Angular #брендинг #Минск #разработчик
#увеличение продаж