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

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

Что сложного во всплывающих окнах? С ними так много всего можно сделать, что это на грани стресса (ну, может быть, полного стресса).

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

Давайте проверим их!

16 потрясающих примеров всплывающих окон (и почему они работают)

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

1. Инвестируйте – будьте настоящими

Всплывающее окно Invesp предназначено для информационного бюллетеня. Он гласит:

Перегружены лучшими практиками CRO, замаскированными под информацию о конверсиях?

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

Почему это работает

• Рассказывает как есть! Invespro уверяет вас, что вы будете получать то, что вам нужно , в свой почтовый ящик — настоящую ценную информацию, а не просто надуманные передовые практики или пустой контент. каждую неделю
• Социальное доказательство. Присоединяйтесь к более чем 35 тысячам зарегистрированных пользователей? Разговор о FOMO
• Ведущая квалификация. Заявляя, что более 35 тысяч маркетологов, дизайнеров и оптимизаторов уже зарегистрировались, это всплывающее окно гарантирует, что на него зарегистрируются нужные люди, и гарантирует этим целевым лидам, что у вас есть то, что им нужно.

Что я могу изменить

• Не нужно заглавных букв в заголовке. Вы увидите, как это всплывает снова и снова в этом посте. Дело дела читается легче! Чем легче что-то читать, тем легче это воспринимается покупателем! Это психология копирайтинга!

2. Survey Sparrow — используйте лица

В этом примере всплывающего окна от Survey Sparrow парень указывает на заголовок, который гласит: Создавайте опросы, которые работают.

В описании написано Красиво оформленные разговорные опросы. Очень интересно, на 40 % больше откликов. Затем CTA говорит «Зарегистрируйтесь бесплатно».

Почему это работает

• Визуально привлекает внимание. Спасибо парню, делающему впечатлённое выражение лица в ярко-жёлтом свитере, указывая на заголовок. Кроме того, то, что он выскочил из всплывающего окна, делает его еще более… ну… популярным.
• Ценностное предложение . Из описания вы точно узнаете, что в нем есть для вас, с дополнительным бонусом в виде на 40% больше ответов.
• Доверять. Вы получаете чистую правду о том, что это бесплатно в том смысле, что это 14-дневная бесплатная пробная версия, но также уверены, что кредитная карта не требуется.

Что я могу изменить

• Вероятно, нет необходимости повторять 40%-ную скорость выполнения внизу.

3. Tully’s Training – устранение болевых точек

Приведенный ниже пример всплывающего окна от Tully’s Training уникален. Он гласит: «Привет, меня зовут Мэри Талли». Ваша собака борется с чем-либо из следующего? Затем вы можете выбрать один из четырех вариантов: беспредел щенков, деструктивное поведение, агрессивные собаки и приучение к горшку.

Почему это работает

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

Что я могу изменить

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

4. Pop Chart – придумай слово

Это всплывающее окно Pop Chart — хороший пример разговорного тона. Он гласит: «Наши электронные письма зашкаливают». Получайте обновления без спама от Pop Chart.

Почему это работает

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

Что я могу изменить

• Это достаточно просто, я ничего не понял!

5. Almond Surfboards — опросите своих посетителей

Этот пример всплывающего окна от Almond Surfboards гласит:

Как давно вы занимаетесь серфингом?

Ваш предыдущий опыт поможет подобрать лучшее оборудование для вас.

Тогда у вас есть два варианта: меньше или больше двух лет.

Почему это работает

• Персонализация. Это всплывающее окно появляется при входе на сайт и помогает создать персонализированный опыт для посетителя — столп в составлении и оптимизации пути любого покупателя.
• Чистый дизайн. Копия минимальна, а образ серфера (очевидно) соответствует бренду.

Что я могу изменить

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

6. WPMU Dev — включите свои оценки

Это всплывающее окно от WPMU Dev гласит: « Наши самые большие скидки предоставляются по электронной почте». А в описании сказано: «Будьте первыми, кто узнает о выпуске наших новых продуктов и распродажах, в том числе о распродаже «Черная пятница» в этом году, которая станет нашей крупнейшей!

Затем есть поле для ввода адреса электронной почты и кнопка CTA с надписью «ОТПРАВИТЬ МНЕ СДЕЛКИ».

Почему это работает

• Специфика. Он сообщает читателю, что он получит, если подпишется на информационный бюллетень.
• Социальное доказательство. 2274 отзыва Trustpilot и средний балл 4,9 звезды дают вам уверенность в том, что этому плагину WordPress вы можете доверять, что важно в мире веб-сайтов и плагинов.
• Стратегическая копия. Заголовок вызывает ажиотаж по поводу распродажи в Черную пятницу — отличный способ повысить вовлеченность в ваши маркетинговые кампании и рекламные акции.

Что я могу изменить

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

7. Flexxable — выходите за рамки

Что ж, если это всплывающее окно не является эмоциональным маркетингом, то я не знаю, что это такое. Он гласит : ДЕРЖИСЬ! а под ним мужчина в фирменной толстовке с капюшоном и в наручниках. Затем идет подзаголовок и описание:

Вы оказались в заложниках у требовательных лидогенерирующих клиентов? Сбегите из «тюрьмы для служащих» и покончите с неприятными текстами, сообщениями в личных сообщениях и электронными письмами, требующими от вас СДЕЛАТЬ БОЛЬШЕ работы за меньшие деньги.

Затем кнопка CTA говорит: ПОЛУЧИТЕ МОЙ ПЛАН ПОБЕГА.

Почему это работает

• Привлекает внимание. ДЕРЖАТЬ! и отрицательно заряженное ощущение всей рекламы сразу привлекает ваше внимание. Это немного сверх меры, но именно поэтому это работает.
• Целенаправленная копия. Говорит о болевых точках целевой аудитории (агентства с требовательными и скупыми клиентами).
• Фраза с призывом к действию. Размещенная синей кнопкой среди черно-белого изображения, предложение представляет собой идеальное решение для облегчения боли.

Что я могу изменить

8. Canva — расскажи и покажи

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

Почему это работает

• Визуал — это ключ. Он сообщает пользователю, что он может ожидать от версии приложения, а также иллюстрирует функции слева, такие как совместная работа в реальном времени и отсутствие вкладок браузера.
• Размещение. Это немного тяжело для текста, но, поскольку это всплывающее окно появляется в веб-интерфейсе, оно отображается для существующих пользователей, которые будут заинтересованы в приложении и с большей вероятностью прочитают копию.
• Креативный заголовок и дружелюбный, легкий тон («Давайте уйдем отсюда!», «Никаких надоедливых вкладок», «Все эти фоновые шумы в браузере» и т. д.)

Что я могу изменить

• Кроме того, что сзади немного тяжеловат текст, у меня нет никаких претензий! Хорошая работа!

9. Tessemae’s — Используйте отличный слоган

Всплывающее окно Tessemae продается со скидкой 15%. Он гласит:

Упрощение еды, усиление жизни

Получите скидку 15%!!

Присоединяйтесь к списку рассылки Tessemae, чтобы получать новые рецепты, объявления о продуктах, распродажах и получать скидку 15% на первый заказ!»

Почему это работает

• Броский слоган. Хороший слоган не останется незамеченным! Это может быть просто то, что находит отклик у посетителя веб-сайта и заставляет голос вашего бренда щелкнуть их.
• Яркие цвета. Повязки на заднем плане создают яркий визуальный образ, который соответствует бренду, но не отвлекает.
• Ясность. Вы точно узнаете, что получите, если подпишитесь на информационный бюллетень. Люди будут колебаться, чтобы предоставить свою информацию, если они не знают, что в магазине. Хороший копирайтинг — это чистый копирайтинг!

Что я могу изменить

• Несоответствие заглавных букв в полях формы и CTA несколько отвлекает, но это может быть просто потому, что я редактор.

10. PCMag — Держите его в чистоте

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

Почему это работает

• Супер чистый дизайн. Красная кнопка CTA выделяется и помогает выделить галочки и логотип, поскольку они тоже красные.
• Ясность. Пользователь получает четкое представление о том, что он получит, если предоставит свой адрес электронной почты. Бесплатная копия цифрового издания, лучшие новинки, советы экспертов и информационный бюллетень.

Что бы я изменил

• Двоеточие после «разблокировать» поясняет, что галочки — это список функций/преимуществ.
• Люди приговора!!!

11. Гетти Стюарт – оставайтесь дружелюбными и сосредоточенными

Приведенный ниже пример всплывающего окна взят с Gettystewart.com для загружаемого руководства. Мы видим логотип и слоган вверху, затем:

Путеводитель по суперсупам

БЕСПЛАТНЫЙ путеводитель по электронной почте в течение 5 дней по вдохновенным, ароматным супам

Почему это работает

• Закрытый контент. Продвижение закрытого контента через всплывающие окна — отличный способ привлечь потенциальных клиентов.
• Эффективный копирайтинг. Очень конкретное предложение, восторженное «Да — хочу!» кнопку «да» и дружелюбное «Нет, спасибо, моя суповая игра сильна!» нет кнопки.
• Привлекательные визуальные эффекты. Если вы собираетесь продвигать руководство по суперсупам, вам лучше иметь наглядное подтверждение этого.

Что я могу изменить

• Два логотипа и названия руководств немного избыточны. Я бы удалил тот, что справа, и оставил бы больше места для визуального восприятия.

12. Postable — будьте очень прозрачными

Пример всплывающего окна Postable заставит вас посмеяться. Он гласит : «Нравятся скидки? Позвольте нам подкупить вас непристойным кодом скидки». Затем призыв к действию звучит восторженно: « Пришлите мне мой код!»

Почему это работает

• Заголовок. Задать вопрос — отличный способ привлечь внимание аудитории.
• Юмор. Откровенный подзаголовок раскрывает тон голоса бренда, а кому в наши дни не нравится прозрачность?
• Оттенки. Бирюзовая кнопка выделяется и прекрасно сочетается с бирюзовым цветом заголовка.

Что я могу изменить

• Уточните, какая скидка?
• Добавьте что-то более визуальное.
• Текст-заполнитель для поля электронной почты может быть сокращен только для того, чтобы уменьшить объем текста, который читатель должен анализировать.

13. Tiny Organics — предлагайте персональные рекомендации

Всплывающее окно Tiny Organics ниже гласит: « Разблокируйте скидку 35% на первый заказ». Затем вас попросят выбрать возрастную группу для персонализированных рекомендаций по продуктам.

Почему это работает

• Привлекательное предложение. Большинство всплывающих окон предлагают 10%, 15% или самое большее 20%, но 35% — это огромная скидка!
• Персонализация. Как и пример всплывающего окна Almond Surfboards, это всплывающее окно собирает предпочтения, чтобы бизнес мог давать рекомендации.
• Образы. Изображение продуктов наряду с натуральными ингредиентами, из которых они состоят? Отличный способ повысить воспринимаемую ценность.

Что я могу изменить

• Возможно, имеет смысл поместить под кнопкой «Продолжить» примечание «1 из 3» или «Еще один вопрос!» просто чтобы пользователь не беспокоился о том, что у него впереди опрос.

14. WordStream от LocaliQ — напугайте свою аудиторию

Вот пример одного из наших лучших исполнителей. Мы видим миниатюру руководства слева, а справа написано: « Скучный контент не конвертируется». Эти 120 слов и фраз выделяются и вдохновляют на действия. Затем CTA говорит «Получить бесплатное руководство».

Почему это работает

• Зловещий заголовок. Да, здесь мы использовали фактор страха (использовали эмоциональные слова для продвижения списка эмоциональных слов — поймите!). Это всплывающее окно появляется в сообщениях блога в нашей категории копирайтинг, поэтому мы знаем, что копирайтеры являются нашей целевой аудиторией. А какой копирайтер хочет скучного контента или нулевой конверсии?
• Описание балансировки. Затем мы дополняем пугающее утверждение нашим решением: 120 слов и фраз, которые выделяются (не скучно!) и вдохновляют на действия (конверсия!). Есть много хороших формул копирайтинга, которые следуют этой модели.
• Правильное предложение. Бесплатное руководство — это то, что наши читатели блога считают более ценным на данном этапе воронки, в отличие от бесплатной оценки или тематического исследования.

Что я могу изменить

• Собственно, сейчас мы тестируем эту версию с той, которая не содержит описания. Возможно меньше больше. Мы узнаем!

15. Kith — добавить поле предпочтений

Пример всплывающего окна Kith ниже короткий и приятный. Он гласит:

Присоединяйтесь к нашему списку.

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

Затем вы можете отметить мужчин, женщин и/или детей и ввести свой адрес электронной почты.

Почему это работает

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

Что я могу изменить

• Как и в примере с всплывающим окном Tiny Organics, я бы добавил поясняющий текст, чтобы кнопка «Продолжить» не вызывала неуверенности.

16. Allbirds — устройте розыгрыш

В приведенном ниже примере всплывающего окна Allbirds написано Win the Ultimate Trip.

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

Почему это работает

• Без лишнего хайпа. Да, вы можете использовать всплывающие окна, чтобы сообщать об интересных предложениях с помощью восклицательных знаков, но вы также можете заинтересовать посетителей, используя противоположный подход. Фирменный стиль Allbirds не кричащий и не громкий, поэтому смелое «Выиграйте лучшую поездку». с точкой в ​​конце делает свое дело.
• Ведущий ген. Используете всплывающее окно для проведения розыгрыша? Хорошая идея! Кроме того, пункт назначения, являющийся источником их Super Natural шерсти, делает его актуальным.

Что я могу изменить

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

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

Как я сказал в начале, всплывающие окна работают! Легко запутаться во всех доступных вариантах и ​​подходах, которые вы можете использовать, но лучшее, что вы можете сделать, — это просто начать. Запустите одну или две кампании, соберите информацию, и пусть эта информация послужит основой для ваших следующих шагов. И теперь у вас есть множество концепций, которые можно использовать в качестве идей для первоначальной реализации или определения новых тестов для запуска. Удачи!