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

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

05 января 2022 22 декабря 2022 ~ 7 мин читать 3540 просмотры
оценить
Claspo Blog Как сделать всплывающее окно на сайте?

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

Содержание

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

Что такое popup?

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

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

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

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

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

Зачем использовать popup?

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

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

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

Создание вашего первого popup

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

Виды popups

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

  • Popup на входе
  • Popup на выходе
  • Popup, который появляется по клику
  • Popup c таймером
  • Другие разновидности popups

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

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

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

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

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

Изображение

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

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

Детали

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

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

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

Поле ввода email

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

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

CTA Кнопки

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

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

Как нельзя делать

Как следует делать

Подпишитесь на нашу интересную рассылку

Подписаться

Загрузите эту бесплатную книгу о кулинарии

Загрузить

Тайминг

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

Вас также может заинтересовать
Как создавать видео попапы
Как создавать видео попапы

Как сделать попап с видео? Вы когда-нибудь задумывались, как можно вставить видеоролик в свой pop-up? Это возможно с помощью плагина для сайта. По сути, вы видите на экране большое окно, в котором начинается воспроизведение видео. Такой pop-up дополняет ваш веб-сайт, создавая более заметный и привлекательный контент. Это помогает лучше и быстрее общаться с вашими посетителями.  Вы также можете показывать разные товары с вашего сайта, которые привлекут клиентов. Кроме того, можно еще показать неожиданные рекомендации, которые могут быть полезны для посетителей....

30 декабря 2021 9 мин читать
Как использовать анимационные эффекты для попапов
Как использовать анимационные эффекты для попапов

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

27 декабря 2021 11 мин читать
4 лучших примера попапов для блогов, чтобы получить больше подписчиков
4 лучших примера попапов для блогов, чтобы получить больше подписчиков

По данным Statista, в 2021 году более 4,6 млрд людей используют Интернет для чтения, получения контента, общения и обучения. Это 59,5% всего населения! И скоро будет 100%. Но, как известно, чем больше людей, тем больше разных тем им нравится читать. Таким образом, уникальный контент по какой-либо теме должен быть очень цепляющим, полезным и интересным. Вот поэтому в блогах и социальных сетях так много разных форматов, которые вы видите каждый день. А попапы в блогах могут помочь привлечь новых читателей.  Сегодня...

21 декабря 2021 8 мин читать
Сбор номеров телефона: 7 полезных советов
Сбор номеров телефона: 7 полезных советов

Не знаете как повысить эффективность SMS-маркетинга для своего бизнеса? На самом деле, он просто требует собственной стратегии, как и любой другой маркетинговый инструмент. SMS-рассылка поможет привлечь больше людей, уведомить их о новых товарах или услугах и создать дружеское отношение к вашему бренду.  А угадайте, как можно легко собрать номера телефонов клиентов? Попапы вам в помощь! С таким подходом вы сможете: Привлекать клиентов на свой сайт с помощью SMS Рассылать ограниченные предложения и уведомлять об эксклюзивных распродажах Получать обратную связь для...

08 января 2022 10 мин читать
5 советов по созданию более эффективных попапов
5 советов по созданию более эффективных попапов

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

11 января 2022 8 мин читать
Попапы с таймером обратного отсчета: 5 эффективных примеров
Попапы с таймером обратного отсчета: 5 эффективных примеров

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

15 января 2022 9 мин читать

Вверх

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