JavaScript виджет для установок на сайт - портфолио по верстке и дизайну

JavaScript виджет для установок на сайт

Разработка виджета для финансовой компании

Создание интерактивного js виджета для установки на сторонние сайты

Технические условия виджета

Необходимо было создать независимый виджет, который мог бы встраиваться на другие сайты

Для этого необходимо было минимально сократить ресурсы и код, а так же сделать js виджет максимально гибким

Плагин не должен зависит от сторонних библиотек, поэтому был написан на чистом JavaScript, без использования jQuery

Обязательные условия:
  • Виджет должен состоять из 2ух файлов js и css
  • Виджет должен легко подключаться на любые сайты
  • Виджет не должен конфликтовать с другими плагинами и библиотеками
  • У виджета должны быть гибкие настройки

Описание функционала

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

Текст должен быть изогнут по радиусу этого круга

При наведении, виджет становиться шире, убирается надпись по кругу и появляется новая

По клику на виджет необходимо переходить по ссылке в новом окне

Расположение: в правом нижнем углу окна браузера, всегда фиксированный

Процесс разработка JavaScript плагина

Клиентом был предоставлен желаемый дизайн виджета

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

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

Необходимые настройки

Через js были реализованные следующие настройки:

  • Ссылка, по которой будет переходить пользователь
  • Местоположение виджета
  • Настройка цели Яндекс метрики на клик по виджету

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

Интерактивная демонстрация виджета

Некоторый функционал виджета отключен на этой странице

Время создания виджета

  • Работа с графикой — 1 день
  • Вёрстка плагина + создание js кода — 1 день
  • Правки и тестирование — 1 день
Разработка данного виджета заняла 3 дня