Виджеты для сайта: какие бывают, где ставить и как не навредить

Что такое виджет для сайта?

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

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

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

Задача у виджета одна: сократить путь от интереса к действию. Человеку не нужно искать номер телефона, открывать почту или вспоминать, где была форма. Всё нужное лежит под рукой в тот момент, когда он готов написать или позвонить, и именно это поднимает конверсию.

Какие виджеты бывают и чем они отличаются

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

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

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

У Calltouch есть ещё «умная заявка». По описанию сервиса, она собирает контакты без звонка и показывается только тем посетителям, которые, скорее всего, не позвонят.

Как это выглядит в деле, показывает кейс производителя «Композит Групп», который пересказывает рейтинг сервисов обратного звонка от Timeweb. Компании нужно было больше заявок: подрядчики подтянули сайт под требования поисковиков, запустили рекламу и подключили виджет обратного звонка Envybox. За первый месяц заявок стало на 50% больше, за полгода в шесть раз, а трафик вырос на 45%. Цифры приводит поставщик виджета, и работал он не один: приписывать рост одной кнопке нельзя.

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

Виджеты бывают совсем простыми. Продавец косметики Cosmetics Capital, о котором пишет OptinMonster, добавил на страницу полосу с таймером обратного отсчёта и увеличил число лидов на 300%. Поставщик сервиса рассказывает о собственном клиенте, поэтому цифру стоит считать ориентиром.

Где и когда показывать виджет, чтобы он не раздражал

Главное правило касается времени. Окно, которое выпрыгивает через секунду после захода, воспринимают как помеху. Venyoo советует показывать виджет через 30-40 секунд пребывания на странице или оставлять ненавязчивую кнопку. У Телфин граница строже: всплывающее окно виджета не должно появляться раньше, чем через минуту после начала чтения.

Время показа не вопрос вкуса. Netpeak, ссылаясь на данные Media 108, называет главные причины, по которым посетители не звонят: 30% слишком рано уходят с сайта, 20% не интересует предложение, 13% не нашли нужной информации. Первую причину лечит окно, которое появляется в момент сомнения. Две другие про содержание страницы, и виджет их не исправит.

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

Четвёртое правило - выход. Кнопка отказа должна быть хорошо видна, а окно не должно полностью закрывать экран телефона. Если закрыть окно трудно, человек закроет всю вкладку, и вы потеряете не только заявку, но и посещение.

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

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

Обратная ситуация описана у OptinMonster. Магазин Shockbyte показывал на странице оформления уходящим посетителям окно со скидкой 50%. Окно сработало на 13,73% посетителей и вернуло почту, которую иначе потеряли бы. Разница между двумя кейсами в том, что Shockbyte вмешивался в момент ухода, а Wrike держал кнопку перед глазами всё время.

Как всплывающее окно связано с поиском?

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

Для типовых задач Google советует не изобретать окно самому. Во многих системах управления контентом есть плагины со стандартными диалогами, например для подписки на рассылку. Такие готовые решения проще подогнать под рекомендации поисковика.

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

Ещё одно предупреждение Google: если нужно получить согласие или данные, не отправляйте человека на отдельную страницу. Окно с формой лучше накладывать поверх содержания, чтобы робот проиндексировал хотя бы часть страницы. Согласуйте юридические окна, например для файлов cookie, с юристом.

Исключения бывают, но их считают цифрами. Search Engine Journal вспоминает Airbnb: компания проанализировала данные и решила, что потеря позиций в поиске не перевешивает трафик и выручку, которые приносит окно на мобильной версии, и оставила его. Журнал пишет и о приложениях: такие окна подняли число скачиваний на 300% у Airbnb и вдвое у Pinterest, но советует идти этим путём только на данных и на свой страх и риск. Обычному сайту повторять это рискованно: у Airbnb аналитика была под каждую цифру.

У Яндекса жёсткость направлена на обман. В блоге для вебмастеров разобраны схемы с push-запросами: сайт блокируется, пока пользователь не согласится, подсовывает кнопку «Разрешить» под видом возраста или гоняет человека по сайтам с новым запросом. Такие ресурсы ранжируются ниже и помечаются предупреждением об опасности, а в Вебмастере появляется уведомление.

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

Сколько скорости забирает виджет?

Любой виджет - это чужой скрипт, и браузеру приходится его скачать и выполнить. По измерениям Core Web Vitals, самые тяжёлые чат-виджеты, Zendesk и Tawk.to, подгружают от 500 до 750 КБ JavaScript, а лёгкие, Zoho Desk и Crisp, укладываются в 155 КБ.

В среднем чат добавляет к блокировке основного потока 300-600 миллисекунд, и этого хватает, чтобы страница с нормальным показателем отклика получила оценку «требует улучшения». Если же скрипт блокирует отрисовку, первая отрисовка может замедлиться с 1,0 до 2,3 секунды и больше.

Цену задержки видно по крупным сайтам. В подборке web.dev итальянская Vodafone улучшила LCP на 31% и получила на 8% больше продаж, а индийская Nykaa за улучшение LCP на 40% получила на 28% больше органического трафика из городов поменьше. Это не истории про чаты, но секунды загрузки в них переводятся в деньги.

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

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

Отложенная загрузка чата ничего не стоит с точки зрения удобства

Арьен Карел, автор Core Web Vitals, о том, почему чат можно загружать позже

Решение простое. Скрипт загружают после события load и в момент, когда браузер свободен: так влияние чата на оценку Lighthouse падает с 9-16 пунктов до 0-1. Попросите разработчика подключить виджет именно так.

Как понять, что виджет работает?

Проверяйте виджет тем же способом, что и любую правку: сравнением. Вы выбираете цель, показываете виджет части посетителей и смотрите, выросла ли доля заявок. Как делать это аккуратно, подробно написано в статье про A/B-тест.

Ожидания лучше держать скромными. Телфин пишет, что установка кода обратного звонка в среднем увеличивает число звонков на 10-15%, и добавляет, что виджет нужно настроить так, чтобы он не раздражал покупателей. Звонок после заявки тоже нужен вовремя: перезванивать нужно в считанные секунды.

Так выглядит измерение в малом масштабе. Netpeak описывает интернет-магазин, который подключил обратный звонок Ringostat и сравнил две недели до запуска с двумя неделями после. До было 73 звонка с уникальных номеров, после 108, и 33 из них пришли через виджет: прирост составил 48%. Посетителей при этом было примерно столько же, около двух тысяч в оба периода, так что рост не объясняется трафиком. Но историю рассказывает сам сервис, а сравнение «до и после» без контрольной группы не отделяет виджет от сезона.

Хороший пример смешанного теста показала MediaNation. Для сети клиник «Доктор Борменталь» команда подготовила вторую версию посадочной страницы: поля формы вынесли на первый экран, срок акции сократили с пяти дней до 18 часов и добавили окно со специальным предложением, которое всплывало при попытке закрыть страницу. Трафик делили поровну, эксперимент шёл в Google Optimize.

Результат вышел скромным, но измеримым: конверсия выросла с 1,7% до 2,0%, то есть на 17,6%. Запланированные 90 дней тест не дошёл до конца, его остановили, когда победитель стал очевиден. Правда, менялось сразу три элемента, и узнать, сколько дало именно всплывающее окно, из этого теста нельзя.

Гипотезы про виджеты хорошо работают, если привязаны к аудитории. Магазин Skates.co.uk показал французским посетителям окно с обещанием доставки за три дня и скидкой 5%. Окно конвертировало 10,97% уходящих посетителей, а среди геотаргетированных до 39%. А RazorSocial предложил уходящему читателю расширенную версию статьи и вырос по конверсии на 520%.

• цель записана до запуска: заявка, звонок или подписка;
• виджет проверен на телефоне, он не закрывает корзину и меню;
• окно появляется не сразу и закрывается одним нажатием;
• скрипт загружается после основного содержания;
• заявки из виджета приходят менеджеру и попадают в учёт.

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

Частые вопросы