Содержание
- Что такое виджеты и зачем они нужны
- Виды виджетов для сайтов
- Виджеты соцсетей и мессенджеров
- Как вставить виджеты соцсетей на сайт
- Установка виджетов мессенджеров
- Выводы
Одна из важнейших задач для владельца коммерческого сайта — удержать посетителей и побудить их совершить целевое действие. Для этого применяются различные способы и инструменты, среди которых особой популярностью пользуется виджет. Посредством виджетов организуется взаимодействие с пользователями, которым предлагают оставить свои контактные данные, сделать заказ, совершить покупку и пр.
Что такое виджеты и зачем они нужны
Виджетами называются небольшие вспомогательные приложения, написанные для выполнения конкретной задачи. Функционал виджетов достаточно обширен: они оповещают о чем-то, информируют, служат дополнением рабочего стола и т.д. Они могут оповещать пользователя, информировать его, выступать в роли дополнения рабочего стола и пр. Наглядный пример виджета — сигнал, оповещающий о получении нового сообщения.
Можно описать принцип действия виджетов на примерах, никак не связанных с сайтами. Допустим, вы собираетесь купить зимнюю куртку. Это можно сделать в двух разных местах.
Пример 1. Вещевой рынок
Представьте, что вы зашли на рынок и неспешно идете в ряды с зимними куртками. Практически тут же к вам побегает продавец и начинает спрашивать, что вы ищете. Вы игнорируете его навязчивый сервис и молча идете дальше, но он не отстает. Когда вы подходите к отделу с куртками, продавец возбуждается еще больше. Он пытается затянуть вас к своей торговой точке, уговаривая купить обновку именно у него. При этом парень рассказывает, что только у него — самые лучшие куртки, вам нигде не найти такого высокого качества, сегодня последний день низких цен, а завтра будет повышение. Вы всячески отнекиваетесь, и тут появляется второй продавец, такой же назойливый. В результате у вас остается только одна мысль — как поскорее покинуть этих прекрасных людей и уйти с рынка.
Пример 2. Магазин в ТЦ
Вы пришли покупать куртку в торговый центр. Посетителей в магазине верхней одежды совсем немного, вы спокойно ходите по рядам и рассматриваете вещи. Наконец, вам приглянулось несколько курток. Вы начинаете осматривать их пристальнее. Тут к вам подходит миловидная девушка-консультант, которая здоровается и вежливо спрашивает, не нужна ли вам помощь. Если вы отказались, она просто отойдет в сторону. Если же вы хотите узнать какие-то подробности, девушка опишет особенности каждой модели, их преимущества, расскажет о материалах и технологиях, предложит скидку.
А теперь ответьте на простой вопрос: куда вы пойдете в следующий раз делать покупки?
Конечно, некоторым нравится покупать вещи именно на рынке. Однако большинству людей вряд ли понравится спорить с продавцами, торговаться, отбиваться от их назойливых предложений. Все-таки намного удобнее совершать покупки в спокойной обстановке, не спеша и обдуманно делая выбор. Поэтому большинство предпочтет именно торговый центр.
Возвращаемся к нашим виджетам для сайтов. Для онлайн-торговли применимы те же основные правила, что и для обычного магазина. Если поставить на страницу слишком много виджетов, ваш сайт станет похож на рынок с надоедливыми продавцами. Только вместо них докучать посетителю будут постоянно всплывающие окна и прочие навороты.
Если установить чересчур много виджетов, это вызовет следующие реакции.
- Многие посетители будут раздражаться. Постоянное появление новых окон отвлекает от просмотра контента и мешает спокойно делать выбор. Если даже клиент захочет что-то приобрести на сайте, то всплывающие картинки с чатами могут перебить у него это желание. В результате он уйдет на другой сайт.
- У пользователя может возникнуть мысль, что вы хотите обязательно ему что-то «всучить». Настойчивые призывы купить товар вызывают у посетителя ощущение, что продавец собирается его как-то провести. В этом случае чрезмерное увлечение виджетами только отпугнет потенциального клиента.
Для успешного использования виджетов необходимо тщательно продумать все особенности их работы и выбрать наиболее подходящий тип. Только в этом случае они повысят конверсию, не раздражая пользователей.
Виды виджетов для сайтов
Чат-бот

Этот полезный инструмент позволяет увеличить время нахождения пользователя на сайте. Обычно он встраивается в нижнем правом углу экрана.
С помощью чат-бота можно организовать:
- эффективный сбор заявок (тогда формы обратной связи не понадобятся);
- ведение переписки с посетителями в онлайн-режиме;
- побуждение пользователей к совершению определенных целевых действий: позвонить по телефону, оставить адрес почты и пр.
При разработке дизайна этого виджета необходимо учесть ряд нюансов.
- Чат-бот фактически представляет собой форму для переписки. Поэтому желательно оформить его в виде чата с реальным собеседником. Удобно использовать для этого компактные поля с обозначающими отправку сообщения иконками.
- Создайте у посетителя иллюзию разговора с живым человеком. Добавьте фотографию виртуального консультанта и дайте ему имя. Выбирайте фотографии, близкие к реальности. Стоковые снимки со стерильными улыбками вызывают недоверие.
- Выбирайте цветовую гамму, которая позволит чат-боту гармонично вписаться в стилистику сайта. Вместо слишком ярких цветов уместно включить анимацию. Это создаст у пользователя ощущение только что пришедшего сообщения.
Callback (Обратный звонок)

Этот инструмент обеспечивает быструю связь пользователей с отделом продаж. Виджет оформляется в виде кнопки с изображением телефонной трубки либо дисплея смартфона. Обычно его размещают на краю экрана.
Темпы обработки информации постоянно растут. Необходимые данные быстро находятся, обрабатываются и анализируются. Поэтому целесообразно не затягивать со сделкой, заставляя клиента ожидать. Лучше сразу же созвониться с ним и завершить транзакцию.
Callback работает по такому алгоритму.
- Пользователь видит кнопку с иконкой телефона и нажимает ее. Тем самым активируется обратная связь.
- Пользователю показывается форма заказа звонка с сопровождающим ее мотивационным текстом или вопросом, например: «Хотите получить больше информации о турах в Грецию? Оставьте номер телефона, и мы перезвоним в течение 1 минуты».
- Если посетитель заинтересовался, он вводит телефонный номер и нажимает кнопку «Заказать звонок».
- После этого виджет связывается с сотрудником отдела продаж и производит автоматический набор указанного номера.
- После ответа клиента виджет включает конференц-связь с менеджером.
Проиллюстрируем работу этого виджета на характерном примере.
Анатолий собрался поехать в Грецию. Он нашел в Яндексе два турагентства с подходящими предложениями. Описываем два возможных сценария дальнейших действий.
Сценарий 1. Анатолий звонит одному из туроператоров на горячую линию. Линия занята, раздаются короткие гудки. Анатолий находит на сайте форму обратной связи и заполняет ее. Потратив немало времени на заполнение всех обязательных полей, он отравляет форму. Перед ним на экране открывается надпись, что сотрудник свяжется в ближайшее время. Анатолий начинает ждать ответ. Но менеджер турфирмы Елена в это время уходит на обед, с которого она вернется только через час. И минимум 60 минут Анатолию придется ждать ответного звонка.
Сценарий 2. Не дождавшись звонка от первой фирмы, Анатолий переходит на сайт второго агентства. Перед ним открывается окно чата, в котором виртуальный собеседник спрашивает: «Хотите получить больше информации о турах в Грецию? Оставьте номер телефона, и мы перезвоним в течение 1 минуты». После негативного опыта Анатолий настроен крайне скептически, но путевка ему нужна. К тому же подробную форму тут заполнять не нужно, только указать телефонный номер. Поэтому он отправляет информацию. Через полминуты раздается звонок, Анатолий отвечает и слышит вежливый голос менеджера Ольги, которая начинает подробно рассказывать об условиях поездки. В это время возвращается с обеда Елена. Однако она может уже никуда не звонить — Анатолий практически договорился с Ольгой и завершает процесс покупки путевки.
Добавление виджета Callback обеспечит вам следующие преимущества.
- Максимально оперативное общение с посетителями.
- Повышение лояльности пользователей к вашей компании. Ускоренная обработка входящих заявок позволит вам опередить конкурентов.
- Увеличение конверсии. Благодаря «обратному звонку» пользователю не приходится искать на сайте форму обратной связи, заполнять ее и тратить свои средства на телефонные звонки в вашу фирму. Настолько ориентированный на клиента подход произведет впечатление даже на взыскательных потребителей.
Pop-up

Этот виджет представляет собой всплывающее окно, призывающее к целевому действию либо информирующее посетителя об акциях. Поп-ап может появляться при первом визите на сайт либо через некоторое время. С его помощью удобно заинтересовывать пользователей акциями, получая в обмен на предоставленные скидки или промокоды их контактные данные. Если посетитель воспользовался предложением и сделал заказ, то с высокой вероятностью он вернется на сайт впоследствии.
Однако у многих пользователей настороженное отношение к этому виджету. Изначально pop-up был нацелен на рекламирование сторонних сайтов. К тому же он мешал просматривать контент. Ситуация давно изменилась, но многие люди по-прежнему относятся к поп-апу как к назойливой рекламе.
Поэтому необходимо хорошо заинтересовать пользователей. Очень важен дизайн всплывающего окна. Оно должно быть максимально привлекательным.
Для привлечения внимания посетителя можно использовать следующие элементы:
- яркие цвета;
- крупную цветографику;
- качественные картинки и фотографии;
- изображения людей;
- интерактивные компоненты внутри pop-up.
Обратите внимание: не стоит прятать кнопку для закрытия виджета, она должна быть хорошо видна. Если кнопка «спрятана», это раздражает многих пользователей.
Хороший вариант применения поп-апа — активизация всплывающего окна в момент, когда посетитель собрался уйти с сайта и ведет курсор к крестику в правом верхнем углу экрана. Именно тогда и должно всплыть окно.
Pop-up при умелом использовании способен существенно повысить конверсию. Еще на этапе его разработки тщательно продумайте время показа, составьте завлекательное и конкретное рекламное предложение, оформите окно максимально привлекательным образом.
Квизы

Квизы представляют собой небольшие опросы развлекательного характера. Они давно используются в качестве эффективного инструмента маркетинга. Посредством квизов удобно расширять базы подписчиков и клиентов, выделять определенные группы пользователей и пр.
Использование квизов позволяет:
- увеличить количество звонков в 5 раз;
- поднять продажи благодаря контактам с «холодной» аудиторией;
- повысить лояльность клиентов, охотнее совершающих покупки;/li>
- нарастить базы электронных адресов;
- корректировать действующие направления и прогнозировать развитие новых, используя результаты опросов и их анализ.
Опишем алгоритм работы квизов.
- На сайте нужно установить скрипт. Его можно вставить в главный баннер либо лид-форму. Программисты сделают это быстро. При необходимости можно установить скрипт и самостоятельно, при помощи видеоинструкции.
- После установки скрипта на странице появляется опрос.
- Пользователю предлагается вознаграждение в случае заполнения им специальной формы после прохождения опроса.
- Магазин получает контакты клиента, а также его отзыв о продукции либо услугах. Доступ к ответам размещается в личном кабинете, а контакты приходят через SMS или Telegram.
Калькулятор

Некоторые компании начали использовать на своих сайтах калькуляторы еще задолго до появления других виджетов. Этот надежный и проверенный инструмент особенно эффективен на порталах строительных организаций и в магазинах стройматериалов.
Калькулятор позволяет пользователю:
- рассчитать общую смету отделки квартиры либо дома под ключ;
- определить стоимость постройки коттеджа;
- рассчитать необходимый для работ объем строительных материалов.
Кроме строительства, онлайн-калькуляторы востребованы в сферах кредитования, страхования, логистики, туризма, транспорта, продажи билетов, клининга. Любая компания может легко поставить подобный виджет на свой сайт. Этот инструмент позволяет весьма эффективно нарастить количество заявок.
Виджеты соцсетей и мессенджеров
У многих компаний есть свои страницы и даже сообщества в социальных сетях. Поставьте на своем сайте отдельный блок с виджетами этих страниц. Это привлекает внимание, красиво выглядит и эффективно работает. Посредством кнопок пользователи могут быстро подписаться на аккаунт компании, перейти на страницу соцсети или поделиться полезной информацией с сайта.
Статьи, акции и картинки могут быть отправлены на почту либо опубликованы отдельным постом в выбранной соцсети. Пользователь может также перейти на страницу компании и оставить там свои комменты. Такие виджеты положительно скажутся и на SEO сайта. Поисковики учитывают репосты, переходы из соцсетей, оставленные комментарии (особенно со ссылками).
Существуют следующие варианты размещения кнопок соцсетей на сайте компании.
- На главной странице. Удобно собрать кнопки всех соцсетей в один блок. Его можно поместить ниже информации о продуктах компании.
- На странице «о нас» или «о компании». В этом случае блок с виджетами целесообразно поместить внизу страницы, под презентационной информацией.
- На странице «Контакты». Это особенно удобно, если соцсети являются дополнительным каналом связи с компанией. Многим пользователям проще контактировать посредством соцсетей либо мессенджеров.
- В футере сайта. Размещенные в подвале кнопки не вызовут перегрузку сайта. При они будут доступны пользователям на всех страницах.
- После статей, анонса акций, изображений или видео, которые могут вызвать у пользователей желание поделиться. При этом удобнее выравнивать размещаемые виджеты по левому краю экрана.
- На страницах с акциями, рекламными предложениями и кампаниями. Часть клиентов любит делиться в соцсетях подобной информацией.
- На страницах с товарами или услугами. С такой страницы удобно отправить ссылку на интересный пользователю товар. Разместить виджеты лучше всего непосредственно под продукцией, слева.
Предлагающая услуги компания может также разместить виджеты на первом экране.
Как вставить виджеты соцсетей на сайт
Для добавления виджета можно использовать конструктор либо HTML-код определенной соцсети. Код вставляется в любое удобное место на выбранной странице.
Покажем, как добавляются виджеты различных соцсетей.
ВКонтакте
<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="https://vk.com/js/api/share.js?95" charset="windows-1251"></script> <!-- Put this script tag to the place, where the Share button will be --> <script type="text/javascript"> <!--document.write(VK.Share.button(false,<type: "round", text: "Сохранить">));--> </script>
Facebook (Фейсбук)
<!-- Load Facebook SDK for JavaScript --> <div id="fb-root"></div> <script>(function(d, s, id) < var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"; fjs.parentNode.insertBefore(js, fjs); >(document, 'script', 'facebook-jssdk'));</script> <!-- Your share button code --> <div class="fb-share-button" data-href="https://www.your-domain.com/your-page.html" data-layout="button_count"> </div>
Youtube (Ютуб)
<script src="https://apis.google.com/js/platform.js"></script> <div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>
Немного иначе устанавливается виджет для Инстаграм. Перед установкой сначала его необходимо создать при помощи специального конструктора.
Конструктор позволяет выбирать удобный способ отображения виджета (в виде кнопки, стандартный, простой и пр.), размер, подпись и др. Нужно добавить имя профиля, затем выбрать нужные параметры и нажать «Создать виджет». После этого остается скопировать сгенерированный программой код и вставить его на свою страницу. Конструктор оснащен дополнительной функцией предварительного просмотра. Вы сможете еще до установки посмотреть на вид готового виджета.
Установка виджетов мессенджеров
Еще проще устанавливаются виджеты популярных мессенджеров, посредством несложного кода. Этот способ общения становится все более распространенным у многих пользователей.
Whatsapp (Ватсап)
<a title="Whatsapp" href="whatsapp://send?phone=79270000000"><img src="images/whatsapp_icon.jpg" alt="Написать в Whatsapp" /></a>
Viber (Вайбер)
<a href="viber://chat?number=%2B375292005818"> <img src="https://it-land.by/wp-content/uploads/2018/10/Viber-logo.png"> </a>
Триггерные рассылки
Чаще всего триггерные рассылки применяются в случае повторного привлечения лидов с целью их последующего продвижения вдоль воронки продаж. Зачастую в письмах имеется подписка с доступом к премиальному продукту либо отдельное поле для регистрации участников вебинара.
Подобный виджет обычно добавляется для взаимодействия с клиентами, информация о которых есть в базе. В этом отличие триггерных рассылок от поп-ап и лендингов. Инструмент направлен не на получение контактов, а на упрощение регистрации.
Высоко оценивается эффективность триггерных рассылок как средства привлечения и повышения процента удержания постоянных клиентов.
Тем самым инструмент снимает барьеры для входа, поддерживая вовлеченность пользователей.
Панели оповещений
Оповещения являются эффективным дополнением к любым страницам ресурса. Они выполняют следующие задачи:
- информируют посетителей о появлении новых продуктов и статей в блоге компании;
- предлагают скидки и купоны;
- сообщают клиентам о возможностях бесплатной доставки;
- расширяют списки рассылок и пр.
Оповещения привлекают внимание пользователей, позволяя им оставаться на заинтересовавшей их странице. Это существенный плюс инструмента. Достаточно разместить сообщение из всего одной строки, а посетители принимают решение о переходе по ссылке.
Панели оповещения обладают следующими преимуществами:
- повышают конверсию;
- переводят посетителей в ранг клиентов;
- позволяют с максимальной эффективностью задействовать внимание каждого посетителя при знакомстве его с контентом сайта.
Имитация очереди клиентов

Этот инструмент предназначен для создания видимости очереди. Чисто психологически такая ситуация подталкивает посетителей к совершению покупок. Ажиотаж помогает поднять численность заявок почти вдвое.
Основные преимущества виджета:
- увеличение конверсии;
- экономия бюджета за счет роста числа обращений без дополнительных затрат;
- ускоренное привлечение покупателей благодаря импульсивной реакции посетителей;
- рост лояльности клиентов; доверие возрастает, поскольку люди видят повышенный спрос;
- возможность информирования пользователей об акциях, скидках и пр.
Алгоритм запуска виджета следующий.
- Нужно установить код. Для самостоятельной установки можно воспользоваться видеоинструкцией. Альтернативный вариант — помощь программистов.
- При настройке виджета нужно записать в него соответствующие имена и названия городов, а также прописать заголовки.
После активации виджета на сайте станут всплывать окна, сообщающие о постоянном совершении покупок. Видящие эти сообщения посетители станут присоединяться к очереди. Информация о непрерывном совершении покупок другими людьми побуждает пользователей тоже делать заказы.
Захватчики клиентов
Виджет осуществляет имитацию обращения менеджера к посетителю. Тем самым интерес пользователя переключается на нужный сектор сайта.
Виджет позволяет:
- увеличить конверсию в 2 раза;
- распродать остатки товара, увеличивая объем реализации;
- привлечь новых клиентов благодаря видимости общения с реальным человеком;
- информировать пользователей об акциях, скидках и пр.
Алгоритм работы захватчика клиентов следующий.
- Устанавливается код виджета.
- Производится настройка параметров виджета: загрузка аватара, имени и трех текстов. Последнее сообщение содержит призыв к определенному действию и ссылку на страницу.
- После активации на сайте начнут всплывать окна, содержащие уникальное торговое предложение с призывом к действию. Функционал включает имитацию набора текста сообщений.
- Заинтересованный персональным обращением посетитель совершит покупку.
Итог
Виджеты – эффективные способы увеличения конверсии сайта, роста продаж. Они бывают разных видов, требуют грамотного применения. Ваша задача – выбрать те инструменты, которые понравятся пользователям и не будут раздражать. Нужно привлечь внимание и при этом не вызвать зависаний сайта, раздражения посетителя от обилия всплывающих окон. Следите за реакцией пользователей (помогут данные статистики). Если инструмент окажется не эффективным, лучше будет избавиться от него, заменить на другой. У каждого рекламного окна сделайте заметный крестик, который поможет пользователю сразу закрыть его в случае необходимости.