Как добавить попап-окно на сайт?

Автор: Екатерина Вайс
Интернет-маркетолог, преподаватель интернет-маркетинга, консультант по продвижению в интернете
Опубликовано: 03 марта 2020
658
Интернет-маркетинг

Всплывающие окна на сайте - как добавить

Попап-окно (всплывающее окно, popup) - это окно, которое всплывает на сайте при выполнении какого-то действия или при заходе на сайт. Данный элемент используют для привлечения внимания человека на сайте с целью увеличения конверсий.

Виды отображений попап-окон на сайте

  • hello-board

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

  • page-stop

Это попап-окно блокирует работу страницы сайта и сайт в целом, но до тех пор, пока человек не нажмет на кнопку действия или не закроет окно.

Виды попап-окон по задачам

  • entry pop-up

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

  • timed pop-up и scroll pop-up

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

  • click pop-up

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

Каждый вид попап-окна преследует свои цели и задачи. Поэтому выбор окна выбирается в зависимости от коммерческих целей и того, как быстро их хочется достичь. Page-stop - более жесткий вариант, hello-board - мягкая форма навязывания.

Призывы к действию в попап-окне

С помощью попапов можно предложить следующее:

  • подписаться на email-рассылку;

  • подписать на аккаунты в соцсетях;

  • сообщить актуальную информацию (график работы, новые цены, предстоящая акция);

  • реклама (характерно для информационных сайтов);

  • всплывающие подсказки по пользованию сайтом;

  • оставить номер телефона для обратной связи;

  • заполнить заявку.

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

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

Сложный способ

  • При помощи javascript

В веб-программировании основным средством для создания всплывающего окна является javascript.

  • При помощи CSS

Этот вариант подходит только для самых новых браузеров, в остальных данная функция работать скорее всего не будет.

Плюс сложного способа: один раз запплатил программисту, и потом оплачивать ничего не нужно. 

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

Простой способ

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

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

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

Пример попап-окна

5 лучших сервисов для создания попап-окон на сайте

  • Hello Bar

Стоимость использования: платный тариф начинается от 29 долларов в месяц при помесячной оплате, при оплате на год – есть скидки. Есть бесплатный тариф, но с ограниченным функционалом. Для начинающих сайтов вполне достаточно бесплатного тарифа -  в нем есть всё, что есть.

Этот сервис наиболее популярный.

Hello Bar

  • GetSiteControl

Стоимость использования: от 9 долларов в месяц за подключение к попап-окну на одном сайте. При оплате на год, можно получить скидку. 

GetSiteControl

  • Sumome

Есть бесплатный тариф. Платный начинается от 49 долларов в месяц. Считаю, что это дорого для русскоязычного бизнеса. Но зато за 49 долларов вы получаете не только сервисы всплывающих попап-окон, но и весь комплекс инструментов для интернет-маркетолога. При оплате за год, вы получаете 20 % скидку.

Sumome

Sumome price

  • Picreel

Стоимость за использование - от 19 долларов в месяц. Можно бесплатно протестировать сервис в течение 30 дней. При оплате за год - скидка 25 %.

Picreel

  • Mailmunch

Есть бесплатный тариф с полным функционалом для одного сайта. Платный тариф начинается от 15 долларов в месяц. 

Mailmunch

Mailmunch price

Плагины, которые можно с легкостью использовать на системе управления сайтом - Wordpress. Это бесплатно!

  • Popups

  • WordPress PopUp

  • Scroll Triggered Boxes

  • WordPress Notification Bar

  • WP Popup Plugin - Lightbox Popup

  • PopupAlly

  • YITH Newsletter Popup

Попап очень эффективен, если он настроен так, что он соответствует контенту сайта.

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

При подключении попап-окна, учитывайте разрешение дисплея устройств посетителей сайта. Золотой стандарт – 1024*768.

Грамотно используя всплывающие попап-окна, можно получить впечатляющий результат.

Лайфхак: попап-окна помогают продавать информационные продукты, такие как электронные книги, курсы и доступ к закрытым видеороликам.

Полезные рекомендации

1) всплывающее окно должно быть оптимального размера, таким, чтобы оно корректно отображалось всех устройствах;

2) дозируйте количество показов всплывающего окна

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

3) повремените

Показ попап-окна человеку, сразу после захода на сайт – плохо. Скорее всего он просто закроет его;

4) должна быть кнопка «закрыть» в виде привычного крестика

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

5) простой и понятный призыв к действию

Большая ошибка - перегрузка информацией;

6) одно окно – один призыв к действию

Например, вы хотите увеличить число подписчиков на Фейсбук. Сообщите об этом прямо - предлагайте посетителю сайта подписаться на страницу в Фейсбук;

7) тестируйте

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


>>> Хотите получить индивидуальную консультацию интернет-маркетолога?