Вот как ваши любимые компании используют всплывающие окна веб-сайтов для роста (и вы тоже можете!)
Опубликовано: 2020-04-02Есть два типа людей.
Тем, кто любит всплывающие окна на сайтах, и тем, кто их ненавидит.
Первая группа знает, насколько до смешного могут быть эффективными всплывающие окна веб-сайтов. Вторая группа находит их до смешного раздражающими.
Но в чем разница между хорошим всплывающим окном веб-сайта и плохим?
Просматривая сотни из них, мы пришли к следующему выводу. Все сводится к трем вещам:
Как выглядят эти всплывающие окна
Какую ценность они приносят
Когда именно они появляются
Я имею в виду, что да, некоторые всплывающие окна раздражают, неприятны, уродливы, мешают работе.
Но это потому, что они были неправильно настроены.
Например, взгляните на это потрясающее всплывающее окно на веб-сайте Nike:
Кто-нибудь когда-нибудь назовет это неприятным или раздражающим?
Я так и думал.
Всплывающее окно Nike выглядит элегантно и выгодно (скидки автоматически применяются при оформлении заказа, ура!). И это, конечно же, не прерывает впечатления. Если уж на то пошло - это его неотъемлемая часть.
Тысячи крупных и известных компаний успешно используют всплывающие окна веб-сайтов для сбора электронных писем, объявления продаж и отображения призывов к действию. Возьмите, к примеру, New York Times, Adidas, The Guardian, Century 21 или Slack - и этот список можно продолжать до бесконечности!
Итак, почему бы не поучиться у лучших и не применить их подход для развития вашего бизнеса?
Вы, вероятно, думаете, что вам нужен разработчик или бюджеты этих крупных компаний для добавления профессионально выглядящего всплывающего окна на ваш сайт. Что ж, это неправда.
В этом сообщении блога мы покажем вам 15 примеров всплывающих окон веб-сайтов, используемых некоторыми из самых известных компаний в различных нишах. Мы также разберем, почему каждое всплывающее окно так эффективно.
Лучшая часть? Мы покажем вам, как именно воссоздать их на вашем веб-сайте за считанные минуты с помощью Getsitecontrol.
Создайте всплывающее окно прямо сейчас
Ищете простой способ создавать потрясающие всплывающие окна для веб-сайтов? Тогда вам понравится Getsitecontrol. Бесплатная пробная версия, без кодирования, без кредитной карты.
Чтобы облегчить вам навигацию, мы разделили список на 3 категории. Вы скоро увидите всплывающие окна веб-сайта, которые помогут:
Получите подписчиков по электронной почте
Показать призывы к действию
Сообщать о любых обновлениях
Не стесняйтесь переходить к категории, которая вас интересует больше всего.
Всплывающие окна веб-сайтов, которые помогают брендам создавать списки адресов электронной почты
Сейчас все без ума от расширения своих списков рассылки. И тебе тоже должно быть!
Если вы его пропустили, рентабельность инвестиций в электронную почту составляет 44 доллара на каждый потраченный доллар.
Наличие людей в вашем списке адресов электронной почты означает, что вы обладаете этим эксклюзивным разрешением встречаться с ними прямо в их почтовых ящиках, развивать отношения и превращать их в постоянных клиентов.
Подождите, но как лучше всего расширить список рассылки? Бьюсь об заклад, ты уже знаешь ответ.
Это всплывающие окна сайта.
Давайте посмотрим, как бренды, о которых вы наверняка слышали (и, возможно, даже купили), используют всплывающие окна для сбора адресов электронной почты.
1. Магазин New York Times - 10% скидка на первый заказ.
New York Times была одной из первых, кто превратился в онлайн-издание с платной подпиской.
Сегодня это самый посещаемый газетный сайт. И они используют всплывающие окна веб-сайтов для различных целей.
Например, взгляните на эту минималистичную форму подписки по электронной почте, которая появляется, как только вы заходите в интернет-магазин The New York Times.
Вот что делает этот веб-сайт отличным всплывающим окном:
Сплоченный дизайн
Всплывающее окно имеет ту же цветовую тему и тот же шрифт, что и остальная часть магазина NYT. Он выглядит как неотъемлемая, заслуживающая доверия часть веб-сайта.Свинцовый магнит
Вам не просто предлагают подписаться на новые предложения, вы также получаете скидку 10% на ваш первый заказ, если вы присоединяетесь к списку.Мгновенное появление
Всегда неясно, должны ли всплывающие окна появляться на сайте сразу или после того, как посетитель проведет некоторое время на странице. В этом случае мгновенное отображение формы, безусловно, лучше, чем после того, как потенциальный покупатель совершит покупку, не так ли?
Хотите добавить на свой сайт похожее всплывающее окно подписки?
Мы последовали творческому духу The New York Times, чтобы создать аналогичную форму подписки. Нажмите на всплывающее окно веб-сайта ниже, чтобы увидеть его в действии. Затем следуйте простым инструкциям, которые появятся в правой части страницы.
Шаблон предварительного просмотра в реальном времени будет добавлен прямо на вашу панель управления Getsitecontrol. Оттуда вы сможете настроить такие детали, как процент скидки, заголовок и цветовую тему, чтобы они идеально подходили для вашего веб-сайта.
Затем вы сможете использовать Таргетинг настройки, чтобы указать страницу, на которой вы хотите, чтобы всплывающее окно отображалось.
2. Century 21 - получите скидку 25 долларов или заплатите полную цену.
Century 21, гигант недорогой розничной торговли модной одеждой, вышел в Интернет несколько лет назад и также вступил в игру по созданию списков адресов электронной почты. Обратите внимание на всплывающее окно, отображаемое через несколько секунд после того, как вы перейдете на их веб-сайт.
Вот что хорошего в этом всплывающем окне:
Электронная почта в формате микрокопии
Компания Century 21 решила указать, как должен выглядеть адрес электронной почты, чтобы клиенты поняли его правильно. Это отличное решение, зная, что их аудитория очень широка и включает людей, не обязательно технически подкованных.Негативная кнопка отказа
Конечно, вам не нужно регистрироваться, если вы этого не хотите. Но это означает, что вы готовы заплатить полную цену, верно? Кнопка отказа - это крошечная деталь, которая заставляет дважды подумать, прежде чем отклонить предложение.Умный выбор цветов
Обратите внимание, что цвета этого всплывающего окна не только соответствуют теме веб-сайта, но кнопка «Продолжить» также выделена красным цветом. Между тем кнопка отказа просто сливается с фоном.
Хотите, чтобы на вашем сайте появилось всплывающее окно с кнопкой отказа?
Если вам нравится всплывающее окно на этом веб-сайте, воссоздать его так же просто, как 1-2-3. Просто нажмите на шаблон ниже и следуйте инструкциям.
Как только вы попадете на панель управления, пройдите через Содержание настройки для настройки копии и цветовой темы, если вам нужно. Следуя примеру Century 21, вы также можете добавить свой логотип вверху.
3. Marie Claire - эффект FOMO в действии.
Если вы думаете, что отрицательные кнопки отказа могут работать только для интернет-магазинов, подумайте еще раз.
Предлагая высококачественный контент по электронной почте, вы также можете напомнить людям о последствиях отказа от подписки. Просто посмотрите, как журнал Marie Claire использует эффект FOMO на своей кнопке отказа.
Вот что нам нравится в этом всплывающем окне:
Отрицательная кнопка отказа
Помимо эффекта FOMO, обратите внимание, как Мария Клэр превратила кнопку отказа в заявление о любви к себе.Копия электронного письма с призывом к действию
Существует так много стимулирующих призывов к действию, которые вы можете разместить на кнопке регистрации, а не просто «Подписаться». «Покажи мне, что внутри!» один из них.Выбор образа
И в данном случае это не просто изображение. Это фотография Сирсы Ронан, талантливой актрисы, которую наверняка узнает большинство читателей.
Почему здесь так важен имидж?
Наличие визуального представления, которое соответствует ожиданиям ваших подписчиков, имеет решающее значение для увеличения количества подписок по электронной почте. Потому что они не просто следят за некоторыми модными прическами. Они подписываются, чтобы получить рецепт, как выглядеть голливудской звездой на красной дорожке.
Думаете, вам может понадобиться всплывающее окно, подобное этому?
В конструкторе всплывающих окон Getsitecontrol есть шаблон, который поможет вам легко воссоздать приведенный выше пример. Посмотрите это ниже.
После того, как вы добавите его на свою панель инструментов, вы сможете легко заменить изображение своим визуалом или выбрать альтернативное изображение из галереи.
4. Adidas - получите 15% скидку в обмен на подписку по электронной почте.
Adidas предлагает скидку 15% для новых подписчиков со всплывающим окном, которое появляется после того, как вы проведете некоторое время на их веб-сайте.
Вот что особенно хорошо во всплывающем окне веб-сайта Adidas:
Микрокопия внизу Чтобы уменьшить страх получить спам с нерелевантными электронными письмами, Adidas точно указывал, на что вы подписываетесь.
Флажок подтверждения возраста В соответствии с Законом о защите конфиденциальности детей в Интернете (COPPA) каждый подписчик должен подтвердить, что он старше 13 лет. Этот флажок также можно использовать для получения явного согласия на получение маркетинговых писем.
Сегментация по полу. На основании вашего ответа Adidas позже применит правила сегментации, чтобы отправлять вам наиболее релевантный контент. Тем не менее, также разумно установить это поле как необязательное, учитывая, сколько гендерно-нейтральных товаров производит Adidas.
Подтверждение подписки После того, как вы зарегистрируетесь, вы увидите так называемое «сообщение об успешной отправке», сообщающее вам, чего ожидать.
Альтернативным вариантом здесь было бы отображение кода скидки, который люди могли бы скопировать и вставить при оформлении заказа. Таким образом, они смогут продолжить покупки, не выходя из магазина и открывая электронную почту.
5. Ahrefs - не пропустите следующую статью
Перейдем в мир IT.
Ahrefs, известный разработчик программного обеспечения для SEO, использует эту симпатичную вставку, чтобы предложить подписаться на их информационный бюллетень, как только вы дойдете до конца сообщения в блоге.
Вот что в этом хорошего:
Другой формат
В отличие от модальных всплывающих окон, слайды менее навязчивы, но достаточно броские, чтобы их заметили. Они могут быть идеальным выбором для контент-проектов, в которых вы хотите, чтобы процесс чтения был как можно более плавным.Триггер поведения на странице
Форма появляется только тогда, когда вы дойдете до конца сообщения в блоге. Это идеальный момент, чтобы предложить подписаться, потому что уровень вовлеченности высок.Принцип FOMO
Если вы добрались до конца одного из лонгридов Ахрефа, велики шансы, что он вам понравился. И вы не хотите пропустить еще одну замечательную вещь, подобную этой.
Хотите добавить аналогичный слайд на свой сайт?
Создать эту форму подписки очень просто. Мы создали аналогичный выдвижной модуль с правой стороны, чтобы вы могли быстро установить его на свой веб-сайт.
Щелкните виджет, чтобы увидеть его в действии, и следуйте инструкциям.
Когда будете готовы, используйте Таргетинг настройки, чтобы выбрать определенные страницы на вашем веб-сайте, на которых вы хотите, чтобы слайд отображался, а также условия, когда он должен появиться.
6. Product Hunt - подпишитесь на ежедневную рассылку новостей.
Product Hunt - одно из крупнейших онлайн-сообществ, где каждый день выпускаются удивительные технологические продукты. Те, у кого нет времени заходить на сайт ежедневно, могут получать сводки о наиболее важных обновлениях по электронной почте.

Чтобы увеличить количество подписок, Product Hunt имеет плавающую панель регистрации по электронной почте внизу страницы.
Вот что замечательно в этой форме подписки:
Минимальное отвлечение
Плавающие полосы - наименее навязчивые из всех всплывающих окон веб-сайтов. Они остаются вверху или внизу веб-страницы, пока вы прокручиваете контент, и терпеливо ждут, пока вы не будете готовы подписаться.Частота рассылки новостей
В копии вы точно узнаете, как часто вы будете получать электронные письма от Product Hunt.Аутентичный дизайн
Эмодзи и цвет кнопки являются фирменными элементами Product Hunt. Использовать их в форме - отличное решение.
Хотите собственную плавающую панель регистрации по электронной почте?
Вы можете добавить аналогичный виджет на свой сайт и отображать его по всему сайту или на определенных страницах. Для начала воспользуйтесь готовым шаблоном ниже.
Копия и дизайн шаблона довольно универсальны, поэтому не стесняйтесь использовать его на своем веб-сайте, как есть.
Всплывающие окна веб-сайта для отображения вашего призыва к действию
Пора переходить к следующей категории!
Вторая важная причина, по которой компании используют всплывающие окна веб-сайтов, - это побудить посетителей получить скидку, проверить новую запись в блоге, принять участие в розыгрыше подарков - другими словами, принять меры .
Посмотрим, как это делают в реальной жизни.
7. Century 21 - получите скидку перед поездкой
Если вы начнете просматривать интернет-магазин Century 21, вам нужно обладать огромной силой воли и сопротивляться желанию получать специальные предложения, которые ждут вас на каждом углу.
Во-первых, они просят вас подписаться в обмен на скидочный купон на 25 долларов. А затем, если вы пытаетесь уйти, не совершив покупки, вы увидите всплывающее окно на сайте:
Если вы нажмете «Да, пожалуйста!» , код купона отображается прямо во всплывающем окне. Вы можете скопировать код и вставить его при оформлении заказа. Простой. Эффективно.
Вот почему подход с намерением выхода работает так хорошо:
Внимание гарантировано
Невозможно пропустить предложение скидки, которое появляется у вас на глазах, когда вы собираетесь выйти.Крайнее средство
Всплывающие окна с намерением к выходу практически дают вам уникальный шанс привлечь людей, которые собирались уйти. Конечно, не каждый уходящий посетитель ответит. Но некоторые из них будут - и каждое усилие имеет значение, верно?
Хотите разместить на своем сайте всплывающее окно с целью выхода?
Ознакомьтесь с шаблоном ниже. Он уже настроен так, чтобы отображаться сразу же, когда ваши посетители начинают переходить, чтобы покинуть страницу.
Разместите его на своем веб-сайте за несколько кликов, затем перейдите в Таргетинг настройки, чтобы указать страницу, на которой он должен всплывать. Например, вы можете разместить его на страницах продуктов, страницах категорий или даже при оформлении заказа, чтобы предотвратить уход из корзины покупок.
8. Skillshare - промо реферальной программы
Skillshare, онлайн-платформа для обучения, реализует реферальную программу, позволяющую вам зарабатывать месяцы бесплатных занятий, приглашая друзей. Обратите внимание на плавающую полосу, которую они разместили вверху каждой страницы.
Что Skillshare сделала прямо здесь:
Контрастный цвет
Skillshare выбрала белый цвет, потому что он привлекает внимание благодаря темно-синей цветовой теме веб-сайта.Достаточно подробностей
Несмотря на нехватку места, в копии содержится достаточно информации, чтобы вы могли решить, заинтересованы вы или нет.Кнопка "Очистить CTA"
Кнопка «Пригласить друзей» задает четкие ожидания. Вы попадете на специальную страницу, где сможете узнать подробности и получить реферальную ссылку.
9. The New York Times - прочтите важные обновления прямо сейчас
Если ваш проект ориентирован на контент, вы можете использовать всплывающие окна для продвижения последней статьи в блоге, важных обновлений по выбранным темам или просто релевантных материалов.
Например, именно так The New York Times привлекала внимание своих читателей к текущим обновлениям о вспышке COVID-19.
Полосы с призывом к действию внизу веб-страницы используются различными СМИ для различных целей. Просто посмотрите наш следующий пример с похожим всплывающим окном.
10. The Guardian - поддержите Guardian сегодня.
В отличие от The New York Times, The Guardian предпочла держать все свои материалы в открытом доступе, в то время как читатели могут участвовать в финансировании газеты в форме пожертвований. Посмотрите, как они передают это сообщение, используя всплывающее окно внизу страницы.
Хотите использовать подобное всплывающее окно на своем веб-сайте?
Если вы хотите сделать акцент на сообщении, ясно, что эти липкие полоски идеально подходят для привлечения внимания. Ознакомьтесь с шаблоном ниже, если вы хотите добавить его на свой веб-сайт.
После того, как вы добавите его на панель управления Getsitecontrol, перейдите в Содержание вкладку и откройте кнопку настройки, чтобы разместить ссылку на нужную страницу.
Всплывающие окна для размещения объявлений по всему сайту
Последняя категория всплывающих окон веб-сайтов нацелена на информирование посетителей, а не на побуждение их к действию.
Если вы хотите, чтобы ваша аудитория была в курсе новостей и текущих условий, всплывающие окна на веб-сайте просто идеальны.
Вы можете использовать их, чтобы распространять информацию об изменениях в бизнес-операциях, текущих предложениях или новых политиках, таких как, например, политика согласия на использование файлов cookie.
Давайте посмотрим, как Reebok, Tiffany, Nespresso, Intercom и Slack справляются с таким типом связи.
11. Reebok - объявление о распродаже на сайте
Чтобы каждый, кто заходил на их сайт, был проинформирован о распродаже по всему сайту, Reebok разместил плавающую панель объявлений в верхней части веб-страницы.
Это объявление не требует никаких действий со стороны посетителя сайта. Вы можете считать это приятным сюрпризом и стимулом для продолжения просмотра магазина.
12. Tiffany & Co. - напоминание о бесплатном обслуживании.
Вот как Tiffany & Co. информирует посетителей интернет-магазина о том, что доставка и возврат всех заказов бесплатны. Они используют фирменную синюю плавающую полосу Тиффани в верхней части веб-страницы.
Если у вас есть цветовые коды для темы вашего сайта, вы можете использовать их во всплывающем окне. Внешний вид / CSS настройки для создания идеально подходящей панели объявлений, как у Tiffany.
13. Nespresso - уведомление о возможной задержке доставки.
Последний пример плавающей панели принадлежит веб-сайту Nespresso. Они предупреждают онлайн-клиентов, уведомляя их о задержке доставки.
Опять же, вы могли заметить, что цвет плавающей полосы был выбран не случайно - он идеально сочетается с кнопкой «Поиск» ниже.
Хотите воссоздать всплывающие окна этих веб-сайтов?
Плавающие полоски отлично подходят для того, чтобы донести до аудитории краткое, но важное сообщение. Чтобы добавить его на свой веб-сайт, просто нажмите на шаблон ниже, а затем отредактируйте копию.
Не стесняйтесь менять цвет на тот, который лучше смотрится на вашем сайте. Цветовая тема доступна в Появление вкладка панели инструментов Getsitecontrol.
14. Slack - баннер согласия на использование файлов cookie.
Последние два примера в нашем списке - это баннеры cookie.
Как вы, вероятно, знаете, начиная с 2018 года каждый веб-сайт, принимающий посетителей из ЕС, должен получить их информированное согласие на использование файлов cookie, которые отслеживают данные пользователей.
Так выглядит сообщение cookie на веб-сайте Slack.
Slack решил использовать вставку с правой стороны, которая ссылается на политику согласия на использование файлов cookie и закрывается при нажатии.
Если вы хотите разместить аналогичный, воспользуйтесь шаблоном ниже.
Вы можете добавить это всплывающее окно на свой веб-сайт как есть, или вы можете вставить ссылку на свою страницу политики cookie в копию виджета, как это сделал Slack.
15. Домофон - липкая полоса согласия на использование файлов cookie.
Intercom, популярный разработчик платформы обмена сообщениями, выбрал менее навязчивую липкую панель в верхней части веб-страницы, чтобы уведомлять своих посетителей о политике в отношении файлов cookie.
Если вы предпочитаете этот вариант, нажмите здесь, чтобы проверить шаблон Getsitecontrol для панели согласия на использование файлов cookie.
Готовы использовать всплывающие окна веб-сайта для развития вашего бизнеса?
Если вам всегда было любопытно, могут ли всплывающие окна на веб-сайтах способствовать развитию вашего бизнеса - сегодня самое время узнать.
Не знаете с чего начать?
Вот 3 наших самых популярных всплывающих окна:
форма подписки по электронной почте,
баннер согласия на использование файлов cookie,
специальное предложение по продвижению.
Выберите наиболее подходящий для вашего бизнеса (или добавьте их все сразу на свой веб-сайт) с помощью Getsitecontrol и испытайте его бесплатно.
Создайте всплывающее окно прямо сейчас
Ищете простой способ создавать всплывающие окна для веб-сайтов? Тогда вам понравится Getsitecontrol. Бесплатная пробная версия, без кодирования, без кредитной карты.
Вы читаете блог Getsitecontrol, в котором эксперты по маркетингу делятся проверенными тактиками развития вашего онлайн-бизнеса. Эта статья является частью раздела «Взаимодействие с клиентами».
Подпишитесь на нашу рассылку → Основная иллюстрация от Icons8