Как виджеты помогут сайту и правила их размещения

Что такое виджеты

Рассмотрим, что такое виджет подробнее.

Виджет можно легко установить, как на лендинг, так в интернет-магазин, маркетплейс. Простыми словами, это компактное приложение, которое выполняет всего одно действие. Сайт или система спокойно существуют без виджетов, но их отсутствие бросается в глаза – настолько к ним привыкли на десктоп-устройствах и мобильных телефонах. Виджеты берут на себя роль часов, информатора, обменника сообщений или даже плеера. Они служат либо дополнением к основной программе, либо украшением интерфейса.

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

Термин впервые начали употреблять 1920-х годах в американском английском для обозначения простой, но необходимой вещи, маленького изделия, название которого временно забыто говорящим. Термин «виджет» смог быстро войти в жизнь. Считается, что прародителем термина по главной версии стало англ. gadget или же оно происходит от англ. which it — «этот, как его». Другие словари предполагают словослияние «window gadget» (букв. — «оконное приспособление»), также произошедшее в начале XX века.

Зачем нужны виджеты

Сайты могут работать без виджетов. Но они нужны для установки на сайт дополнительного функционала. Особенно в этом нуждаются лендинги. Конструкторы сайтов и CMS предоставляют ограниченные возможности. Виджеты могут компенсировать недостатки этих платформ. Виджеты помогают в решении задач:

• Способствуют привлечению внимания посетителей сайта. Правильно размещенные виджеты по большей части влияют на конверсию.
• Информируют на сайте о свежих акциях, скидках и новинках коллекции. Это мотивирует клиента на покупку и невольно заставляет ознакомиться с торговым предложением.
• Собирают контактные данные потенциальных клиентов. В формах виджетов клиенты могут оформить заявку на обратный звонок, подписку на e-mail рассылку.
• Обеспечивают обратную связь и повышают уровень клиентского сервиса.
• Стимулируют продажи. Например, отдельное окно сообщает пользователю о том, что сроки акции ограничены.
• Делают сайт интерактивным. В результате время сессии растягивается, а пользователи проводят больше времени на странице. Это замечают поисковые системы, и сайт чаще попадает в топы поисковой выдачи.

Виджеты на телефоне — это все привычные иконки: уровень заряда батареи на главном экране, объем свободной памяти, приложения, отвечающие за Wi-Fi, Bluetooth и функционирование иного оборудования.

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

Виды виджетов

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

По внешнему виду бывают:

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

По месту встраивания виджеты делятся на две категории, о которых мы поговорим ниже.

Виджет для рабочего стола

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

Примеры:

1. Продукт Microsoft ранее поддерживал сторонние виджеты, в Windows 7 было даже встроенное приложение с разными окнами, которые выводили как полезную информацию, так и мини-игры. Позже разработчики ОС отказались от них из-за повышенной опасности для данных пользователей. Теперь у пользователей Windows остается только один вариант – установить дополнительные приложения для работы с ними. Существуют программы, специализирующиеся исключительно на виджетах и позволяющие добавлять любые вспомогательные экраны, а также настраивать их как угодно не только в плане внешнего вида, но и функционально. Одним из таких решений считается Rainmeter.
2. В Android поддерживает сторонние виджеты, и у него нет никаких ограничений или рекомендаций по внешнему виду и функциональности, в отличие от iOS. Многие из сервисов iOS позволяют выполнить некоторые простые операции и всячески взаимодействовать с активными программами, сопровождением для которых они являются. В Android многие подобные гаджеты вообще бесполезны или выполняют те функции, которые можно реализовать и без них, сделав всего пару нажатий внутри целевого приложения. Добавление виджетов в мобильных ОС происходит при помощи ленты оболочки или самой операционной системы, о чем более детально пойдет речь в одном из следующих разделов статьи.

Web-виджет

Веб-приложения — виджеты для web-страниц, располагаются непосредственно на сайтах. Бывают:

• Интерактивные: элементы интерфейса, на работу которых может воздействовать сам юзер. С ними знакомы все пользователи. У каждого на экране мобильного или мониторе ПК имеются иконки-кнопки «ВКонтакте», «Инстаграм», «Твиттер» и прочие. Их монтируют на сайте, чтобы посетители могли делиться увлекательной информацией. Это своего рода подтверждение, если сведения распространяют, значит они обладают полезностью и способны заинтересовать юзеров.
• Неинтерактивные. Отличаются от интерактивных тем, что на их работу невозможно повлиять. Они отображают контент независимо от пользовательских действий.

Примеры:

1. Известная социальная сеть ВКонтакте содержит в себе множество виджетов, которые привлекают пользователей. Например:
   • «мне нравится», что дает возможность оценить его успешность и отследить целевую аудиторию, которая была заинтересована;
   • «комментарии», которые оставляют под любым постом, картинкой, аудио. С их помощью можно повысить уровень вовлеченности в обсуждениях;
   • «Сообщества» — позволяет эмоционально подать новости, транслировать в рабочие моменты;
   • «запись на стене», очень просто использовать в добавлении контента на сайт и повысить рост социального охвата.
2. Поисковая система Яндекса на начальной странице полностью забита различными виджетами. В данном случае это маленькие блоки с информацией. Виджетами здесь является новостная лента, валютный курс денег, небольшой блок с фильмами, кейсы, блок, на котором мы можем узнать прогноз погоды и состояние пробок в городе. Всё довольно просто и не нужно ломать голову над тем, что такое Search Console, чтобы понять, что это и для чего нужно.

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

Виджеты для сайта

Веб-виджеты могут быть разными как по назначению, так и по внешнему виду. Рассмотрим варианты виджетов, которые можно разместить на сайте:

1. Поп-апы (Pop-up) — это всплывающее окно, в котором отображена информация об акции или призыв к действию. С помощью поп-ап можно привлечь внимание пользователя к акции, предложить оставить контактные данные в обмен на скидку или промокод и прочее.
2. Чат (чат-боты + чат с поддержкой или менеджерами, онлайн-консультанты). Это специальный виджет, который обычно встраивается в нижний угол экрана. С помощью него можно собирать заявки вместо веб-форм, переписываться с клиентами онлайн, побуждать пользователя к целевому действию. После сбора данные подгружаются в CRM.
3. Социальные сети и мессенджеры. Это могут быть как обычные иконки с логотипами известных социальных сетей, так и полные формы с предложением перейти на страницы компании и подписаться.
4. Онлайн-калькуляторы. С помощью онлайн-калькулятора клиент может быстро узнать стоимость товара, не рассматривая большой прайс и не рассчитывая цену самостоятельно.
5. Виджет кейс (До/после). Актуально для бизнеса в сфере услуг, чтобы наглядно показать результат работы. Результаты должны быть самые лучшие.
6. Рекомендательные системы. Данные элементы используют в основном блоги и интернет-магазины. Анализируя историю покупок и отзывы, предприниматель может спрогнозировать дальнейшие действия клиентов и подобрать товары, которые могут заинтересовать пользователя.
7. Таймер обратного отсчета. Это цифровой счетчик, показывающий, сколько времени продлится акция или спецпредложение. Он отсчитывает дни, часы, минуты и секунды в обратном порядке.
8. Счетчик количества покупок. Во время нахождения на сайте пользователю периодически высвечиваются сообщения, что столько-то клиентов уже купили похожий товар зарегистрировались на сайте или совершили другое целевое действие в компании.
9. Многофункциональная кнопка (мультикнопка). Смысл виджета в том, что помимо кнопки обратного звонка клиенту предлагается связаться несколькими способами: позвонить, написать в социальных сетях, отправить сообщение на электронную почту или написать в мессенджере компании.
10. Лидогенератор. Это разновидность всплывающего окна с предложением консультации, которое появляется, когда посетитель собирается закрыть вкладку браузера. Также можно настроить включение виджета спустя определенное время нахождения клиента на сайте.
11. Мультиканальный чат. Не все клиенты любят звонить, кому-то намного удобнее связаться с компанией в мессенджере и соцсети. Поэтому установите кнопку со ссылками на несколько соцсетей и мессенджеры WhatsApp, Telegram, ВКонтакте и любые другие каналы.
12. Подписка на рассылку по email. Сайт предлагает пользователю оставить электронную почту и запрашивает согласие на рассылку. Дальше дело за e-mail-маркетингом. Можно сегментировать подписчиков с помощью фильтра или путем присвоения тега для более целевых рассылок.
13. Триггерные рассылки. Обычно триггерные рассылки используются при повторном привлечении лидов для их дальнейшего продвижения по воронке продаж. Так, в письмах часто есть поле для регистрации на вебинар или подписка с доступом к продукту, личные скидки. Многие бизнесы используют шаблон персональных в зависимости от их предпочтений. Рассылку можно настроить автоматически.
14. Поиск. Пользуется большой популярностью, потому что помогает пользователю сразу перейти к поиску необходимой информации.
15. Календарь. Его используют, чтобы упорядочить публикации в социальных сетях или блог-платформах.
16. Подборка. Такой виджет предлагает аудитории подборку популярных материалов или другие публикациями на схожую тему.
17. Google и Яндекс карты. Если у вас есть офлайн-точки, используйте виджет карт с возможностью построить маршрут. Чем больше на сайте контактной информации, тем больше посещений в офлайне.
18. Аналитика. Виджет, позволяющий отслеживать показатели эффективности — например, отдела продаж или маркетинга.
19. Квизы и опросы. Они помогают расширить клиентскую базу и базу подписчиков, выделить отдельные группы пользователей и т.д.
20. Панели оповещений. Просто поместите свое сообщение в одной строке, а пользователи сами решают — перейти по ссылке или скрыть панель из поля зрения.
21. Виджет, имитирующий очередь из клиентов. Виджет создает видимость очереди: ажиотаж подталкивает к совершению покупки. Инструмент позволит увеличить количество заявок с сайта почти в 2 раза.
22. Захватчик клиентов. Этот виджет имитирует обращение менеджера к посетителю, целенаправленно переключая интерес пользователя на конкретный сектор сайта.
23. Онлайн-запись для сайта — это форма, в которой клиент может самостоятельно выбрать удобное ему время, подходящую услугу и мастера, сделать бронь и т.д. Как правило, такие виджеты активно используются в сфере услуг.

Как добавить виджет на сайт

Виджеты формируют при помощи JavaScript‑кода, который вставляется в нужном месте в HTML-код сайта. Для сайтов на CMS WordPress предусмотрен набор стандартных виджетов, которые можно добавить в панели управления, раздел настройки внешнего вида. Если этих виджетов недостаточно, можно найти и установить подходящий плагин. В конструкторах сайтов, например, Wix, можно размещать блоки с виджетами: онлайн-запись, чат, соцсети, виджет товара и так далее. Подробнее смотрите ниже.

Рассмотрим общую последовательность добавления виджетов на сайт:

• Для начала нужно найти подходящий модуль и скачать его. Сделать это можно на специальных интернет-ресурсах для веб-мастеров. Можно использовать внешнюю программу, код которой интегрируется на страницу сайта, или особый файл с расширением .js. Файл JavaScript необходимо сохранить на компьютерном устройстве в одном каталоге или в отдельной папке относительно HTML-файла определенной страницы сайта.
• Далее нужно с помощью текстового редактора открыть страничку, на которую планируется установка виджета. Для этого может использоваться утилита «Блокнот», представленная по умолчанию в Windows.
• На странице нужно нажать правой клавишей мыши и выбрать опцию «Открыть с помощью», после чего в выпадающем перечне выбрать «Блокнот».
• Затем необходимо перейти в тот фрагмент кода, куда вы хотите добавить виджет. В этом месте устанавливается код типа:

  <script type="“text/javascript”" src="“http://адрес_сайта/путь" до="" виджета.js”=""></script>

• В поле type следует указать тип подключаемого модуля (Java Script), а в разделе src прописать адрес выбранного расширения в интернете. При использовании скачанного или созданного файла JS в поле src можно прописать абсолютный или относительный путь до файла с расширением .js. К примеру, если документ widget.js находится в папке widget, расположенной в одной директории с редактируемым файлом HTML, следует добавить:

  <script type="“text/javascript”" src="“widget/widget.js”"></script>

• После всех изменений кликните «Файл» – «Сохранить».

В конце обязательно проверьте, как работает виджет на странице сайта. Если все нормально, можно считать установку модуля завершенной.

Читайте так же

How to

Как правильно и куда внедрить скрипт на свой сайт

Как дизайн виджетов влияет на конверсию сайта

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

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

Для разного формата окошек, поп-апов, поисковых строк и подборок остается место для креатива. Нередко виджет обратного звонка бросает пользователю вызов. «Оставьте номер телефона, и менеджер перезвонит вам в течение 60 секунд» – это вызывает у гостя сайта спортивный интерес, в пределах разумного. Также дизайн может зависеть от тематики сайта и от размещения самого окошка виджета. Например, всплывающие виджеты можно сделать яркими, в отличие от постоянных. Постоянные могут отвлекать пользователя и в итоге отпугнуть. Главное - размещайте базовые виджеты прямо на странице, в видном месте.

Читайте так же

Аналитика

Конверсия - что это такое и почему важно ее знать

Виджеты для телефона

Смартфон без кастомизации и настройки виджетов сегодня трудно найти. Мобильные виджеты показывают температуру, быстро переводят текст, узнают время в разных городах и курсы валют, даже состояние зарядки батареи является информационным виджетом. Помимо этого, в телефоне можно найти и другую категорию виджетов — управляющие сервисы. Основной их задачей становится работа Wi-Fi, Bluetooth и прочего установленного оборудования. Нередко разработчики превращают виджеты в «мини-браузеры», что позволяет получить нужную информацию, не заходя в приложение. Иногда вспомогательные программы требуют доступа к интернету и отслеживанию геолокации. Создатели операционных систем iOS и Android с помощью виджетов превращают телефон в умного помощника.

Владелец мобильного телефона может подбирать такой набор виджетов, который будет полностью соответствовать его интересам. Благодаря сервису необходимую сводку можно получать в кратчайшие сроки. Достаточно взглянуть на экран телефона, и все нужное сразу оказывается перед глазами. Не придется выходить в интернет и искать необходимые сведения. Установка такого сервиса на телефон не отнимет много времени. Управлять виджетами довольно просто — через “настройки”. Следует зайти в раздел с настройками и выбрать для себя необходимые виджеты. Популярные виджеты для Android:

1. Google News — новостной виджет с автообновлением
2. KWGT Kustom Widget Maker — универсальный виджет
3. Overdrop — виджет погоды для Android
4. Data Counter Widget — Виджет счетчика данных
5. Musicolet — музыкальный виджет
6. Calendar Widget — виджет календаря
7. Sectograph — необычный виджет календаря

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

Лента виджетов

Лента виджетов – это список установленных и настроенных виджетов. Другими словами, вспомогательный экран, в котором размещены разные иконки и модули. Обычно он содержит:

• трекер шагов;
• меню контактов;
• иконки вызовов приложений;
• конвертер валют;
• диктофон;
• хранилище данных и файлов;
• кнопка - интеграция мероприятий.

Сверху находится навигация в виде поисковой строки и дата. Немного ниже обычно располагается кнопка «Настройки». В открывающемся по клику поле и находятся разнообразные элементы. Это могут быть:

• Ярлыки. При помощи которых осуществляется быстрое открытие приложений.
• Заметки. В которых удобно делать краткие записи.
• Мероприятия. Позволяющие не забыть о важных делах.
• Безопасность. Контролирующая наличие лишних данных и возможных угроз.

Пользователь может настроить ленту виджетов по своему усмотрению. Например, добавить туда только самое необходимое, чтобы не совершать лишних движений или одним взмахом / кликом узнать сводку по погоде. Также можно поменять размер виджета. Сделать это довольно просто:

1. Нажмите на “ярлык” и удерживайте его в течение нескольких секунд.
2. Далее отобразится значок “корзина”.
3. Появятся линии оранжевого и синего цвета. Именно они и помогут поменять размер.

Базовая лента виджетов установлена производителем телефона, но список всегда можно пополнить. Найти дополнительные виджеты можно в Play Market или App Store.

Сервисы для создания виджетов

Виджеты встраиваются непосредственно на сайт. Чтобы добавить виджет на ресурс, нужно скопировать и вставить код, предоставленный разработчиком. Не стоит выбирать первые попавшиеся, новые и ненадежные модели виджетов, чтобы избежать проблем. Лучше выбрать проверенные для ваших задач.

Рассмотрим самые популярные продукты:

1. Moclients. Инструмент, повышающий конверсию сайта за счёт калькулятора сквиз-тестов. Содержит много дополнительных функций и имеет небольшую абонентскую плату, а также бесплатный тариф, который подойдет сайтам с низким трафиком.
2. Reservio. Виджет для онлайн-записи. Добавить на сайт кнопку бронирования от Reservio намного проще, чем назначать встречи по телефону.
3. Envybox. Онлайн-чат, который поможет общаться с клиентами, вести покупателей по воронке продаж в режиме реального времени.
4. Venyoo. Онлайн-чат на сайт с гибкой системой постоплаты. Подойдёт как сайтам с небольшим трафиком, так и огромным порталам. За счёт имитации диалога с помощью Чат-Бота показывает отличные показатели конверсии посетителей в заявки.
5. Disqus. Приложение для улучшения комментирования публикаций на сайте. Он также предоставляет дополнительные инструменты для мониторинга и ответов на комментарии.
6. Jivosite. Крупный чат-бот, у которого есть свое мобильное и десктопное приложение. Самая быстрая круглосуточная техподдержка.
7. Smartsupp. Предназначен для добавления онлайн-чата на сайт. Он идеально подходит для тех, кто управляет интернет-магазином. Виджет позволяет клиентам быстро связаться с вами по любому интересующему их вопросу.
8. AddThis. Добавляет на сайт кнопку «Поделиться», с помощью которой можно подключить более 200 социальных медиа. Все кнопки оптимизированы для мобильных устройств.
9. Survio. Можно создать новый опрос и интегрировать его на сайт. Это эффективный способ получения дополнительной информации от посетителей сайта.
10. MailChimp. Сервис для электронных рассылок, напоминает клиентам о компании.
11. Meedget. Это набор интерактивных форм, виджетов, которые генерируют дополнительные заказы.
12. GetResponse. Сервис email-маркетинга. Но кроме этого - он предоставляет стандартный виджет для размещения на сайте формы подписки.
13. Gumroad. Форма и прием оплаты, обработка платежей.
14. Swiftype. Поиск для сайта. После указания адреса сайта Swiftype проиндексирует весь его контент и создаст поисковую систему.
15. Wufoo. Сервис для создания опросов, приглашений, контактных форм, формы регистрации и предоставления данных об оплате.

Часто задаваемые вопросы

Заключение

Виджеты помогают повысить количество обращений, конверсию сайта и объем продаж. Рекомендуем протестировать различные типы этого маркетингового инструмента, подстраивая его под свои текущие задачи бизнеса. При правильном размещении виджет способен наладить эффективное общение с клиентами и взаимодействие даже в нерабочее время. Также они помогают сэкономить на сотрудниках, автоматизировать процесс. Пользоваться можно самыми разнообразными виджетами, главное использовать самые привычные пользователя маркетинг идеи. Как пример, чат-бот для быстрой связи, который поможет вести переписку в любое время суток.