Виджеты для сайта: какие бывают и как использовать

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

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

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

Пример № 1: Вещевой рынок.

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

Пример № 2: Магазин в торговом центре

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

Теперь главный вопрос: куда в итоге вы отправитесь за покупками?

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

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

Итак, что будет, если установить на сайт слишком много виджетов:

Чтобы виджеты действительно работали на повышение конверсии и не раздражали пользователей, нужно тщательно продумать их работу. Также важно выбрать наиболее подходящий тип виджета.

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

Разрабатывая дизайн такого виджета, помните о некоторых нюансах:

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

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

Как работает callback:

Работу виджета можно рассмотреть на примере.

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

Сценарий 1. Василий звонит на горячую линию одного из туроператоров. В ответ раздаются короткие гудки. Поскольку Василию все еще интересен этот тур, он пытается оставить заявку через форму обратной связи на сайте. Потратив много времени на заполнение обязательных полей (имя, e-mail, номер телефона и т.д.), Василий отправляет форму. На экране появляется обнадеживающая фраза: «Наш сотрудник свяжется с вами в ближайшее время», и Василий начинает терпеливо ждать ответа. Однако именно в это время менеджер Ольга, которая обрабатывает входящие звонки, решает пойти с коллегами на обед. Законный перерыв Ольги составляет 60 минут. И в течение часа Василий все еще будет ждать обещанного звонка...

Сценарий 2. Так и не дождавшись ответа, раздосадованный Василий переходит на сайт второй турфирмы. Перед ним сразу же появляется окошко с виртуальным собеседником, который вежливо интересуется: «Хотите узнать больше о турах по Италии? Оставьте свой контактный номер, и мы перезвоним вам через 30 секунд». После недавнего опыта Василий настроен скептически: «Конечно, так они и перезвонят! Одни уже час перезванивают, все дозвониться не могут...». Но любовь к путешествиям и желание попасть в Италию оказываются сильнее, и Василий отправляет свой номер телефона. Через 30 секунд раздается звонок, наш путешественник поднимает трубку и слышит голос менеджера: «Добрый день! Вы заказали обратный звонок. Меня зовут Юлия, я могу помочь вам с выбором тура». Василий вступает в диалог с Юлией и рассказывает о том, куда и зачем он хочет поехать. Вернувшаяся с обеда Ольга уже упустила клиента и может ему не перезванивать. Если же Юлия компетентна в продажах, то Василий, скорее всего, уже обсуждает с ней нюансы покупки тура.

Итак, добавив виджет Callback, вы сможете:

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

Pop-up помогает заинтересовать пользователей акцией, получить их контактные данные в обмен на промокоды, скидки и т.д. Если клиент воспользуется вашим предложением и сделает заказ, то велика вероятность, что он вернется снова.

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

Чтобы посетители захотели оставить свои контактные данные, нужно их хорошо заинтересовать. Для этого важен дизайн: всплывающее окно должно быть привлекательным. Захватить внимание пользователя можно с помощью:

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

Неплохой вариант — использовать поп-ап, когда пользователь хочет покинуть сайт и наводит курсор мышки в правый верхний угол. В этот самый момент и должна появиться всплывайка.

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

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

Квизы — это небольшие развлекательные онлайн-опросы. Они уже давно применяются как инструмент маркетинга. Квизы помогают расширить клиентскую базу и базу подписчиков, выделить отдельные группы пользователей и т.д.

Преимущества квизов:

Как работают квизы:

Видеовиджет — это всплывающее окно с роликом длиной в среднем 30 секунд. В виджете можно динамично приветствовать посетителей сайта, показать продукт, рассказать о своей компании, поделиться видеоотзывами, анонсировать мероприятия и акции.

Обычно он размещается в правом или левом нижнем углу экрана. Один из популярных — видеовиджет от Envybox. Выглядит как небольшая иконка, которая проигрывает видео без звука. Когда пользователь наводит мышку на нее, она увеличивается, и ролик уже включается со звуком.

Калькулятор — это проверенный инструмент, который некоторые компании стали использовать задолго до виджетов. Особенно полезны калькуляторы на сайтах строительных компаний и магазинов стройматериалов. С помощью такого инструмента пользователь может:

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

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

Варианты размещения кнопки соцсетей на сайте:

Вставляем виджеты соцсетей на сайт

Добавить виджет можно с помощью конструктора или HTML-кода конкретной социальной сети. Этот код можно вставить в любое место на нужной странице. Рассмотрим, как добавлять виджеты разных соцсетей и мессенджеров:

Отдельно нужно сказать про Инстаграм*. Чтобы добавить виджет этой соцсети, нужно создать его с помощью конструктора. Готовый конструктор виджета доступен по ссылке.

Этот конструктор позволяет выбрать способ отображения виджета (кнопка, стандартный, простой и др.), его размер, подпись и т.д. Вам нужно только добавить имя профиля, выбрать нужные параметры, нажать «Создать виджет» и скопировать сгенерированный код. Также конструктор имеет функцию предварительного просмотра: вы сможете увидеть, как будет выглядеть готовый виджет.

Как вставить виджеты мессенджеров

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

Но все можно решить проще — достаточно установить Мультикнопку от Envybox. Она уже включает в себя не только возможность заказать звонок, но также и выбрать удобный мессенджер для связи. Виджет в 2,4 раза увеличивает количество обращений после установки.

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

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

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

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

Оповещения — это эффективное дополнение к любой странице сайта. Этот инструмент:

Оповещения привлекают внимание посетителей и одновременно позволяют им остаться на той странице, которая заинтересовала их ранее. Это весомое преимущество виджета.

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

Преимущества виджета:

Виджет создает видимость очереди: ажиотаж подталкивает к совершению покупки. Инструмент позволит увеличить количество заявок с сайта почти в 2 раза.

Преимущества виджета:

Как работает виджет:

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

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

Захватчик клиентов помогает:

Как работает Захватчик клиентов:

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

*Meta признана экстремистской организацией и запрещена в России.