Всплывающие окна веб-сайта отлично подходят для распространения предложений, привлечения потенциальных клиентов и привлечения посетителей, которые собираются покинуть ваш сайт.
При правильном исполнении всплывающие окна на веб-сайте могут значительно повысить вовлеченность и конверсию. Фактически, исследование Sumo показывает, что средний коэффициент конверсии всплывающих окон веб-сайта составляет 3.09%.
Ключом к созданию всплывающих окон с высокой конверсией является создание привлекательного дизайна и внимательное отношение к пользовательскому опыту.
В этом посте мы обсудим различные типы всплывающих окон на веб-сайтах и поделимся практическими примерами того, как их использовать для привлечения потенциальных клиентов, повышения вовлеченности и повышения конверсии.
Что такое всплывающее окно на сайте?
Всплывающее окно веб-сайта — это графическое наложение или окно, которое «всплывает» на экране, когда посетитель перемещается по вашему сайту. Он мгновенно захватывает внимание пользователя и побуждает его совершить определенное действие.
Всплывающее окно веб-сайта часто содержит текст, изображения и четкий призыв к действию, который требует определенного действия, например ввода адреса электронной почты.
Вы можете использовать всплывающее окно веб-сайта для многих целей, в том числе:
- Продвижение акций и скидок
- Сбор адресов электронной почты
- Предоставление согласия на использование файлов cookie и отказ от ответственности
- Сбор отзывов
- Отправка оповещений и предоставление информации
- Сбор участников предпродажи
Эффективны ли всплывающие окна на сайте?
Всплывающие окна веб-сайта — это эффективный способ привлечения потенциальных клиентов и взаимодействия с посетителями веб-сайта со средним коэффициентом конверсии более 3%.
Эффективное всплывающее окно веб-сайта может принести вам пользу несколькими способами, в том числе:
- Лидогенерация: Формы регистрации, требующие адреса электронной почты в обмен на поощрение, эффективны для привлечения потенциальных клиентов.
- Конверсии продаж: вы можете использовать всплывающее окно веб-сайта для повышения конверсии, направляя посетителей на ваши целевые страницы, предложения или соответствующие продукты.
- Вовлеченность: всплывающие окна можно использовать для предоставления специальных предложений или эксклюзивного контента, который побуждает посетителей взаимодействовать с вашим сайтом.
- Информация для покупателей: вы можете использовать всплывающие окна на веб-сайтах для сбора информации о клиентах, такой как дата рождения, номер телефона или предпочтения. Это может помочь вам предоставить индивидуальные и актуальные рекомендации по продуктам или услугам.
- Сегментация клиентов: всплывающее окно веб-сайта может помочь вам собрать данные о клиентах, такие как демографические данные, интересы и поведение, для правильной сегментации. Это поможет вам создавать более целевые маркетинговые кампании.
Лучшие примеры всплывающих окон для веб-сайтов: по типу
Цифровые маркетологи используют различные типы всплывающих окон на веб-сайтах в зависимости от цели. Например, вы можете использовать всплывающие окна ко Дню матери, чтобы продавать подарки к конкретному событию.
Давайте обсудим типы всплывающих окон на реальных примерах. Мы покажем вам, почему они выделяются и как можно создавать похожие всплывающие окна для достижения конкретных целей.
1. Примеры всплывающих окон загрузки страницы
Это всплывающее окно для веб-сайтов появляется, как только веб-страница полностью загружается, мгновенно привлекая внимание посетителя. Вот несколько примеров того, как другие бренды используют этот тип всплывающих окон для взаимодействия с веб-сайтом.
Такернак
Бренд одежды Tuckernuck сочетает привлекательные образы со стимулами, побуждающими пользователей подписаться на рекламные SMS-сообщения.
Посетители могут получить скидку 10% на свою покупку, просто зарегистрировавшись с помощью своего мобильного номера.
Экстер
Чтобы привлечь внимание, Экстер использует изображения продуктов, крупные шрифты и значительную скидку. Этот призыв к действию представляет собой эффективное приглашение посетителям ввести свои адреса электронной почты и воспользоваться предложением.
АфроШик
Это всплывающее окно веб-сайта предлагает посетителям «прославить культуру африканской диаспоры», прикоснувшись к яркому наследию, которое находит отклик у ее аудитории. Продвижение различных предложений бренда, включая книги, журналы и подкасты, позволяет посетителям взаимодействовать с контентом в предпочитаемом ими формате.
2. Примеры всплывающих окон с намерением выйти
Всплывающее окно веб-сайта с намерением выйти активируется, когда кажется, что посетитель собирается покинуть сайт, например, когда его курсор приближается к значку «закрыть» в браузере.
Вы можете использовать это всплывающее окно в качестве последнего призыва, чтобы побудить пользователей совершить желаемое действие перед тем, как они уйдут.
Давайте рассмотрим несколько примеров всплывающих окон веб-сайтов с намерением выйти.
Coschedule
Это отличный пример всплывающего окна с намерением выйти, в котором используется разговорный тон и текст. Текст эффективно подчеркивает преимущества платформы — больше работы выполняется за меньшее время при той же численности персонала. Затем CTA выделяется ярко-оранжевым цветом, чтобы привлечь внимание посетителя, побуждая его запланировать демо-версию без необходимости регистрации.
Coursera
Сообщение о намерении выхода Coursera появляется в нижней части экрана и вежливо просит посетителей заполнить анкету о том, как они узнали о бренде.
Благодаря дружелюбному тону и ненавязчивой структуре это хороший пример использования всплывающего окна на веб-сайте для сбора отзывов, а не для продвижения продуктов.
SeedProd
Вместо обычного выбора «да» или «нет» это всплывающее окно веб-сайта включает опцию для посетителей, у которых все еще есть вопросы без ответа и которые еще не готовы зарегистрироваться. Всплывающее окно повышает вовлеченность, предоставляя варианты, которые нравятся посетителям на разных этапах воронки продаж.
Независимо от того, решают ли они купить продукт или узнать о нем больше, они вовлечены.
3. Примеры всплывающих окон по времени
Всплывающее окно веб-сайта по времени появляется после того, как посетитель проводит на вашем веб-сайте определенное количество времени. Вы можете установить время всплывающих окон так, чтобы у посетителей было достаточно времени, чтобы прочитать ваш контент, прежде чем они увидят всплывающее окно с соответствующим сообщением.
Вот несколько примеров всплывающих окон на веб-сайтах по времени.
Бандье
Бренд моды и фитнеса Bandier использует всплывающее окно на своем веб-сайте, чтобы предложить посетителям сайта скидку в обмен на их номера телефонов. В форме раскрывается политика конфиденциальности, которая помогает укрепить доверие и сделать всплывающее окно более эффективным.
Thinx
Это всплывающее окно веб-сайта отображается через 10 секунд после полной загрузки веб-страницы. Он подтверждает местоположение посетителя и информирует его об удобных вариантах доставки и ценах, которые предлагает бренд.
Обещание удобных покупок может побудить пользователей совершать покупки на сайте.
4. Примеры всплывающих окон веб-сайтов, запускаемых при прокрутке
Этот тип всплывающего окна веб-сайта отображается, когда посетитель прокручивает до определенного места на вашей веб-странице. Как и всплывающие окна по времени, они дают посетителям достаточно времени для просмотра вашего сайта, прежде чем они увидят запрос.
INH волосы
Это всплывающее окно представляет собой тест для посетителей, чтобы найти свой идеальный оттенок цвета волос, и оно появляется, когда они прокручивают страницу вниз. Любой, кто примет участие в викторине, получит персональные рекомендации по продуктам, что сделает процесс покупок более удобным.
Подождав, пока посетитель дойдет до конца страницы, INH Hair знает, что он, скорее всего, будет занят. А упоминание о том, что тест займет всего 90 секунд, дает людям понять, что они не потратят на него много времени.
Известная обувь
Всплывающее окно с прокруткой на сайте Famous Footwear активируется, когда посетитель прокручивает три четверти (или 75%) главной страницы. Это дает пользователям достаточно времени для просмотра доступных продуктов, прежде чем предлагать скидку, чтобы побудить их к покупке.
5. Примеры всплывающих окон, активируемых по клику
Это всплывающее окно веб-сайта активируется, когда пользователь нажимает на элемент на вашей веб-странице, например определенный текст, изображение или кнопку. Всплывающее окно для веб-сайтов, активируемое щелчком мыши, предоставляет посетителям сайта дополнительную информацию о выбранном элементе.
Студия ЯРИ
Когда посетители нажимают на продукт на веб-странице Studio JARI, появляется всплывающее окно с подробными характеристиками продукта.
Приятным моментом является то, что посетители могут добавлять товар в корзину прямо из всплывающего окна, что делает процесс покупок более удобным.
Madewell
Это всплывающее окно активируется, когда пользователи нажимают «скидка» на главной странице. У него двойная цель: побудить посетителей подписаться на рассылку по электронной почте и порекомендовать бренд другу, чтобы получить скидку.
Nordstrom
Программа «Общайтесь с нами!» Кнопка внизу веб-страницы Nordstrom запускает всплывающее окно, предоставляющее клиентам различные варианты управления своими заказами. Это улучшает качество обслуживания клиентов, предоставляя простой способ вернуть или отменить заказы, а также проверить статус заказа.
6. Примеры приветственного коврика/полноэкранного всплывающего окна
В отличие от других всплывающих окон на веб-сайтах, которые занимают только часть экрана, всплывающее окно приветственного коврика занимает всю страницу. При правильном исполнении он направляет внимание посетителя на CTA, не позволяя ему отвлекаться на другие элементы веб-сайта.
Brooklinen
Всплывающее окно веб-сайта Brooklinen имеет минималистичный дизайн, ориентированный на два ключевых элемента: скидку и кнопку призыва к действию. Это просто, но эффективно. Любой, кто заинтересован в покупке, скорее всего, воспользуется скидкой, а те, кто не хочет, могут просто отказаться.
Сеулбокс
Это еще один пример того, как использовать простой дизайн для полноэкранного всплывающего окна. Он использует простой фон с изображениями по бокам, чтобы привлечь внимание посетителя.
Этот приветственный коврик быстро и четко сообщает о выгоде: посетитель имеет скидку 10% и может получить ее, просто выбрав, какая область его больше всего интересует.
7. Примеры всплывающих окон веб-сайта Hello Bar
В отличие от других типов всплывающих окон, всплывающее окно веб-сайта с панелью приветствия появляется только вверху или внизу страницы. Это не мешает вашим посетителям прокручивать ваш сайт, независимо от того, взаимодействуют они со всплывающим окном или нет.
Углубление
В этом всплывающем окне hello bar от бренда напитков Recess используется тонкий, но эффективный подход. Его всплывающее окно появляется внизу страницы, гарантируя, что навигация посетителя не будет прерываться, и сообщение останется видимым для посетителей до тех пор, пока они просматривают веб-сайт.
Дизайн всплывающего окна включает яркие цвета, которые контрастируют с остальной частью веб-сайта. Он мгновенно привлекает внимание посетителя и повышает вовлеченность с помощью простого стимула: адреса электронной почты в обмен на скидку.
Кофе Мэриголд
Всплывающее окно веб-сайта Marigold Coffee минимальное и ненавязчивое, с дружелюбным и разговорным тоном.
8. Примеры всплывающих окон с информационными оповещениями
Они используются для предоставления посетителям важной информации о вашем бренде, продуктах или услугах, включая изменения политики, изменения цен, согласие на использование файлов cookie, скидки и многое другое.
Шарлотта Био
Бренд косметики Charlotte Bio использует всплывающее информационное оповещение на веб-сайте для отображения информации о согласии на использование файлов cookie. Он использует веселый и запоминающийся, но в то же время ясный и краткий текст, чтобы донести свое послание.
Попапсмарт
Это всплывающее окно с информационным оповещением сообщает посетителям, что Popupsmart теперь предлагает автоматизацию электронной почты Shopify.
Всплывающее окно расположено в левом нижнем углу экрана и не мешает посетителю осуществлять навигацию. Он также использует цвета, аналогичные цветам остальной части страницы, создавая единообразный и захватывающий опыт.
Дольче и Габбана
Помимо четкого объяснения того, для чего используются файлы cookie, дизайн этого всплывающего окна подсознательно направляет внимание посетителя на призыв к действию «Разрешить все», выделяя его черным цветом, в то время как остальная часть всплывающего окна остается белой.
9. Примеры геймифицированных всплывающих окон
Всплывающее окно геймифицированного веб-сайта использует забавные, интерактивные и привлекательные элементы, чтобы привлечь внимание посетителя.
Вот несколько примеров.
Луна Нелла
Модный бренд Luna Nella использует колесо фортуны, чтобы сделать свое всплывающее окно веселым и интерактивным. Гости нажимают кнопку, чтобы вращать, и имеют шанс 3 из 5 выиграть что-нибудь (скидку или бесплатную доставку). Призыв к действию ясен и прост — укажите свой адрес электронной почты, чтобы получить скидку.
Аура Бора
Бренд газированной воды Aura Bora выводит геймификацию на новый уровень, встраивая во всплывающее окно настоящую игру. Даже если кто-то не уверен, хочет ли он покупать, у него может возникнуть соблазн сыграть в игру и получить максимальную скидку. Как только они его получат, они могут решить использовать его.
В этом прелесть этого геймифицированного всплывающего окна: оно может превратить случайных посетителей сайта в клиентов.
Toms
Toms, обувной бренд, также использует колесо фортуны для привлечения потенциальных клиентов. Всплывающее окно веб-сайта использует короткий, запоминающийся текст, чтобы побудить посетителей покрутить колесо и выиграть скидку, тем самым увеличивая вовлеченность.
10. Примеры всплывающих окон с перенаправлением страницы
Эти всплывающие окна веб-сайта перенаправляют посетителей на определенные страницы, которые предлагают более актуальную или ценную информацию. Это отличная стратегия, если вы пытаетесь привлечь больше трафика и вовлеченности на определенные страницы вашего веб-сайта.
Prestashop
Это всплывающее окно Prestashop информирует посетителей о том, что они могут просматривать веб-сайт, привязанный к определенному местоположению. Это может повысить вовлеченность, поскольку оно более актуально для посетителя и предлагает более личный опыт.
Другое завтра
Бренд экологически чистой одежды Another Tomorrow использует минималистское всплывающее окно с перенаправлением страницы, которое позволяет пользователям просматривать продукты или возвращаться на домашнюю страницу.
11. Примеры всплывающих окон для обхода блокировки рекламы
У некоторых посетителей будет блокировщик рекламы, который предотвращает появление рекламы на их экране, тем самым сокращая ваш доход. Этот тип всплывающего окна предлагает посетителям отключить блокировщики рекламы, чтобы получить полный доступ к содержимому вашего сайта.
США сегодня
Это всплывающее окно от USA Today не только предлагает пользователям отключить блокировщики рекламы, но и объясняет, почему им следует это сделать. Он просит посетителей поддержать сайт, заплатив за контент или отключив блокировщик рекламы.
Business Insider
Всплывающее окно обходного пути блокировки рекламы в Business Insider использует большой жирный текст, чтобы привлечь внимание читателя к использованию блокировщика рекламы. Затем он предлагает те же возможности, что и USA Today: стать платной подпиской или удалить блокировщик рекламы.
12. Примеры всплывающих окон для входа в систему
Этот тип всплывающего окна веб-сайта позволяет посетителю создать или войти в свою учетную запись, не покидая страницу. Это может быть особенно полезно для брендов электронной коммерции, поскольку позволяет им предоставлять клиентам более персонализированный опыт покупок.
Академия LearnDash
Вместо перенаправления пользователей на другую страницу входа в систему LearnDash Academy использует всплывающее окно входа и регистрации «два в одном». Это создает удобство для посетителей, упрощая вход в систему или регистрацию по мере необходимости.
Moooi
Это всплывающее окно входа в систему простое и функциональное. Он предоставляет пользователям возможность войти в свою существующую учетную запись Moooi или легко создать новую учетную запись, если у них ее нет.
13. Примеры всплывающих окон на веб-сайте опроса
Этот тип всплывающего окна позволяет вам собирать отзывы и отзывы клиентов прямо с вашего сайта. Вы можете использовать их по-разному, включая сбор ценной информации для разработки целевых маркетинговых кампаний.
Круги.Жизнь
Circles.Life использует уникальный подход, сочетая всплывающее окно о намерении выйти с опросом. Он использует всплывающее окно, чтобы узнать, почему они покидают сайт.
Кеннеди Блю
Kennedy Blue использует многошаговую всплывающую форму для сбора информации о впечатлениях посетителя на сайте. Это всплывающее окно с намерением выхода предоставляет скидку, чтобы побудить их принять участие в опросе.
Вы можете воспроизвести эту стратегию, используя любой тип стимулов, например закрытый контент и эксклюзивные предложения, в зависимости от типа вашего бизнеса.
14. Примеры всплывающих окон с лид-магнитом
Эти всплывающие окна предоставляют ценные ресурсы или стимулы в обмен на контактную информацию, такую как адреса электронной почты или номера телефонов. Например, вы можете предложить бесплатную электронную книгу, эксклюзивную статью или код скидки.
Tommy Hilfiger
Модный бренд Tommy Hilfiger использует дизайн лайтбокса, выделяя всплывающий контент, затемняя остальную часть экрана. Всплывающее окно предлагает явный стимул — скидку 20 % в обмен на членство в бренде и предоставление информации по электронной почте.
Во всплывающем окне также упоминаются условия членства для обеспечения прозрачности и укрепления доверия.
Протеиновые шарики Скотта
На этом всплывающем окне веб-сайта размещен логотип на видном месте, усиливающий брендинг компании, а также примечательная скидка 20 % за регистрацию. Это, в сочетании с ярко-красным призывом к действию, привлекает внимание посетителей и побуждает их зарегистрироваться.
Конвертировать поток
ConvertFlow использует многоэтапную всплывающую форму для привлечения потенциальных клиентов. На первом этапе предлагается бесплатный календарь с рекомендуемыми шаблонами.
Как только посетители нажимают кнопку призыва к действию в первом всплывающем окне, появляется второй шаг — сбор адресов электронной почты и имен. Затем посетитель может получить доступ к календарю.
15. Примеры всплывающих окон регистрации
Подобно всплывающим окнам входа в систему, эти всплывающие окна позволяют пользователю зарегистрироваться или подписаться на определенные мероприятия, такие как вебинары или подкасты, не покидая ваш сайт.
Вы можете связать его с целевой страницей, где вы сможете собирать адреса электронной почты, чтобы предоставить дополнительную информацию о событии, на которое подписываются посетители.
ншифт
В этом всплывающем окне веб-сайта показано, как компания nShift, занимающаяся управлением доставкой, предлагает пользователям легко подписаться на ее вебинар. На одной стороне находится регистрационная форма, а на другой перечислены ключевые моменты вебинара. Эта стратегия эффективно подчеркивает преимущества мероприятия, тем самым увеличивая число регистраций.
Search Engine Journal
Это всплывающее окно на веб-сайте позволяет посетителям заранее зарезервировать место на вебинар, а заголовок четко сообщает о преимуществах участия.
16. Примеры всплывающих окон при оформлении предварительного заказа
Эти всплывающие окна используются для сбора списка потенциальных клиентов перед запуском продукта или услуги. Он может направить пользователей на целевую страницу или предложить им заполнить форму предварительного заказа.
Гари Вайнерчук
Серийный предприниматель Гэри Вайнерчук ясно излагает свое предложение во всплывающем окне на этом веб-сайте: получите скидку 20%, сделав предзаказ на его книгу и указав адрес электронной почты.
Культура Эспрессо
Всплывающее окно Culture Espresso позволяет посетителям предварительно заказать файлы cookie, которые они затем заберут лично, а также дает возможность сделать заказ через веб-сайт или мобильное приложение (что также делает это эффективным способом увеличения количества загрузок приложений).
17. Примеры всплывающих окон с кодом купона
Всплывающие окна с кодом купона работают как лид-магниты. Они предлагают коды купонов на скидки в обмен на адрес электронной почты или контактную информацию посетителя.
Принимайте еду
Partake Foods использует заманчивое изображение продукта, чтобы побудить посетителей зарегистрироваться и получить купон. В нем также упоминается, сколько розничных продавцов продают этот продукт, подчеркивая, насколько легко совершить покупку.
Briogeo Волосы
Briogeo Hair использует всплывающее окно на веб-сайте, чтобы предложить скидку 10% в обмен на адрес электронной почты.
Всплывающее окно имеет понятный и простой дизайн: с одной стороны отображается предложение, а с другой — изображение продукта.
18. Примеры всплывающих окон веб-сайта с возможностью подписки по электронной почте
Эти типы всплывающих окон веб-сайтов предназначены для сбора адресов электронной почты в маркетинговых целях. С помощью этого всплывающего окна вы можете предлагать скидки и другие виды стимулов для привлечения потенциальных клиентов.
Букки Болдуин
Это всплывающее окно с просьбой подписаться на рассылку новостей компании предлагает пользователям подписаться на рассылку новостей компании и подчеркивает ключевые преимущества этого. Единое поле формы и понятный призыв к действию упрощают процесс, побуждая больше посетителей зарегистрироваться.
Толкайте жизнь
Бренд образа жизни в инвалидных колясках Push Living использует простое текстовое всплывающее окно на веб-сайте для сбора адресов электронной почты для списка рассылки. Даже без изображений дизайн привлекателен, а преимущества кратко описаны.
Восемь унций кофе
Бренд розничной торговли кофе Eight Ounce Coffee использует это всплывающее окно на веб-сайте, чтобы предложить эксклюзивный доступ к торговым предложениям и мероприятиям посетителям, которые подписываются на его информационный бюллетень. Перечисление преимуществ помогает убедить посетителей сайта в том, что регистрация того стоит.
19. Примеры всплывающих окон с указанием номера телефона
Этот тип всплывающего окна веб-сайта функционирует как всплывающее окно электронной почты. Однако вместо сбора адресов электронной почты он запрашивает номера телефонов.
Антропология
Это всплывающее окно на веб-сайте повышает доверие и прозрачность, подробно описывая, как будет использоваться ваш номер телефона, как отказаться от подписки и как связаться со службой поддержки, если вы зарегистрируетесь. Это, наряду со скидкой 10%, побуждает посетителей зарегистрироваться.
Попробуйте, ребята
В этом всплывающем окне веб-сайта с подпиской используется только текст, сопутствующие визуальные эффекты отсутствуют. Однако четкие и крупные шрифты подчеркивают стимул к регистрации, а контраст между кнопкой CTA и белым фоном привлекает внимание посетителя.
Заворачивать
Цифровые маркетологи используют всплывающие окна на веб-сайтах для привлечения потенциальных клиентов, продвижения своих продаж и предложений, а также увеличения конверсий продаж.
Вы должны выбрать подходящий тип всплывающего окна веб-сайта для достижения своих маркетинговых целей. Однако не существует установленных правил, и мы рекомендуем поэкспериментировать с различными всплывающими окнами веб-сайта, чтобы определить наиболее эффективные для вашего бизнеса.
Найдите баланс между достижением маркетинговых целей и обеспечением положительного пользовательского опыта. Делайте их короткими и лаконичными, чтобы еще больше привлечь посетителей и повысить конверсию.
Источник из Omnisend
Отказ от ответственности: информация, изложенная выше, предоставлена omnisend.com независимо от Chovm.com. Chovm.com не делает никаких заявлений и не дает никаких гарантий относительно качества и надежности продавца и продукции.
