Разработка и внедрение редактора фотокниг для сайта ООО «Шадринский дом печати»

razrabotka_web_prilozheniy_na_wordpress

Вид интеграции: внедрение CRM.

Цель: внедрение модулей CRM для организации корректной и качественной работы полиграфического производства.

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

Функционал редактора должен включать следующие возможности:

  1. Вариация компоновок.
  2. Возможность добавления шрифтов.
  3. Возможность загружать фотографии с компьютера.
  4. Возможность загружать арт объекты для стилизации фотокниг.
  5. Возможность устанавливать рамки фотокниг.
  6. Возможность приближать и убавлять рабочую область.
  7. Визуализация посредством дизайна корешков и линий загиба фотокниг.
  8. Возможность добавления страниц в фотокнигу.
  9. Возможность выбора типа бумаги и доп. услуги (например: подарочная коробка).
  10. Функционал отправки собранной фотокниги на почту заказчика.

Функционал редактора

Вариация компоновок

Мы разработали и внедрили в фоторедактор для сайта Заказчика функционал вариации компоновок для создания фотокниг пользователей. Компоновка содержит в себе более 4 страниц, с индивидуальным принтом и украшениями, текстом и рамками. Пользователь, выбирая готовую компоновку может разместить свои фотографии и отправить Заказчику на печать.

Данный функционал был реализован нами на языке программирования php и внедрен в CMS WordPress.

Изображение 1 — Выбор готовой компоновки

Возможность добавления шрифтов

Мы внедрили в фоторедактор для сайта Заказчика функционал добавления различных шрифтов в фотокниги.

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

Изображение 2 — Добавление шрифтов в редакторе

Возможность загружать фотографии с компьютера

Мы разработали и внедрили в фоторедактор для сайта Заказчика функционал добавления фотографий с компьютера.

Для добавления фотографии необходимо перейти в раздел «Фото» и нажать кнопку «Добавить изображение». После нажатия автоматически откроется окно с выбором файла для фоторедактора. Фотография загружается в раздел «Фото», таким образом пользователь может в любой момент использовать фотографию для своего фотоальбома. Количество­ фотографии не ограничено.

Изображение 3 — Выбор фотоизображения с компьютера
Изображение 4 — Добавленное фотоизображение с компьютера

Возможность загружать арт объекты для стилизации фотокниг

Мы разработали и внедрили в фоторедактор для сайта Заказчика функционал загрузки арт объектов для стилизации фотокниги.

Для добавления арт объекта необходимо перейти в раздел «Украшения» и нажать кнопку «Добавить изображение». После нажатия автоматически откроется окно с выбором файла для фоторедактора. Арт объект загружается в раздел «Украшения», таким образом пользователь может в любой момент использовать арт объект для своего фотоальбома. Количество­ украшений не ограничено.

Изображение 5 — Добавление арт объекта в фоторедактор с компьютера
Изображение 6 — Добавленный арт объект в фотокниге

Возможность устанавливать рамки фотокниг

Мы разработали и внедрили в фоторедактор для сайта Заказчика функционал вставки рамки для фотокниг.

Для добавления рамки необходимо перейти в раздел «Рамки» и нажать кнопку «Добавить изображение». После нажатия автоматически откроется окно с выбором файла для фоторедактора. Рамка загружается в раздел «Рамки», таким образом пользователь может в любой момент использовать её для своего фотоальбома. Количество­ рамок не ограничено.

Изображение 7 — Вставка рамки в фоторедакторе

Возможность приближать и убавлять рабочую область

Мы внедрили в фоторедактор для сайта Заказчика функционал приближения и отдаления рабочей области с помощью колесика мышки или ползунка на рабочей области.

Данный функционал позволить более корректно проработать мелкие детали фотокниги пользователем.

Изображение 8 — Функционал приближения и отдаления

Визуализация посредством дизайна корешков и линий загиба фотокниг

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

При печати корешка будет «невидимая зона» порядка 3-5 мм. если пользователь разместит объект на своей фотокниге за красными линиями велика вероятность того, что объект обрежется.

Поэтому посредством дизайна нами были выделины данные области в фоторедакторе.

Изображение 9 — Корешки и линии загиба

Возможность добавления страниц в фотокнигу

Мы разработали и внедрили в фоторедактор для сайта Заказчика функционал добавления страниц в фотокнигу.

Изображение 10 — Добавление страниц в фотокнигу

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

Мы разработали и внедрили в фоторедактор для сайта Заказчика функционал выбора типа бумаги и дополнительных услуг.

Выбор бумаги реализован в виде выпадающего списка, который содержит в себе следующие виды бумаги:

  1. Мелованная глянцевая.
  2. Мелованная матовая.
  3. Офсетная («Снегурочка»).
  4. Картон односторонний.
  5. Картон двухсторонний.
  6. Картон с тиснением «Лен».
Изображение 11 — Добавление типа бумаги
Изображение 12 — Добавление дополнительных услуг

Функционал отправки собранной фотокниги на почту заказчика

Мы разработали и внедрили в фоторедактор функционал отправки готовой фотокниги Заказчику. Для отправки готовой фотокниги необходимо заполнить форму обратной связи, включающие следующие поля:

  1. Имя.
  2. Почта.
  3. Описание.
  4. Выбор дополнительной услуги при необходимости (например, подарочная упаковка).
Изображение 13 — Форма обратной связи

Программная реализация

Реализация backend (клиентской стороны пользовательского интерфейса) на языке программирования PHP в CMS WordPress

Мы внедрили готовый backend фоторедактора книг на языке программирования PHP в CMS WordPress для сайта Заказчика.

Изображение 14 — PHP код редактора фотокниг

Реализация frontend (программно-аппаратной части сервиса) на языке программирования CSS, HTML

Мы реализовали frontend часть сервиса на языке программирования CSS, HTML.

HTML и CSS – это языки, на которых реализуются страницы сайта/сервиса/cистем. HTML отвечает за текстовое наполнение и структуру, а CSS – за внешний вид.

Изображение 15 — Frontend часть сервиса на языке программирования CSS и HTML

Дизайн редактора согласно цветовым решениям сайта

Мы внедрили дизайн для фоторедактора согласно цветовой схеме сайта Заказчика.

Изображение 16 — Дизайн фоторедактора

Проведение работы по реализации верстки и внедрению на сайт в frontend

После согласования дизайна с Заказчиком нами были проведены работы по реализации верстки и внедрению на сайт в https://dompechati45.ru/.

Изображение 17 — Фоторедактор на сайте https://dompechati45.ru/

Услуги по разработке, доработке и внедрению элементов цифровизации производства для ИП «Постригань В.А.»

vnedrenie_crm_sistem_v_vash_biznes

Вид интеграции: внедрение CRM.

Цель: внедрение модулей CRM для организации корректной и качественной работы интернет-магазина.

Перед нами стояли задачи:

  1. Внедрение модуля «СБИС бухгалтерия Профи».
  2. Внедрение модуля «Торговля и Производство Профи».
  3. Внедрение модуля «Зарплата и кадры».
  4. Установка модуля CRM.
  5. Внедрение модуля «Электронный документооборот. Пакет 1200».
  6. Внедрение модуля «Программы лояльности».
  7. Синхронизация сайта с модулем СRM.
  8. Внедрение модуля онлайн оплаты банковскими картами.

Внедрение модуля «СБИС Бухгалтерия Профи»

Мы установили и активировали модуль «СБИС Бухгалтерия Профи», который позволяет вести бухгалтерский, налоговый и управленческий учет, банк, кассу, склад и взаиморасчеты с покупателями и поставщиками. Бухгалтерия заказчика сможет производить базовый расчет, расчёт заработной платы и кадров, вести электронные трудовые книжки в режиме онлайн, с любого устройства с ЭЦП.

Изображение 1 — Главный экран «СБИС Бухгалтерия Профи»
Изображение 2 — Настройка учетной политики для бухгалтерского учета

Внедрение модуля «Торговля и Производство Профи»

Мы настроили модуль «Торговля и Производство Профи», который позволяет вести полный цикл складского учета: склад, закупки, производство. Также мы настроили синхронизацию каталога с CMS интернет-магазина заказчика, что позволяет автоматически создавать карточки товаров после синхронизации интернет-магазина с модулем «Торговля и производство Профи».

Изображение 3 — Скриншот модуля «Торговля и Производство Профи»

Мы провели обучение сотрудников заказчика работе с модулем «Торговля и Производство Профи» с маркированной продукцией для производителей. Совместно завели склады и каталог. Наши специалисты научили сотрудников заказывать коды маркировки, печатать этикетки, вводить товар в оборот и отгружать покупателям. Также мы настроили и подключили сканер штрихкода, принтер этикеток, плагин для работы с ЭЦП.

Изображение 4 — Скриншот «Заведённые типы номенклатуры в каталоге продукции»
Изображение 5 — Скриншот модуля «Склад»
Изображение 6 — Настроенные карточки товаров в каталоге
Изображение 7 — Панель настроенных печатных форм

Внедрение модуля «Зарплата и кадры»

Мы внедрили и настроили модуль «Зарплата и кадры», который позволяет заказчику:

  • создавать собственные схемы мотивации: описание, настройка расчета сделки по показателям KPI (по документам или внешним данным);
  • производить настройку поощрений и взысканий, бейджей и правил их выдачи;
  • создавать премиальные фонды, осуществлять настройку правил их пополнения и расходования;
  • делать уведомления сотрудникам о получении премии, взыскания или бейджа.

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

Изображение 8 — Скриншот «Настроенная карточка сотрудника с условиями работы, кадровым учетом и допусками»

Установка модуля «CRM»

Мы установили модуль CRM, который позволяет заказчику осуществлять планирование контактов, работать со списками, вести карточку клиента с историей общения. Также создается воронка продаж и аналитика по менеджерам. Заказчик может создавать каталог товаров, создавать документы на отгрузки. Создается автоматическая загрузка платежных поручений, осуществление автоматического контроля за оплатой счетов.

Изображение 9 — Модуль CRM блок воронка продаж

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

Изображение 10 — Модуль CRM блок клиенты и лиды

Внедрение модуля «Электронный документооборот. Пакет 1200»

Мы внедрили модуль «Электронный документооборот. Пакет 1200», который позволяет заказчику осуществлять отправку и получение юридически значимых электронных документов. Модуль может быть интегрирован во внешние почтовые системы. Уведомления о новых документах приходят в виде смс и электронной почты.

Изображение 11 — Настроенный модуль электронные документы, фиксирование стадий прочтения и подписания документов

Также мы научили сотрудников заказчика как принимать и формировать, подписывать и направлять по ЭДО первичные и закрывающие документы, письма и отчеты внутри сети в роуминге.

Изображение 12 — Подписание договоров эл. подписями

Внедрение модуля «Программы лояльности»

Мы внедрили модуль «Программы лояльности», провели обучение сотрудников заказчика, научили как правильно создавать «Бонусную программу», заводить карты лояльности для постоянных покупателей, формировать подарочные сертификаты, вводить систему скидок, зависимую от объёма покупок в месяц. Также мы составили подробную инструкцию использования внедренного модуля.

Изображение 13 — Настройка бонусной программы
Изображение 14 — Настройка скидок
Изображение 15 — Выпуск карты лояльности

Синхронизация сайта с модулем CRM

Мы провели синхронизацию интернет-магазина с модулем CRM, который позволяет заходить в сделку и управлять заказами прямо из карточки CRM. Менеджер отдела продаж заказчика получил возможность в режиме телефонного звонка сформировывать заказ, связанный со сделкой в CRM, создавать новую сделку, не привязывая её ни к какому клиенту. Контактная информация автоматически передаётся в CRM в момент привязки заказа покупателя интернет-магазина к сделке. В зависимости от типа плательщика (физическое или юридическое лицо) создается контакт или компания.

Изображение 16 — Скриншот синхронизации интернет-магазина с CRM
Изображение 17 — Скриншот создания тестового клиента

Внедрение модуля онлайн оплаты банковскими картами

      Мы настроили программу «Касса» для Интернет-магазина. Подключили и настроили онлайн-кассу для фиксации продаж через сайт, также настроили кассовую программу и обучили кассира.

Изображение 18 — Скриншот внедренного модуля «Оплата банковской картой»
Изображение 19 — Настройки кассовой программы для интернет-магазина

Внедрение СRМ-системы для ИП Горбунов Д.А.

vnedrenie_amocrm_v_vash_biznes

Вид интеграции: внедрение AmoCRM

Цель: обеспечение оперативной работы с клиентами и экономии времени; объединение истории общения и клиентской базы; осуществление контроля за работой сотрудников; обеспечение безопасности и надежности клиентов.

Перед нами стояли задачи:

  • Установить и настроить программное обеспечение amoCRM для организации.
  • Настроить интеграцию amoCRM с веб-сайтом, обратной связи, расположенной на веб сайте, почтовым ящиком, WhatsApp, Telegramm, социальной сетью «Вконтакте».
  • Завести сотрудников в систему, распределить роли между ними в программе amoCRM.
  • Добавить сотрудников в систему amoCRM, распределить права доступа.
  • Настроить аналитику в системе amoCRM и рабочий стол для руководителя и пользователей.

Установка и настройка программного обеспечения AmoCRM

Установка amoCRM, представляет собой регистрацию аккаунта организации на официальном сайте CRM-системы: amocrm.ru.

vnedrenie_amocrm
Изображение 1 — Скриншот регистрации (установки) ПО

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

nastroika_lichnogo_kabineta_amocrm
Изображение 2 — Скриншот стартовой страницы личного кабинета amoCRM

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

  • Работать вне офиса.
  • Оперативно реагировать на входящие заявки.
  • Отслеживать актуальные показатели по процессам.
  • Вести работу без доступа к интернету.

Что в свою очередь упрощает и экономит время работы всех сотрудников организации.

ustanovka_amocrm_na_smartfon
ustanovka_amocrm_na_mobilnie_tlefoni
Изображения 3, 4 — Скриншоты установленного программного обеспечения системы AmoCRM на мобильные телефоны

Основная настройка программы AmoCRM (создание карточки организации)

Основная настройка CRM-системы, представляет собой:

  • Заполнение основной информации в разделе «Настройки».
  • Составление и добавление «Воронки продаж».
  • Добавление раздела «Задачи».
  • Добавления списков контактов клиентов организации.
nastroiki_amocrm
Изображение 5 — Скриншот раздела Настройки

На изображение 5 показан процесс заполнения и настройки основной информации:

  • Заголовок.
  • Создание адреса субдомена.
  • Настройка часового пояса, формат даты и времени, страны нахождения и валюты.
  • Выбор языка интерфейса.
  • Активация функционала «Периодические покупки» и «Товары».
vnedrenie_sistem_crm
Изображение 6 — Скриншот раздела Настройки пунктов левого меню

На изображении 6 показан процесс создания и добавления пунктов левого навигационного меню, для более удобный работы в CRM-системе.

Добавлены следующие пункты:

  • Рабочий стол.
  • Сделки.
  • Задачи.
  • Списки.
  • Почта
  • Аналитика.

Нами, совместно с сотрудниками отдела продаж заказчика, составлен список этапов для «Воронки продаж», описан бизнес процесс продажи продукции. Этапы продажи были перенесены нами в систему amoCRM.

ustanovka_amocrm_na_pk
Изображение 7 — Скриншоты окна «Воронка продаж»

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

Veb_razrabotka_ot_kompanii_Perec
Изображение 8 — Скриншот раздела «Задачи»

На изображении 8 показан настроенный функционал раздела «Задачи». Задачи имеют следующую спецификацию:

  • Просроченные задачи.
  • Задачи на сегодня.
  • Задачи на завтра.
  • Задачи на текущую неделю.
  • Задачи на следующую неделю.

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

Настройка интеграции AmoCRM с веб-сайтом, обратной связью, расположенной на веб сайте, почтовым ящиком, WhatsApp, Telegramm, социальной сетью «Вконтакте»

Интеграция AmoCRM с веб-сайтом

Заказчику требовалось настроить обмен данными с веб-сайтом. Нами был подключен и настроен виджет «Envybox», сформирован и внедрен скрипт безопасности в body (тело) веб-сайта. Интеграция с веб-сайтом позволяет подключать различные модули и модификации для автоматизации процесса обработки информации, поступающей с веб сайта.

integraciya_amocrm_s_veb_saitami
Изображение 9 — Скриншот окна «Виджет Envybox»
integraciya_amocrm
Изображение 10 — Скриншот окна «Настройка синхронизации с сайтом»

Интеграция AмоCRM с формой обратной связи, расположенной на веб-сайте

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

Изображение 11 — Скриншот окна «Обработка формы обратной связи с сайта»
amocrm_integraciya_s_formoi+obratnoi_svyazi
Изображение 12 — Скриншот окна «Создана новая заявка с сайта»

Интеграция почтового ящика в AmoCRM

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

integraciya_pochtovogo_yahsika_s_amocrm
Изображение 13 — Скриншот окна «Интеграция почтового ящика в amoCRM»

Интеграция AmoCRM с WhatsApp

Заказчику требовалось настроить обмен сообщениями между мессенджером WatsApp и amoCRM. Мы установили и настроили виджет «Wazzup». Функционал данного виджета позволяет всем пользователям (с выданными правами доступа) вести переписку с потенциальными клиентами из amoCRM.  Если сотрудник отсутствует на рабочем месте, amoCRM автоматически создает новый контакт и делает уведомление сотруднику о необходимости связаться с потенциальным клиентом.

integraciya_amocrm_s_whatsapp
Изображение 14 — Скриншот настройки виджета «Wazzup»
amocrm_v_whatsapp
Изображение 15 — Скриншот окна «Синхронизация amoCRM виджета «Wazzup»

Интеграция AmoCRM с Telegram

Заказчику требовалось настроить обмен сообщениями между мессенджером Telegram и amoCRM. Мы установили и настроили виджет «Telegram». Функционал данного виджета позволяет всем пользователям (с выданными правами доступа) вести переписку с потенциальными клиентами из amoCRM.  Если сотрудник отсутствует на рабочем месте, amoCRM автоматически создает новый контакт и делает уведомление сотруднику о необходимости связаться с потенциальным клиентом.

amocrm_v_telegram
Изображение 16 — Скриншот настройки виджета «Telegram»

Интеграция AmoCRM с социальной сетью «Вконтакте»

Заказчику требовалось настроить обмен сообщениями между социальной сетью «Вконтакте» и amoCRM. Мы установили и настроили виджет «Вконтакте». Функционал данного виджета позволяет всем пользователям (с выданными правами доступа) вести переписку с потенциальными клиентами из amoCRM.  Если сотрудник отсутствует на рабочем месте, amoCRM автоматически создает новый контакт и делает уведомление сотруднику о необходимости связаться с потенциальным клиентом.

integraciya_amocrm_s_socialnimi_setiami
Изображение 17 — Скриншот окна «Синхронизация amoCRM с социальной сетью Вконтакте»

Заведение сотрудников в программe AmoCRM, распределение ролей

Заказчику требовалась добавить сотрудников в программу amoCRM, распределить роли. Нами были заведены карточки сотрудников, созданы электронные почтовые ящики, сформированы пароли безопасности.

Изображение 18 — Скриншот окна «Сотрудники»
Изображение 19 — Скриншот окна «Воронка продаж менеджера»

Добавление сотрудников в систему AmoCRM, распределение прав доступа

Мы распределили права доступа сотрудников в соответствии с требованиями заказчика.

Изображение 20 — Скриншот окна «Настройки прав доступа сотрудников»

Настройка аналитики в системе AmoCRM и рабочего стола для руководителя и пользователей

Заказчику требовалось настроить рабочий стол amoCRM для отображения всех интересующих бизнес процессов. Нами была произведена настройка в соответствии с требованиями заказчика. Рабочий стол в amoCRM — это панель мониторинга, где руководитель видит всю статистику, события, происходящие в аккаунте организации. Рабочий стол позволяет в реальном времени отслеживать выполнение плана продаж, KPI, просроченные задачи по менеджерам.

Изображение 21 — Скриншот окна «Рабочий стол amoCRM»

Заказчику требовалось проводить аналитику по организации, в amoCRM есть инструменты аналитики, которые позволяют в режиме реального времени анализировать деятельность организации, на всех этапах бизнес процессов. Нами было проведено обучение сотрудников заказчика, как правильно использовать инструменты аналитики в программе amoCRM.

 В amoCRM предусмотрены ряд готовых отчетов, а также отчет «Список событий», который представляет из себя массив данных с возможностью фильтрации по ним по принципу Excel, для того чтобы руководитель мог делать нестандартные выборки.

Одним из базовых отчетов является «Воронка продаж». В отчете можно увидеть, сколько сделок прошло данные этапы за выбранный промежуток времени, слева от воронки показан процент конверсии.

Изображение 22 — Скриншот окна «Аналитика воронки продаж»

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

Изображение 23 — Скриншот окна «Отчёт по сотрудникам»