Встроенные виджеты: как встроить формы и призывы к действию в страницу сайта с LeadPlan


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

Команда LeadPlan

1 ноября 2025 г.

Что такое встроенные виджеты и чем они отличаются от обычных?

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

Встроенный виджет в блоге DashaMail

В чём преимущества встроенных виджетов?

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

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

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

Встроенные виджеты для сбора контактов

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

Встроенный виджет подписки на сайте «Оксфордстрит»

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

В DashaMail есть всё, чтобы начать email-маркетинг:
  • готовые шаблоны рассылок;
  • блочный редактор для создания рассылок без навыков верстки и скилов дизайнера;
  • прямая интеграция с LeadPlan и выгрузка всех контактов из форм в базу на сервисе;
  • готовые сценарии автоматизации;
  • ИИ инструменты для создания текстов и картинок;
  • продуманные инструменты сегментации и персонализации рассылок;
  • детальная статистика и аналитика по рассылкам и базам, чтобы вы знали, что можно улучшить.
Регистрируйтесь в сервисе DashaMail и отправляйте бесплатно до 2000 писем.
Сбор контактов
Встроенный виджет можно также использовать для сбора контактов или заявок.
Например, виджет-бар:
Встроенная форма сбора контактов

Встроенная форма сбора контактов на сайте «Единого центра услуг»

Или виджет с формой:
Встроенная форма сбора контактов

Встроенная форма сбора контактов

Настройте в LeadPlan нужное количество полей и собирайте все полезные данные: номер телефона, email, имя. Цвет и стиль самого виджета и кнопки также легко кастомизируются.
Редактор виджетов LeadPlan

Создание дизайна виджета в LeadPlan

Квиз-виджет в кнопке или баннере
Это вариант использования виджета в виджете. Когда вы добавляете на сайт кнопку или баннер, при нажатии на которые уже открывается второй виджет, например квиз-форма.
Шаг 1. Баннер с предложением пройти опрос
Пример квиз-виджета
Шаг 2. Квиз-опрос
Пример квиз-виджета
Как сделать виджет, который будет появляться по клику на кнопку, читайте в Базе знаний.

Встроенные виджеты-уведомления

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

Такой формат ещё не заезжен и не так много используется, поэтому вы можете привлечь много внимания.

Как создать этот виджет? Для этого понадобится кастомная настройка в LeadPlan.
Виджет в карточках товаров

Как создать встроенный виджет в LeadPlan?

Теперь вы знаете, что такое инлайн-виджет. Перейдем к процессу создания и кратко опишем, как создать встроенный виджет в LeadPlan. Более подробная инструкция уже ждёт вас в Базе знаний.

Шаг 1. Регистрируемся в LeadPlan

Если у вас ещё нет личного кабинета, зарегистрируйтесь в LeadPlan. Это бесплатно и займет всего пару минут — понадобится только пароль, почта и ваш сайт. После этого вы сможете создать виджет и тестировать бесплатно до 10 000 показов.

Шаг 2. Установка кода

После регистрации нужно подключить сайт к LeadPlan. Для этого вам просто понадобится вставить HTML-код на ваш сайт.

Подробная инструкция по установке кода уже в Базе знаний

Шаг 3. Создаём встроенный инлайн-виджет

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

Перейдите на вкладку «Виджеты» — «Встроенные в контент» и выберите подходящий шаблон.
Создание встроенного виджета в LeadPlan
Если вы хотите создать виджет, шаблона которого нет в LeadPlan, вам понадобится кастомная разработка и навыки работы с кодом.

Шаг 4. Настраиваем содержимое инлайн-виджета

Перейдите к блоку «Параметры», выберите параметр «Расположение» и, если нужно разместить виджет в определённом месте на сайте, заполните поле «Селектор».

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

Если вы разбираетесь в CSS, вам будет полезна статья о селекторах. Если нет — установите в браузере любое расширение для поиска CSS-селекторов, например Get Unique CSS Selector.
Создание встроенного виджета в LeadPlan

Шаг 5. Выбираем условия показа

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

Шаг 6. Настраиваем таргетинг

В настройках встроенных виджетов LeadPlan доступны следующие типы таргетинга:
  • по целевым страницам на сайте;
  • URL параметрам;
  • наличию / отсутствию произвольного CSS (JavaScript) селектора DOM элемента;
  • по фразе в коде страницы;
  • по типу устройства;
  • по ОС устройства посетителя;
  • по типу браузера.
Пример готового встроенного виджета в LeadPlan
Готово! Теперь на вашем сайте есть красивый встроенный виджет.

Потратьте 20 минут, чтобы создать встроенный виджет в LeadPlan. Увеличьте количество собранных лидов, подписчиков или участников акции в зависимости от цели. При этом не зависьте от стороннего ПО и не отвлекайте посетителей сайта от основного контента.

Начните прямо сейчас. Регистрируйтесь в LeadPlan и создавайте 20 виджетов до 10 000 просмотров бесплатно.

Похожие статьи

Лидогенерация для бизнеса: 10 проверенных стратегий на 2025 год

LeadPlan | Лидогенерация | Маркетинг — читать 10 мин.
Подробнее

+20 эффективных форм подписки на email-рассылку: примеры и полезные советы

LeadPlan | Лидогенерация | Маркетинг — читать 15 мин.
Подробнее

Как увеличить заявки с сайта на 15% с помощью pop-up? Кейс автомобильного бренда Solaris

LeadPlan | Лидогенерация | Маркетинг — читать 5 мин.
Подробнее