Что такое виджеты простыми словами — виды виджетов, зачем их использовать, как и где разместить на сайте

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

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

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

Например, интернет-магазин по продаже строительных материалов предлагает калькулятор для расчета количества обоев с учетом площади комнаты: клиент вводит параметры, получает нужные значения и видит форму обратной связи для получения консультации или оформления заказа. Можно добавить виджет с кнопками социальных сетей для быстрого перехода, попапы для информирования и сбора лидов, чаты, кейсы, таймеры обратного отсчета – выбор широкий, поэтому легко найти вариант под особенности проекта.

Калькулятор расчета доставки с Яндекс Картой на сайте, как пример виджета

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

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

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

Информируют. Пользователи сразу узнают о действующих акциях и выгодах, виджеты мотивируют на целевые действия и покупки, а также формируют ощущение упущенной выгоды (здесь отлично помогают таймеры обратного отсчета). Не нужно открывать бесконечные страницы и искать разделы: за счет виджетов самое важное всегда остается в поле зрения.

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

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

Усиливают интерактивность. Стандартный текст и призывы к действию не всегда работают хорошо, некоторые пользователи не воспринимают их. На помощь приходят виджеты, которые прекрасно привлекают внимание и обеспечивают определенный уровень геймификации. Не нужно кому-то звонить или выполнять расчет самостоятельно, если на сайте есть калькулятор, чат-бот обеспечивает связь в режиме 24/7, а квиз-опрос существенно упрощает выбор товаров (достаточно ответить на несколько вопросов). Вместо длинного текста, прайс-листов и других значений пользователь видит компактное окно/форму/кнопку, которое оперативно решит все боли.

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

Готовы к использованию. Не придется нанимать программиста и возиться с кодом, все уже придумано за вас: доступны огромные библиотеки платных и бесплатных виджетов, которые легко установить на сайт в несколько кликов. Например, конструктор Craftum предлагает квиз-формы, онлайн-чаты, сервисы обратного звонка, модули онлайн-записи и другие элементы, а также пошаговые инструкции по их добавлению. После создания сайта, пользователь получает готовую инфраструктуру для e-commerce и разнообразие виджетов, которые улучшают показатели интернет-магазинов и других проектов.

Доступны огромные базы платных и бесплатных готовых виджетов

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

Какие виды виджетов существуют

Классификация виджетов осуществляется по месту размещения:

• топперы, располагающиеся в верхней части страницы, флоры – в нижней;

• социальные сети, объединяющие сайт со страницами ВКонтакте, Одноклассники и другими платформами, которые выносят в футер;

• всплывающие окна, в определенный момент появляющиеся поверх содержимого страниц;

• независимые ярлыки, их устанавливаю сбоку;

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

Дополнительно – интерактивные и неинтерактивные элементы. На работу первых пользователь может влиять самостоятельно, а вторые от действий юзера не зависят. Пример интерактивного виджета – «Мне нравится» в соцсети ВКонтакте: человек одним кликом выражает отношение к контенту и может ним поделиться.

Пример ленты рекомендаций в интернет-магазине

Всплывающие окна (попапы)

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

• внедрение действительно интересных предложений, имеющих практическую пользу и ценность;

• добавление элементов, которые помогут быстро закрыть всплывающее окно в случае необходимости;

• использование емких фраз и изображений, четко отражающих суть;

• отсутствие навязчивости, окно не должно появляться каждые 5 минут и мешать взаимодействию с сайтом.

Если попап оформлен и настроен правильно, то происходит повышение конверсии и ускорение процесса как сбора контактных данных, так и продаж, подписок, притока новых клиентов.

Так выглядит попап

Чаты

Виджет расположен в нижнем правом углу экрана, клиент может получить поддержку в ходе общения с реальным менеджером или ботом, содержащим ответы на распространенные вопросы и формы для отправки контактов. Собранные данные загружаются в CRM-систему, чат-боты обеспечивают коммуникацию в режиме 24/7, что позволяет не терять потенциально заинтересованных пользователей. При оформлении чат-ботов стоит обращать внимание на следующие рекомендации:

• виджет соответствует основному дизайну сайта – от цветовой гаммы до формы;

• переписка, даже если используются бот-версии, ведется по аналогии общения с живым менеджером;

• боты, как и менеджеры, отображаются с реальными именами и фотографиями.

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

Виртуальный помощник на сайте магазина

Обратный звонок

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

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

Калькуляторы

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

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

Так выглядит строительный калькулятор

Таймеры обратного отсчета

Наиболее эффективны во время проведения акций, могут отсчитывать как время до окончания кампании, так и количество оставшихся товаров. Выполняют информирующую функцию, но основное назначение – создание ощущения упущенной выгоды. Клиент видит, что осталось всего 3 пары туфель или же 2 часа до окончания акции, испытывает желание совершить покупку и оформляет заказ, ведомый импульсивностью. Магазин получает выгоду, потребитель испытывает эйфорию: он успел купить то, чего осталось мало или же по лучшей цене.

Основное правило при запуске таймера – предоставление реальных данных. Если сегодня, завтра и после завтра он отображает «2 часа до окончания» или «осталось 4 единицы товара», то клиент почувствует себя обманутым, а доверие к компании будет существенно снижено. Таймеры актуальны для интернет-магазинов и маркетплейсов, лендингов и бизнес-ниш, в которых часто проводятся распродажи и действуют уникальные предложения.

Кнопки социальных сетей и мессенджеров

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

Кнопки социальных сетей в футере

Формы подписки на рассылку

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

Панель оповещений

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

До и после

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

Виджет со слайдером: до и после

Мультикнопка

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

Пример мультикнопки в онлайн-магазине косметики

Какие еще виджеты существуют

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

• Счетчик. Работают по аналогии с таймером, но демонстрируют количество товаров, которые посетители добавили в корзину, или целевых действий. Тоже стимулируют интерес, повышают вовлеченность и импульсивность.

• Календарь. Применяется для упорядочивания информации, чаще всего устанавливается на блог-платформах.

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

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

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

Виджет онлайн-записи в салоне красоты

Как правильно использовать виджеты

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

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

• применение броских надписей, в которые заключены призывы к действию и уникальные торговые предложения (должны быть уместными);

• крупный и легко читаемый шрифт: клиент должен сразу понимать, что ему предлагают;

• отсутствие сложного функционала, особенно если речь идет о калькуляторах, опросах и квизах;

• наличие интерактивных элементов, в том числе подсказок;

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

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

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

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

• Для какого типа сайта подбираются виджеты?

• Что хочет получить клиент, какие действия он будет выполнять?

• Без каких элементов не обойтись, какие – очень нужны?

• Сколько менеджеров в штате, требуется ли частичная автоматизация коммуникации?

• Какие виджет сможет помочь посетителю?

• Какие результаты нужно получить?

Основные цели и задачи виджетов

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

Некоторые варианты могут применяться периодически, речь идет о квизах и опросах, запускаемых нерегулярно. После внедрения любого виджета в обязательном порядке проводятся А/В-тесты, преследующие 2 цели: оценка результатов и правильности оформления элементов. Например, зеленая кнопка обратного звонка характеризуется минимальной конверсией, а красная принесла много обращений по результатам исследования: процедура занимает несколько недель, но помогает выявить самый работоспособный элемент.

Как проходит А/В-тестирование

Чем виджет отличается от плагина

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

Рассмотрим плагины в действии: если вы хотите смотреть ролики в интернете через браузер, то без Adobe Flash Player не обойтись, а избавиться от навязчивой рекламы поможет AdBlock. Виджет – это иконка часов или календаря на экране смартфона, онлайн-калькулятор на сайте строительного магазина или форма, после клика по которой откроется окно для передачи данных. После установки плагин работает сам по себе, а виджет ориентирован на взаимодействие с пользователем.

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

Конструктор сайтов Craftum – платформа, позволяющая быстро собрать сайт, лендинг и другие типы сайтов. Конструктор предлагает широкие возможности для улучшения основного функционала сайта с помощью виджетов и модулей. Установка необходимого элемента занимает минимум времени. Рассмотрим самые простое – форму онлайн-записи:

• необходимо пройти регистрацию на Yclients, войти в личный кабинет и выполнить настройки, следуя инструкциям сервиса;

• нужно выбрать вкладку «Онлайн-запись», потом – «Формы онлайн-записи»;

• с помощью кнопки редактирования формы легко получить подходящий вариант оформления;

• во вкладке «Код кнопки» скопируйте код, вернитесь в личный кабинет на Craftum, найдите сайт, куда будет выполнена установка, нажмите на «+» под блоком, где форма будет отображаться;

• во вкладке «Другое» выберите «HTML-код», наведите на него курсор и нажмите «Настроить»;

• в поле с названием «HTML-код» вставьте код, который получили при копировании с Yclients;

• сохраните изменения и переопубликуйте страницы сайта.

14 – Модуль онлайн-записи выглядит так

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

Инструменты для анализа эффективности виджетов

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

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

• корректное отображение на смартфонах. Удобство в мобильных и десктопных версиях – основной приоритет, инструмент должен стабильно работать на всех типах устройств, иначе конверсия будет минимальной;

• актуальные данные. До запуска виджета нужно проверить, есть ли в наличии товары, работает ли промокод или лид-магнит, не закончилась ли акция. Самые грамотные настройки не помогут, если аудитория не сможет воспользоваться заявленным предложением;

• простой и понятный функционал. Обязательно наличие подсказок как текстовых, так и интерактивных. Если реализуется калькулятор – можно дать ссылку на базу знаний или короткие пояснения для тех, кто не понимает разницу между обычным и погонным метром, а также не знает, как измерить талию или периметр помещения. Обычный человек не обязан располагать этими сведениями, если компания или магазин их не дает – клиент пойдет искать нужное в интернете, что снизит вероятность его возвращения. В формах для сбора лидов лучше использовать емкие фразы: «Перезвоним через 5 минут», «Ждем звонок» и аналогичные, раскрывающие суть;

• использование картинок. Виджеты с длинным текстом практически не применяются, основное можно вынести на картинки – это удобочитаемый и максимально понятный вариант.

Тест-квиз для владельцев домашних питомцев

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

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

В заключение

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

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