Для более удобной работы на нашем сайте используются файлы сookies. Запретить обработку cookies можно в настройках Вашего браузера. Пожалуйста, ознакомьтесь с Политикой использования cookies
Понятно
Все статьи

Как сделать всплывающее окно на сайте

Всплывающие окна (pop up) — настоящая находка для бизнеса. Этот элемент интерфейса позволяет решать задачи по привлечению клиентов, анализу потребительских предпочтений, рекламы и продвижения товаров. С его помощью вы оповестите посетителей сайта об акциях и выгодных предложениях, вовлечёте в воронку продаж. Но не стоит забывать о рисках: большое количество всплывающих окон может раздражать, а неуместное размещение снижает кликабельность. Как сделать всплывающее окно на сайте ненавязчивым и продуктивным, расскажем в статье.


Разбираемся в терминах: что такое всплывающее окно


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

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

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

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


Какие типы всплывающих окон применяются в бизнесе


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

  • hello-board размещается в нижней или верхней части экрана. Его задача — упростить работу с сайтом, не мешая обзору. Добавление такого элемента не раздражает посетителей: при желании его можно закрыть или просто не обращать на него внимание;

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

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

В зависимости от назначения всплывающие окна разделяются на:

  • timed pop-up или окошки с временной отсрочкой появляются через заданный промежуток времени — например, спустя несколько секунд или минут. Точный момент появления на экране определяется, исходя из целей бизнеса;

  • entry pop-up или приветственные окошки возникают на экране в момент посещения сайта. Их цель — познакомить гостя с самыми интересными предложениями;

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

  • click pop-up появляются после клика по кнопке на сайте, например, для регистрации пользователя;

  • pop-out или выезжающие окна используются для технической поддержки пользователей или как форма обратной связи. С их помощью можно оформить корзину или чат-бот — такой формат окон почти не раздражает клиентов.

Уже решили, какое всплывающее окно разместить? Самое время переходить к следующему этапу — разработке и установке.

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


Создание всплывающего окна: теория и практика


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

  • HTML, JavaScript и CSS. Такой способ требует элементарных знаний в области написания сайтов и достаточно трудоёмкий. Хотя при наличии времени и желании можно добиться нужного результата.

  • Плагины на jquery для WordPress. Достаточно просто подключить инструменты. Эти готовые решения гибко подстраивается под нужды вашего бизнеса — просто установите таймер и интервал показов пользователям.

  • Специальные сервисы, например, СберЛид. Такой вариант понравится всем, кто ищет быстрое и простое решение. Интерфейс и функционал программ понятен даже тем, кто никогда не владеет инструментами разработки.

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


Как самостоятельно делать всплывающие окна в сервисе СберЛид


Быстро добавить всплывающее окно на сайт позволяет сервис СберЛид. В нём достаточно выбрать один из 50+ готовых шаблонов и настроить его под нужды вашего бизнеса. Меняйте цвет текста и фона, размер и шрифт заголовка, выбирайте сценарий показа для достижения максимальных показателей конверсии.

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

Первые 14 дней тестировать сервис можно бесплатно.
С чего начать работу