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

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

Содержание

1. Что такое pop-up
2. Зачем использовать pop-up
3. Создание вашего первого pop-up
4. Как оформить user-friendly pop-up
5. Советы по настройке pop-up
6. Вывод

Что такое pop-up

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

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

Pop-up можно настроить для конкретного сайта или цели. Например, вы можете:

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

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

Зачем использовать pop-up

Pop-up обеспечивают вас личными контактами и сближают с клиентом.

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

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

Создание вашего первого pop-up

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

Виды pop-ups

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

• Pop-up на входе
• Pop-up на выходе
• Pop-up, который появляется по клику
• Pop-up c таймером
• Другие разновидности pop-ups

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

Заголовок и текст

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

• Узнать о новом продукте
• Получить рассылку
• Получить скидки, бонусы, подарки и т.д.

Кратко опишите ваше предложение и создайте поп-ап заголовок, шрифт которого, будет больше и жирнее остального текста.

Изображение

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

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

Детали

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

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

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

Поле ввода email

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

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

CTA Кнопки

Создайте текст кнопки CTA, основанный на действии клиента. Он должен быть максимально коротким, но при этом очень простым для понимания.

Лучшие примеры:

Тайминг

Позвольте клиентам просматривать ваш контент перед появлением поп-апа. Это не должно занимать много времени; 15-20 секунд будет вполне достаточно.

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

Как оформить user-friendly pop-up

Существует несколько видов pop-ups, которые выведут из себя любого человека в этом мире. Вот они: 

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

Но вы можете сделать pop-ups более эффективными и экологичными!

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

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

Итак, вот краткий список того, как сделать всплывающее окно на сайте.

1. Выберите время для показа кампании, когда ее не "перекрывают" другие всплывающие окна, например, баннер со скидкой.

2. Предложите подарок за подписку, например, бесплатную доставку - это повысит мотивацию.

3. Продумайте дизайн. Формы подписки на белом и сером фоне выглядят очень скучно и неприглядно. Сделайте яркий дизайн, чтобы привлечь пользователя.

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

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

Вывод

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

И помните, если всё сделано правильно, поп-апы не раздражают людей. Следуйте вышеуказанным правилам, и вас точно ждет успех. Если всё ещё в чем-то сомневаетесь - задайте нам вопросы, и мы с радостью поможем.