Что такое поп-апы (всплывающие окна): подробное руководство с примерами

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

Поп-ап: что это?

Всплывающая реклама или поп-ап ― это интернет-реклама во Всемирной паутине. Поп ап окно ― это область отображения графического интерфейса пользователя, обычно небольшое окно, которое внезапно появляется («всплывает») на переднем плане графического интерфейса пользователя.

Поп-ап или поп ап

Скорее всего, во время серфинга в Интернете вы встречали три варианта написания: «поп-ап», «поп ап» или «попап». Несмотря на то, что они созвучны, они все же отличаются по смыслу.

«Pop up» ― это глагол, означающий внезапное или мгновенное появление.

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

Хотя «поп ап» является наиболее распространенным написанием, оно не является грамматически правильным. Поэтому мы в Claspo выбираем «попап» вместо вариантов «поп-ап» или «поп ап» и стараемся быть последовательными во всем нашем контенте.

Зачем нужны всплывающие окна?

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

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

Привлечение внимания

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

Повышение конверсии

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

Зачем искать успешные примеры? Наши партнерские кейсы наглядно демонстрируют, что Claspo может сделать для вашей компании: использование всплывающих окон увеличило конверсию в 2 раза для компании Grade и в 3,9 раза для DeepStateMap. Читайте и узнайте, как Claspo может изменить ситуацию к лучшему.

Адаптивность к изменениям

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

Универсальное решение

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

Что такое поп-ап, типы и примеры

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

Типы поп-апов по размещению на экране

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

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

Посмотреть примеры модальных лайтбоксов Claspo

Этот классический тип всплывающего окна появляется в центре экрана и накладывается на контент вашего сайта, затемняя его словно фон. Согласно статистике, модальное всплывающее окно демонстрирует один из лучших средних показателей конверсии ― 7,39%.

Полноэкранный поп-ап

Посмотреть примеры полноэкранных всплывающих окон Claspo

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

Плавающее окно

Посмотреть примеры всплывающих окон Claspo

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

Боковые всплывающие панели

Посмотреть примеры всплывающих плавающих панелей Claspo

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

Встроенный виджет

Посмотреть примеры встроенных всплывающих окон Claspo

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

Виджет-лаунчер

Посмотреть примеры виджет-лаунчеров

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

Поп-ап окна по цели

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

Сбор данных

Создайте поп-ап для сбора данных

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

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

Специальные предложения

Создайте поп-ап со специальным предложением

Этот тип всплывающих окон фокусирует внимание посетителей сайта на промокодах, скидках, подарках и других выгодных предложениях от вашего бренда. Поскольку 94% покупателей всегда ищут выгодное предложение перед покупкой, такая поп-ап форма может поднять конверсию и продажи на новый уровень. Ваше предложение будет выделяться на фоне остального контента, независимо от выбранного макета.

Поддерживайте связь с клиентами

Создайте поп-ап чтоб оставаться на связи

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

Сбор отзывов

Создайте окно опроса

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

Оповещение посетителей сайта

Создайте окно уведомления

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

Лучшие примеры использования поп-апов

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

1. Позаботьтесь о дизайне. Идеальной практикой является адаптация внешнего вида всплывающего окна к общему дизайну сайта, чтобы обеспечить единство цветов и шрифтов. Также не стоит перегружать поп-ап на сайте текстом. В противном случае ваше сообщение может быть трудным для понимания. И наконец, добавьте изображение, чтобы увеличить количество кликов на всплывающем окне на 25%.

2. Не спешите показывать всплывающее окно. 28,6% посетителей говорят, что их раздражает немедленное появление поп-апов после входа на сайт. Поэтому дайте им время прокрутить страницу и освоиться. Это улучшит не только пользовательский опыт, но и конверсию. Лучше всего конвертируются всплывающие окна, появляющиеся через 8 секунд после входа на сайт. Но чтобы определить идеальный момент, всегда можно протестировать различные варианты.

3. Используйте триггер прокрутки. С помощью Claspo вы можете показывать всплывающее окно только тогда, когда посетители прокрутят определенный процент страницы вашего сайта. Некоторые исследования показывают, что всплывающие окна, появляющиеся после 10-50% прокрутки страницы, конвертируются лучше всего, поэтому такой отложенный показ может стать отличным решением.

4. Адаптируйте поп-ап к мобильной версии. 72% посещений сайтов совершается с помощью смартфонов. Поэтому, если ваша всплывающая реклама не адаптирована под мобильные устройства, вы можете потерять львиную долю конверсий. Всплывающие окна Claspo реагируют на различные размеры экранов и легко подстраиваются по ширине и высоте под макет вашей страницы.

5. Не повторяйте поп-апы. 19,2% посетителей жалуются на то, что при каждом посещении сайта они видят одно и то же всплывающее окно. Это раздражает и нелогично, как, например, когда подписчики снова видят всплывающее окно регистрации. С помощью Claspo вы можете прекратить показ всплывающих окон, как только клиенты оставят свои контактные данные. Кроме того, можно регулировать периодичность и показывать поп-ап либо один раз, либо раз в несколько дней. Улучшение пользовательского опыта гарантировано.

6. Показывайте специальные всплывающие окна уходящим посетителям. Согласно определению, exit-intent pop-up ― это поп-ап при закрытии страницы для тех, кто собирается покинуть ваш сайт. Благодаря ему можно убедить более 10% посетителей остаться и совершить покупку. Фактически, любое из ваших всплывающих окон может превратиться в предложение о выходе одним щелчком мыши в редакторе Claspo. Главное, чтобы ваше сообщение было достаточно убедительным, чтобы удержать клиентов.

7. Тщательно продумайте свой призыв к действию. Вы должны четко объяснить клиенту, какого действия вы от него ожидаете. Кроме того, в CTA следует делать акцент на ценности. Например, вместо «начать покупки» можно использовать «купить сейчас со скидкой 20%». Наконец, можно добавить к CTA таймер обратного отсчета, который с большей вероятностью ускорит покупателей, чем просто кнопка «купить сейчас». В частности, всплывающие окна с этим крючком конвертируются в 2 раза лучше.

Как Claspo может вам помочь

Claspo ориентирован на удобство пользователей и конверсию. Поэтому создание всплывающих окон с помощью редактора Claspo является беспроигрышным решением.

• Защита от раздражения и перекрытия. С помощью наших эксклюзивных функций вы можете установить интервал тишины между отображением всплывающих окон. Кроме того, Claspo предотвратит их наложение друг на друга, если они должны отображаться одновременно. 
• Расширенные возможности отображения и таргетинга. С помощью Claspo вы получаете полный контроль над тем, кто и когда увидит ваши всплывающие окна. Это позволит вам улучшить путешествие клиента по сайту и персонализировать его впечатления, что увеличит вашу прибыль до 40%.
• Простая локализация. Claspo позволяет показывать всплывающие окна в зависимости от географического положения ваших клиентов. При этом ваша аудитория сможет увидеть ваше сообщение на том языке, который соответствует ее браузеру.
• 5000+ интеграций. Перенесите ключевые показатели всплывающих окон в единое хранилище данных по своему выбору, изучите ценные сведения о своей аудитории и обеспечьте наилучшее качество обслуживания клиентов для повышения продаж.
• Инновационный всплывающий слайдер. С его помощью можно отображать несколько товаров или специальных предложений в виде анимированного слайд-шоу. Таким образом, вы не раздражаете клиентов большим количеством всплывающих окон, но при этом доносите до них все свои идеи.