Are you just getting started with optimizing your push notification campaigns? The first place to start is your push notification popup.
A push notification popup is a simple popup that encourages your website visitors to opt for your push notifications. But not all popups are the same. In fact, you can get a lot of extra signups just based on the type of popup you choose along with some basic design optimizations.
We’ve spent a lot of time analyzing best practices for push notifications. So, in this article, we’ll show you how you can style your push notification popups for both mobile and desktop.
And the best part? Your popups are going to be conversion optimized from day one!
Звучит неплохо? Давайте погрузимся.
What is a Push Notification Popup Modal?
Модальное окно всплывающего push-уведомления — это небольшое окно, которое появляется поверх интерфейса веб-сайта или мобильного приложения для отображения сообщения или уведомления посетителю сайта.
The popup modal can be triggered by various events. You can set up popups to get triggered on page visit, on scroll depth, and even on custom actions such as button click. Usually, you’ll see a call to action on the popup modal such as “Subscribe” or “Allow” to get consent from visitors to send them push notifications.
Вы можете создавать всплывающие окна, которые могут сегментировать подписчиков напрямую, или создавать обычные всплывающие окна, которые просто собирают подписчиков с атрибутами по умолчанию, такими как геолокация и браузер.
Push notification popup modals are used to engage with website visitors. But you need to make them as non-intrusive as possible so that you don’t annoy your visitors.
Типы запросов на подписку на push-уведомления
Существует два основных типа запросов на подписку на push-уведомления:
- Одношаговая подписка: Пользователи могут подписаться на push-уведомления одним щелчком мыши. Это не допускает никакой настройки и использует только стандартные стили системы.
- Двухшаговая подписка:При двухшаговой подписке пользователю нужно дважды щелкнуть, чтобы подписаться. Но преимущество в том, что вы можете настроить все, от дизайна до текста.
Но вы должны знать, что существует множество различных подкатегорий запросов на подписку.
В основном мы увидим множество вариантов двухшаговых запросов, поскольку одношаговые запросы не очень настраиваемы.
Вы можете выбрать запрос в стиле Safari:
Крупный запрос в стиле Safari:
Запрос в виде планки с колокольчиком:
Крупное окно в стиле Safari с сегментами:
Запрос в виде плавающей планки:
Или простой одношаговый запрос:
Если вы не уверены, какой из них выбрать, продолжайте читать. Позже в этой статье мы обсудим некоторые настраиваемые функции для каждого типа запроса.
Круто то, что...
Вы можете настроить любой запрос на подписку на push-уведомления для вашего сайта прямо из панели управления PushEngage.
И если вы чувствуете себя особенно креативно, вы можете даже изменить расположение всплывающего окна запроса. Все в запросе полностью настраивается, включая цвет текста или фона как для настольных, так и для мобильных устройств.
Еще одним важным элементом запроса на подписку является Оверлей уведомлений.
Оверлей дает вам дополнительное пространство для объяснения преимуществ подписки на ваши push-уведомления. Для одношаговой подписки ваш Оверлей уведомлений становится очень важным, потому что вы не можете редактировать текст запроса.
How to Optimize Your Push Notification Optin
В панели управления PushEngage перейдите в раздел Дизайн » Модальные окна и выберите тип запроса на подписку для настройки:
Самое классное то, что вы можете использовать несколько модальных окон push-уведомлений одновременно.
Теперь вы можете запускать несколько запросов и тестировать, какой из них лучше работает для вашего сайта, не переключаясь между ними.
Мы обсудим, что отличается в каждом запросе при оформлении каждого push-уведомления. Если вы совершенно новичок в запросах на подписку на push-уведомления, мы рекомендуем прочитать всю статью и решить, какой тип запроса подходит для вашего сайта.
Но если вы уже знакомы с различными типами запросов на подписку на push-уведомления, вам следует перейти к типу запроса, который вы хотите оформить:
- Как настроить запрос на push-уведомления в стиле Safari
- Как настроить большой всплывающий баннер в стиле Safari
- Как настроить плашку-колокольчик
- Как настроить большой баннер в стиле Safari с сегментами
- Как настроить всплывающее окно для push-уведомлений в виде плашки
- Как настроить одношаговое окно для push-уведомлений
Давайте рассмотрим каждый тип всплывающих окон и как вы можете их настроить.
Как настроить всплывающее окно для push-уведомлений в стиле Safari
Давайте начнем с настройки всплывающих окон для push-уведомлений в стиле Safari для настольных компьютеров. Всплывающее окно в стиле Safari — это всплывающее окно, которое выглядит как стандартное всплывающее окно Safari. Только если вы создадите всплывающее окно для push-уведомлений в стиле Safari, посетители вашего сайта увидят стиль Safari независимо от того, какой браузер они используют. И это никак не связано с операционной системой их устройства.
Таким образом, вы не ограничены только экосистемой Apple. Стили просто переносятся независимо от того, какой браузер или операционную систему имеют ваши подписчики.
Первая функция, о которой вы должны знать, — это размещение всплывающего окна на экране. Вы можете решить, где вы хотите показать всплывающее окно на своем веб-сайте, или выбрать размещение всплывающего окна из опций, представленных в выпадающем списке.
Настройка стиля
Нажмите Редактировать всплывающее окно и на вкладке Дизайн всплывающего окна настройте свое всплывающее окно:
Здесь вы можете настроить все в своем всплывающем окне. Напишите собственное сообщение всплывающего окна и настройте подписи кнопок. Затем используйте цвета вашего бренда для цвета фона и цветов кнопок.
Вы даже можете проверить предварительный просмотр, чтобы увидеть, как всплывающее окно выглядит в разных положениях. У вас есть три варианта положения на выбор:
- Сверху слева
- Сверху справа
- По центру сверху
Проверьте живой веб-сайт, чтобы увидеть, что выглядит лучше всего, и выберите свое размещение.
Прокрутите вниз до Включить правила подписки и вы сможете настроить, когда ваше всплывающее окно для push-уведомлений должно появляться.
Вы также можете создать оверлей подписки с уведомлением о юридическом согласии:
Когда закончите, нажмите кнопку Сохранить и выбрать параметры отображения. Там вы можете настроить, когда всплывающее окно отображается, установив задержку после того, как посетитель зайдет на целевую страницу.
Когда закончите, просто нажмите Сохранить и включить всплывающее окно. Вот как это должно выглядеть, когда вы закончите:
Как настроить большой всплывающий баннер в стиле Safari
Большой баннер в стиле Safari появляется в центре страницы как на мобильных устройствах, так и на настольных компьютерах. И это двухэтапное всплывающее окно, поэтому вы можете настроить многое и в этом типе всплывающих окон.
Настройка стиля
Прежде чем мы углубимся в то, что вы можете настроить в своем большом всплывающем окне в стиле Safari, давайте посмотрим, что вы не можете настроить. У вас есть только один вариант размещения для этого типа всплывающих окон из-за его размера.
Но, как и в обычном всплывающем окне в стиле Safari, вы можете настроить:
- Цвет фона
- Цвет кнопки "Разрешить"
- Цвет кнопки "Блокировать"
И вы также можете настроить параметры текста и шрифта с помощью живого редактора. Остальные параметры настройки точно такие же, как и для обычного всплывающего окна Safari, включая настройки отображения всплывающего окна и промежуточную страницу.
Как настроить плашку-колокольчик
В нижней правой или левой части страницы появляется закрепленная панель с колокольчиком, как на мобильных устройствах, так и на компьютерах. Это настраиваемый двухэтапный вариант подписки с теми же параметрами настройки, что и у большого окна в стиле Safari. И это именно то, что следует из названия. Это панель с уведомлением-колокольчиком, на которую посетители вашего сайта должны нажать, чтобы подписаться.
Настройка варианта подписки с закрепленной панелью-колокольчиком
Как мы уже говорили, вы можете разместить этот вариант подписки только в правом нижнем углу:
Или в левом нижнем углу страницы, как на мобильных устройствах, так и на компьютерах.
В этом смысле он лишь немного отличается от большого окна в стиле Safari. Что касается стилей, вы можете изменить цвета колокольчика и фон закрепленной панели с колокольчиком:
Остальные настройки точно такие же, как и в вариантах в стиле Safari.
Как настроить большой баннер в стиле Safari с сегментами
Большое окно в стиле Safari с сегментами — это именно то, что следует из названия. Это большой вариант подписки в стиле Safari с возможностью автоматической сегментации ваших подписчиков.
Создание сегментов для подписчиков push-уведомлений может значительно помочь вам персонализировать ваши кампании. Если у вас есть веб-сайт или блог с разнообразным контентом, и вы уже знаете свои источники наибольшего трафика, вам стоит попробовать использовать большое окно в стиле Safari с сегментами.
Этот тип подписки управляется пользователем, поскольку пользователь сам решает, какие уведомления он хотел бы получать.
После создания сегментов перейдите в раздел Дизайн » Всплывающие окна и создайте новый вариант подписки «Большое окно в стиле Safari с сегментами»:
Нажмите Редактировать всплывающее окно и на вкладке Дизайн всплывающего окна настройте свое всплывающее окно:
Здесь вы можете настроить практически все в вашем варианте подписки, начиная от текста и заканчивая использованием цветов вашего бренда в оформлении. В поле «Параметры сегмента на рабочем столе» вы можете выбрать сегменты, на которые вы хотите, чтобы ваши посетители подписались.
Прелесть этого оптина в том, что один и тот же подписчик может выбрать подписку на несколько сегментов прямо из всплывающего окна.
Прокрутите вниз до Включить правила подписки и вы сможете настроить, когда ваше всплывающее окно для push-уведомлений должно появляться.
Вы также можете создать оверлей подписки с уведомлением о юридическом согласии:
Когда закончите, нажмите кнопку Сохранить и выбрать параметры отображения. Там вы можете настроить, когда всплывающее окно отображается, установив задержку после того, как посетитель зайдет на целевую страницу.
Когда закончите, просто нажмите «Сохранить и включить всплывающее окно»:
Как настроить всплывающее окно для push-уведомлений в виде плашки
Всплывающая панель подписки появляется внизу или вверху страницы как на мобильных устройствах, так и на компьютерах. Опять же, это двухэтапный вариант подписки с промежуточной страницей. Таким образом, вы можете настроить многое.
Как стилизовать всплывающую панель
Всплывающая панель подписки очень похожа на закрепленную панель с колокольчиком. Поэтому варианты стилизации также довольно схожи. Основное отличие заключается в том, что у вас есть текст подписки и кнопки, как и в любом другом двухэтапном варианте подписки.
Вы можете разместить их внизу экрана:
Или вверху экрана:
А затем вы можете настроить остальные параметры подписки так же, как и в любом другом варианте. Это включает цвета фона, цвета кнопок, любой текст во всей подписке, промежуточную страницу и параметры отображения.
Как настроить одношаговое окно для push-уведомлений
Простой ответ: нельзя.
Одноэтапный вариант подписки на push-уведомления нельзя настроить, поскольку он использует системные настройки по умолчанию для создания всплывающего окна. Вы можете настроить значок колокольчика, который прилагается к вашему варианту подписки.
Вы можете разместить колокольчик для одноэтапного уведомления в правом нижнем углу:
Или в левом нижнем углу:
Вы также можете изменить цвета колокольчика и текст при наведении на значок колокольчика:
Прокрутите вниз до Включить правила подписки и вы сможете настроить, когда ваше всплывающее окно для push-уведомлений должно появляться.
Вы также можете создать оверлей подписки с уведомлением о юридическом согласии:
Имейте в виду, что все это только для настольной версии. Мобильная версия имеет только системные настройки по умолчанию, и вы не можете изменить ее размещение.
Мобильная версия ваших одношаговых опций push-уведомлений будет выглядеть так:
Что касается настроек согласия, вы можете установить задержку для отображения согласия. И вы можете изменить продолжительность действия cookie, чтобы запомнить, отказался ли кто-то от ваших push-уведомлений.
И это действительно все, что вы можете сделать с одношаговыми опциями. Мы рекомендуем вам начать с одношаговых опций, чтобы повысить ваши показатели подписки.
Если вы только начинаете работать с push-уведомлениями, создание списка будет более приоритетным для вашего бизнеса. Со временем вы можете перейти на двухшаговые опции, которые более настраиваемы.
What to do After Setting Up a Push Notification Popup Modal
Once you’re done customizing one push notification popup modal, go ahead and create more. You can create as many popup modals as you like using PushEngage. As you saw, you can customize when to show each popup modal. So, you can use multiple popups to retarget your visitors.
You can also create different popup modals for different pages. Customizing the push notification popups on your site can help you convert your traffic into push subscribers and genuine business leads on autopilot.
Не убедились? Ознакомьтесь с этими ресурсами:
- 7 умных стратегий для повышения вовлеченности клиентов
- 8 триггерных кампаний push-уведомлений для увеличения конверсии в вашем интернет-магазине
- Как превратить подписчиков в покупателей с помощью веб-push-уведомлений
Мы рекомендуем использовать PushEngage для создания ваших кампаний push-уведомлений. PushEngage — это программное обеспечение №1 в мире для push-уведомлений. Так что, если вы еще этого не сделали, начните использовать PushEngage сегодня!
