Кейсы

О студии

Блог

Контакты

12+

Карта

Тех. поддержка (на тильде)

8 (800) 555-01-19

Обсудить задачу

Сайты на Tilda

Разработка сайта

Разработка дизайна

Проектирование

Тех. поддержка (на тильде)

Редизайн сайта

зачем нужны виджеты на сайт и как их установить

Зачем нужны виджеты на сайт и что это вообще такое?

Блог

Главная

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

маркетинг

Следите за внутренней кухней студии в нашем телеграм-канале

Содержание

1. Что такое виджеты на сайте

3. Отличие виджетов от плагинов

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

6. Итоги

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

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

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

Что такое виджеты на сайте

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

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

Самый распространенный пример виджета — это поп-ап

Зачем нужны виджеты на сайте: основные функции

Представьте себе обычный сайт-визитку. Пользователь заходит, чтобы узнать, чем вы занимаетесь, скроллит до конца, мысленно говорит «‎ок, вы молодцы» и уходит. А теперь добавим туда пару виджетов: кнопку обратного звонка и чат для вопросов. Что изменится? Вы получите возможность взаимодействовать с каждым посетителем и превратить их в клиентов.

Итак, вот зачем устанавливают виджеты на сайт:

Добавить функционал. Например, виджет погоды или калькулятор стоимости доставки.
Упростить взаимодействие. Виджеты соцсетей и мессенджеров («Написать в WhatsApp») экономят время: посетителю не нужно искать ваши контакты, все происходит в один клик.
Собрать данные о посетителях. Например, через форму подписки на рассылку.
Увеличить конверсию сайта. Виджеты помогают вовремя подтолкнуть посетителя к целевому действию — будь то покупка, подписка или заявка.
Привлечь внимание, удержать. Таймеры и поп-апы с акциями стимулируют пользователей быстрее принимать решение. «‎Уже уходите? Подождите, у нас для вас есть подарок» — до боли знакомый поп-ап, живущий до сих пор. Кого-то он раздражает, а других заставляет все-таки оставить свой контакт.

Благодаря виджетам соцсетей посетитель может быстро связаться с вами

Почему виджеты — это удобно

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

Свои виджеты разрабатывают многие компании, например, сервисы почтовых рассылок (Unisender, SendPulse) или IP-телефонии (Mango Office, Novofon). Они же предоставляют аналитику по виджетам: просмотры, клики, заявки и т. д. Конечно, нужно будет настроить интеграцию, но зато обновления и техподдержка виджета — на стороне его разработчика, а это минус головная боль.

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

Заходите, люди добрые

…к нам в телеграм-канал. А недобрые — не заходите.

Что там в телеге

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

Какими бывают виджеты и какие задачи можно на них переложить — сейчас все расскажем.

Чат-боты, онлайн-чаты, соцсети, мессенджеры

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

Пример онлайн-чата на сайте

В последнее время стало модно делать мультикнопку для связи: объединять виджет чат-бота с виджетами мессенджера. Так у посетителей появляется выбор: написать в онлайн-чат или в Viber/WhatsApp/Telegram. Тут мессенджеры выигрывают, ведь у клиента остается история переписки, а у вас — его контакт.

Пример мультикнопки с онлайн-чатом и мессенджерами

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

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

Баннеры

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

Баннер с информацией о распродаже

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

Поп-апы (pop-up)

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

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

Пример поп-апа на сайте

Виджет email-подписки

Этот инструмент помогает собирать базу подписчиков для рассылки. Его можно настроить так, чтобы предлагать подписку в обмен на лид-магнит (например, чек-лист или скидку). На примере ниже — виджет email-подписки, встроенный в интерфейс сайта.

Виджет подписки на рассылку

Виджет обратного звонка

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

Пример виджета обратного звонка

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

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

Пример виджета с таймером обратного отсчета

Виджет карты

Такой виджет помогает пользователю понять, где вы работаете (офис, точка продаж и т. п.), не переходя в сервис самих карт (Яндекс.Карты илил Google Maps). Ниже — пример виджета с картой из нашего кейса.

Виджет с картой

Виджет калькулятора

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

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

Пример виджета с калькулятором

Виджет с отзывами и другими социальными доказательствами

Есть сервисы, которые автоматически собирают отзывы о вашей компании или о конкретном товаре на популярных платформах-отзовиках (например, 2ГИС, Отзовик, IRecommend). Затем с помощью виджета эти сервисы показывают рейтинг товара у вас на сайте. Удобно, если нужно показать, какие вы классные, задействуя независимые площадки.

Пример виджетов в отзывами из независимых площадок

Еще один вариант соцдоказательства — виджет по типу «22 человека купили это за последний час». Потенциальный клиент думает: «Если товар ходовой — надо брать». Это помогает подтолкнуть к покупке, особенно если посетитель колеблется в выборе.

Виджет с социальным доказательством

Виджеты-информеры

Актуально для крупных порталов вроде РБК или местных новостных изданий. Зашел на сайт, почитал новости, глянул погоду и курсы валют: все в одном месте.

Что сюда можно включить:

погода,
курсы валют,
табло рейсов,
лента новостей.

Пример виджета с курсом валют

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

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

Пример виджета для покупки билетов

Виджеты-квизы

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

Пример виджета с квизом

Отличие виджетов от плагинов

Многие путают виджеты с плагинами, но между ними есть существенная разница.

Виджет — это часть интерфейса, инструмент, с которым могут взаимодействовать пользователи сайта. Например, кнопка «Заказать звонок» или онлайн-чат.
Плагин — это расширение для управления функциональностью сайта. Он больше касается бэкенда (невидимой пользователю части сайта). Например, SEO-плагин для WordPress или модуль аналитики.

Где работает

На поверхности сайта, в интерфейсе

Внутри сайта, на уровне кода

Кто использует

Пользователь сайта

Администратор или разработчик

Пример функций

Онлайн-чат, кнопка связи, таймер

Оптимизация скорости загрузки, SEO, резервное копирование

Видимость для пользователя сайта

Виден

Не виден

Где работает

На поверхности сайта, в интерфейсе

Внутри сайта, на уровне кода

Кто использует

Пользователь сайта

Администратор или разработчик

Пример функций

Онлайн-чат, кнопка связи, таймер

Оптимизация скорости загрузки, SEO, резервное копирование

Видимость для пользователя сайта

Виден

Не виден

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

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

Говоря в общем, тут есть три варианта.

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

Если у вас сайт на Tilda, то большинство виджетов можно прикрепить в head сайта, так как это готовый HTML. Это делается довольно быстро. Вообще в Тильде скудный выбор виджетов, поэтому мы решили пилить свои. Ниже смотрите примеры того, как это выглядит.

Пример виджета, который мы разработали специально под Тильду

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

Подключим и настроим виджеты на сайт на Тильде

Наши умелые руки — к вашим услугам. А еще могём настроить другие интеграции: с банком, сервисом доставки, CRM и многое другое.

А сколько стоит?

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

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

Как использовать виджеты, чтобы они были эффективными

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

Настройте виджеты под задачи бизнеса

Не ставьте виджеты просто потому, что у всех так. Определите, чего вы хотите достичь.

Упростить связь с клиентами → онлайн-чат или кнопки мессенджеров.
Собрать контакты → поп-ап с подпиской на рассылку.
Больше продаж → виджет таймера обратного отсчета и отзывы.

Важно продумать и то, что будет дальше. Человек оставил свой email или задал вопрос чат-боту. Что дальше? Как будем продавать? Где деньги, Билли?

Размещайте виджеты в более удачных местах

Хорошо, если виджеты будут там, где их ожидают увидеть:

онлайн-чат — в правом/левом нижнем углу экрана;
карта — на странице «Контакты» или внизу главной страницы;
таймер акции — рядом с кнопкой «Купить».

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

Настраивайте виджеты под свою аудиторию

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

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

Что в итоге

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