8 лучших сервисов для создания pop-up (всплывающее окно на сайте)

Редакция «Текстерры»

Обновил Сергей Алмакин

В данном обзоре я собрала лучшие, на мой взгляд, сервисы для создания всплывающих окон. Самыми главными критериями оценки для меня были: наличие бесплатной версии или хорошего тестового периода (с неограниченным функционалом и отсутствием необходимости вводить реквизиты своей банковской карты), возможность изменения дизайна и текста, наличие большого количества триггеров. К моему большому удивлению, хороших и недорогих сервисов для создания поп-апов в Рунете я почти не нашла (искала через поиск). Зато у зарубежных коллег нашла много интересных инструментов. Представляю их вашему вниманию.

Hello Bar

Ссылка на сайт: Hello Bar

Цена: самый дешевый тариф с неограниченным количеством создаваемых поп-апов – 29 $ в месяц, тариф Elite –99 $ в месяц (при оплате за год делается скидка 15 %). Есть полностью бесплатная версия со всеми базовыми функциями, но с ограничением по количеству поп-апов.

Тарифы сервиса Hello Bar

Как установить

1. Зарегистрируйтесь на сайте hellobar.com.

2. Вставьте предложенный код в шаблон своего сайта или скачайте и установите плагин, если вы используете WordPress или Wix:

3. Выберите задачу, которую планируете решать с помощью инструмента: сбор имейлов, звонок в один клик, перенаправление в ваши аккаунты в соцсетях (или сбор лайков), промоутирование какой-то страницы или простое объявление:

4. У поп-апа под каждую задачу примерно одинаковые настройки, поэтому я разберу только один вариант – предложение пользователю позвонить в вашу компанию, нажав на соответствующую кнопку. Убрать логотип Hello Bar в бесплатной версии, к сожалению, невозможно.

5. Впишите номер телефона и выберите свою страну:

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

7. Можно сразу выбрать готовый шаблон:

8. Включите или отключите анимацию:

9. Выберите расцветку вашего окна:

10. Измените дизайн выбранного шаблона, например – баннера:

11. Введите нужный текст и, при желании, выберите изображение, которое будет идти после вашего сообщения.

12. Настройте таргетинг. К сожалению, в бесплатной версии всплывающее окно показывается абсолютно всем пользователям. Поэтому здесь мы можем выбрать только один параметр – что будет происходить после того, как пользователь нажал на кнопку или закрыл окно: поп-ап будет продолжать показываться, или же он больше никогда не появится перед этим пользователем. Также можно выбрать срок, в течение которого больше не показывается поп-ап:

13. Нажмите Save & Publish. Всё! Поп-ап создан. Теперь только остаётся запустить его (в разделе Manage).

Преимущества сервиса Hello Bar

• Очень простые настройки.
• Возможность выполнять различные задачи.
• Адаптивный дизайн.
• Хорошая статистика.
• Интеграция с зарубежными email-сервисами (при выборе цели «сбор имейлов»).

Недостатки сервиса Hello Bar

• Скудные настройки таргетинга.
• Невозможность убрать логотип в бесплатной версии.
• Есть поддержка только Facebook, нет никаких отечественных социальных сетей (если выбирать цель Social):

Вывод: хороший бесплатный сервис со всеми необходимыми функциями.

Get Site Control

Ссылка на сайт: GetSiteControl

Цена: от 7 $ в месяц. Доступны следующие тарифы:

Смотреть галерею

Как установить?

1. Зарегистрируйтесь в сервисе.

2. Нажмите на кнопку Let's install the code, скопируйте предложенный код и вставьте его перед закрывающим тегом body:

3. Нажмите кнопку Refresh, чтобы сервис проверил правильность установки. Если код добавлен правильно, то рядом со словом Installed загорится зеленый огонек.

4. Выберите нужный виджет: опрос, форма для отправки email-сообщения, промоутирование нужной вам страницы, подписка на рассылку, увеличение подписчиков в социальных сетях, кнопки для расшаривания или онлайн-чат:

Типы виджетов – модальный, полноэкранный, слайдер, бар, панель:

5. После того как вы выбрали виджет, отредактируйте его на свое усмотрение (разберем на примере виджета для обратной связи).

6. Редактирование текста и другие настройки:

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

Есть режим галереи шаблонов. Здесь имеются решения для любого случая:

6. После того, как вы настроили все параметры, нажмите кнопку OK, а затем активируйте нужный виджет.

7. После этого можно отслеживать статистику:

Преимущества сервиса GetSiteControl

• Невысокая цена.
• Нет ограничений по трафику.
• Огромное количество разных виджетов и шаблонов.
• Все виджеты адаптированы под мобильные устройства.
• Есть поддержка «ВКонтакте».

Вывод: очень простой сервис, но при этом его функционала вполне достаточно, чтобы выполнить ряд очень полезных действий. По моим субъективным ощущениям – один из лучших.

Get Site Control оказался достаточно удобным приложением. Виджет легко настраивается и устанавливается с помощью кода на сайт. Если нужно сделать поп-ап быстро, без привлечения дизайнера и frontend-специалиста, приложение можно смело использовать. Как использовали его мы: при выходе с нашего сайта у клиента появлялся поп-ап «Не уходи» со скидкой на курс. Впервые мы использовали такую фишку на онлайн-курсе «Дзеноводство». За неделю получили 23 оплаты при том же трафике и без подключения платных каналов. Результатами мы остались довольны и стали периодически включать поп-ап для других курсов.

Мария Германова

руководитель учебного центра TeachLine

Mailmunch

Ссылка на сайт: Mailmunch

Цена: от 9.99 $ в месяц. Есть полностью бесплатный тариф с базовым функционалом. Тарифы на месяц не такие выгодные, как на год:

Как установить?

1. Регистрируем учетную запись Mailmunch.

2. Выбираем используемую на сайте CMS:

Далее заполняем длинную форму данных и наконец попадаем в раздел создания кампании:

Выбираем тип формы, например – классическое всплывающее окно:

3. Выбираем любой понравившийся шаблон:

4. Вводим название формы (оно не будет нигде отображаться и нужно исключительно для вашего удобства) и выбираем список, в котором будут сохраняться собранные контакты:

Указываем заголовок, описание, текст благодарности (появляется после подтверждения подписки):

5. Настраиваем дизайн формы. Выбираем цвет фона, кнопки и текста. Включаем анимацию при необходимости:

6. Добавляем нужные поля. Обязательно переводим текст, который будет в них написан. При желании добавляем свой собственный html-код (custom HTML):

7. Выбираем, когда именно показывать объявление:

8. Указываем, что делать с подписчиками:

9. Указываем, на каких устройствах показывать поп-ап:

10. Интегрируем Mailmunch с email-сервисом (если в этом нет необходимости, нажмите Skip), а потом активируем поп-ап:

11. Публикуем созданный поп-ап. Если вы хотите сделать так, чтобы поп-ап показывался при нажатии на кнопку или ссылку, добавьте предложенный код в URL этого элемента:

После того, как вы пройдете все пункты, нажмите Finish и вставьте предложенный код перед закрывающим тегом head:

Готово. Можно отслеживать статистику первой запущенной кампании.

Преимущества Mailmunch

• Очень хороший бесплатный тариф.
• Невысокие цены.
• Красивый дизайн и достаточно гибкие настройки.
• Адаптивный дизайн.
• Возможность менять текст и добавлять свои поля.
• Хорошая аналитика.
• Экспорт данных в формате csv.

Недостатки сервиса Mailmunch

1. Большинство шаблонов и некоторые функции доступны только в платном тарифе.

2. Невозможно убрать логотип.

Вывод: в целом сервис очень понравился. Несмотря на то, что тариф бесплатный, есть очень неплохие настройки триггеров и таргетинга. Можно менять дизайн, текст, расположение на экране, добавлять собственные поля, собирать статистику, экспортировать данные в формате csv. По-моему, очень достойный сервис.

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

Sumo

Ссылка на сайт: Sumo

Цена: от 49 $ в месяц или 39 $ в случае приобретения подписки на год. Есть полностью бесплатный тариф со всеми базовыми функциями.

Как установить?

1. Зарегистрируйтесь в сервисе и установите его на свой сайт. Для этого можно воспользоваться готовыми плагинами для Wordpress, Shopify, Weebly, Tumblr, Blogger, Google Tag Manager. Или установить код на сайт вручную:

2. Откроется конструктор форм:

3. Выбираем Turn on. Откроется рабочий интерфейс:

Выбираем пункт Edit в только что созданном объявлении. Откроется окно редактирования форм:

4. Выбираем тип формы поп-ап:

5. Выбираем дизайн шаблона:

6. Выбираем видимость окна: умный режим (сервис сам определит, когда и где лучше показать ваш поп-ап) или ручной (вы сами настраиваете, где будет показ). Здесь также можно выбрать цель, тип формы и ее дизайн:

7. Настраиваем поведение в случае успешной подписки. Здесь вы можете контролировать успешные события и то, как отслеживается ваша форма. Приятно, что есть поддержка фейcбучного пикселя:

8. Если у вас есть почтовая служба, к которой вы хотите подключить созданный поп-ап, просто выберите ее из списка:

Всё готово. Выбираем Update и получаем созданный поп-ап:

На платном тарифе доступно очень много красивых и функциональных шаблонов.

Преимущества сервиса Sumo

• Бесплатный тариф.
• Большое количество интересных виджетов.
• Возможность менять дизайн и текст всплывающего окна.
• Возможность скачивать собранные имейлы в формате csv.

Недостатки сервиса Sumo

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

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

У нас есть отличный кейс о том, как заставить поп-ап работать на вас.

AddThis

Ссылка на сайт: AddThis

Цена: бесплатно.

Как установить?

Делимся видеоинструкцией:

А теперь текст:

1. Выбираем Link Promotion:

2. Выбираем поп-ап и пункт Continue внизу страницы:

3. Укажите страницу, которую нужно рекламировать:

4. Указываем заголовок и названия кнопок. При необходимости меняем шрифт и цвета:

5. В следующей вкладке меняем дизайн окна:

6. Здесь же можно выбрать картинку для поп-апа (из библиотеки или указать ее URL):

7. Во вкладке поведение можно:

• указать, через какой интервал окно будет показываться снова после скрытия;
• на каких страницах показывать/скрывать поп-ап;
• настроить дополнительное сообщение при «выходе»:

8. После завершения всех настроек выбираем пункт Activate Tool. Получаем сгенерированный код, который нужно вставить перед закрывающим тегом body, который обычно находится в файле footer.php:

9. После создания поп-апа можно выбрать необходимые настройки таргетинга в разделе TARGETING RULES:

Выбираем PROMOTE A LINK:

Доступны следующие настройки:

• Показывать поп-ап можно: всем посетителям / только новым / только вернувшимся.
• Можно устанавливать правила показа для определенных устройств: мобильные телефоны, планшеты, десктопы.
• Настройка источников: показ пользователям, пришедшим из любой соцсети или из какой-то определенной. Поп-ап также можно показывать посетителям, пришедшим с конкретных сайтов.
• Название кампании (для создания UTM-метки) + Medium (UTM-канал) кампании.
• Учитываются интересы и место нахождения пользователя.

Преимущества сервиса AddThis

• Полностью бесплатный.
• Простота интерфейса.
• Можно менять текст и дизайн всплывающего окна.
• Функциональные настройки таргетинга.
• Есть подробная аналитика.
• Собранные имейлы можно скачать в формате .csv.
• Адаптивный дизайн.

Недостатки сервиса AddThis

• не очень функциональные настройки кнопок расшаривания/кнопки соцсетей

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

Picreel

Ссылка на сайт: Picreel

Цена: от 19 $ в месяц с ограничением по количеству уникальных пользователей и показов. При оплате за год делается скидка 25 %. Есть бесплатный тестовый период в 30 дней. Тарифы на месяц следующие:

Как установить?

1. Зарегистрируйтесь в сервисе.

2. Выберите подходящий шаблон: для сбора подписчиков, перенаправления трафика, проведения опросов, раздачи скидок и купонов; обычные поп-апы, поп-апы на весь экран или поп-апы, состоящие из двух окон. Каждый шаблон можно кастомизировать:

3. Окно кастомизации шаблона. Изменить можно: дизайн, поля, глобальные настройки, настройки баннера, настройки персонализации. Можно также добавить кастомные шрифты:

4. Выберите настройки цветов поп-апа и полей. Здесь же задаем действия после взаимодействия с окном (поле Select action after event). Можно просто закрыть, показать текст благодарности, выбрать анимацию:

Здесь же доступны дополнительные настройки баннера – стиль, кастомные шрифты и настройки персонализации:

Добавьте интерактивные элементы: анимация при появлении окна, таймер обратного отсчета и т. д.

5. Выбираем Save и попадаем в настройки кампании. Обязательно задаем триггеры и частотность появления, указываем тип устройств. Необязательные настройки: расписание, показы для новых/возвращающихся посетителей, ГЕО и другие параметры:

6. После указания всех необходимых настроек вставляем код в шаблон сайта (перед закрывающим тегом /body):

Преимущества сервиса Picreel

• Большой тестовый период (30 дней) с неограниченным функционалом.
• Большое количество готовых шаблонов.
• Интеграция со всеми известными зарубежными email-сервисами и CRM-системами.
• Расширенные настройки таргетинга.
• Хорошая аналитика.
• Возможность проводить A/B-тесты.
• Адаптивный дизайн.

Недостатки сервиса Picreel

• Цена. Стоимость минимального тарифа составляет 19 долларов в месяц, и это при том, что в нем есть ограничения по количеству трафика: 3000 уникальных посетителей и 30 000 просмотров в месяц.
• Отсутствие бесплатного тарифа.

Вывод: хороший сервис с очень широкими возможностями для профессиональных интернет-маркетологов. Большой тестовый период, хорошая партнерская программа. Но тарифы, конечно, дорогие.

Optimonk

Ссылка на сайт: Optimonk

Цена: от 29 $ в месяц с ограничением до 25 тысяч уникальных пользователей. Есть бесплатный тариф для одного домена. Вот все тарифные планы:

Как установить?

1. Зарегистрируйтесь в сервисе.

2. Выберите пункт Create your first campaign:

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

4. Откроется окно предпросмотра формы. Выбираем пункт Create Campaign:

5. Указываем домен своего сайта:

6. Рассказываем немного о своем бизнесе:

7. Откроется окно, в котором мы можем редактировать контент (просто кликаем по необходимому элементу, и открывается окно настроек). Здесь же меняем цвета темы, также можно добавлять новые слои и элементы:

Редактируем поп-ап, начиная с заголовка: указываем типографские параметры, выбираем шрифт, его размер:

Доступны дополнительные настройки отображения текста, поворот, задний фон, границы и тени:

Слои любого элемента можно отредактировать в разделе Layout:

В разделе Add Elements добавляем новые элементы. Можно добавить не только текст, но и картинку, кнопку. Есть поддержка элементов форм (списки, маркеры, опросники и ещё много чего нужного). Есть также поддержка сложных элементов, можно добавить свой HTML-код:

8. После создания поп-апа и завершения настройки выбираем пункт Next. Откроется окно настройки отображения поп-апа. Здесь задаем позицию всплывающего окна, форму, размер и другие параметры. Доступна поддержка стилей:

После завершения настройки выбираем пункт Save & Next, который находится в правом верхнем углу экрана. Откроется окно настроек кампании:

При необходимости здесь также можно задать дополнительные триггеры для показа. Для этого выбираем Add more triggers и далее добавляем любые необходимые события для показа (когда посетитель надумал уходить со страницы, при клике по заданной области, после определенного % скролла страницы, после заданного времени неактивности, после x секунд):

9. Выбираем That's all the conditions I need и попадаем в настройки показа:

10. Отмечаем частоту появления поп-апа:

11. Выбираем Save и That's all the conditions I need. Откроется окно интеграции с веб-аналитикой:

Связываем созданный поп-ап (при необходимости) c GA. Для этого придётся вставить соответствующий код. Если интеграции с GA не нужна, просто переходим к установке плагина Optimonk на свой сайт. Если у вас WordPress, достаточно будет скачать плагин (просто напишите в поиске Optimonk и установите плагин) и затем в его настройках применить указанный код. Если используется другая CMS, плагин придется устанавливать вручную: для этого нужно будет вставить скрипт Optimonk в шаблон вашего сайта.

После установки плагина выбираем Check now и, если всё установилось корректно, кликаем That's all the integrations I need.

Настройка завершена.

Преимущества сервиса Optimonk

• 11 готовых шаблонов (поп-ап с таймером, с полями для ввода имени и имейла, с купоном на скидку, двойной поп-ап).
• Интеграция с популярными зарубежными email-сервисами и CRM-системами.
• Интеграция с Google Analytics и Google Tag Manager.
• Глубокие настройки таргетинга.
• Хорошая аналитика.
• Динамическая замена текста (настраивается с помощью кода javascript).

Недостатки сервиса Optimonk

• Не очень большой тестовый период – всего 14 дней.
• Довольно высокая цена: от 29 долларов в месяц и до 25 тысяч уникальных пользователей).

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

JumpOut

Ссылка на сайт: JumpOut

Цена: от 199 рублей в месяц с ограничением до 15 тысяч визитов. Бесплатный тариф ограничен 2000 тысячами визитов и одним доменом:

Есть также пробный тариф на 15 дней. JumpOut позиционирует себя как «умный поп-ап для бизнеса», и все тарифные планы на месяц более чем приемлемые. Это единственный русскоязычный сервис в списке.

Как установить?

1. Выбираем пункт «Получить бесплатно» и вводим свой e-mail:

Регистрируемся: заполняем имя, e-mail автоматически подтянется из предыдущей формы, придумываем сложный пароль.

2. Открываем свою электронную почту и активируем аккаунт. Даже если не попросят, в любом случае нам понадобится это позже.

Так выглядит дашборд JumpOut:

Здесь также есть ассистент, который проведет вас по нескольким шагам, помогая освоиться с функционалом:

3. Чтобы создать поп-ап, выбираем пункт «Создать джампаут» и в типе джампаута кликаем «Поп-ап»:

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

3. В «Правилах работы» выбираем:

• триггер для показа поп-апа (например, при попытке закрыть сайт);
• когда показать поп-ап в следующий раз (через неделю, месяц);
• условие показа (на каких страницах показывать).

4. В разделе «Дизайн и текст» перед нами удобный и функциональный конструктор шаблонов, с возможностью редактировать форму подписки, анимацию, размеры окна, цвета, заголовки, текст и многое другое:

5. В разделе «Форма» выбираем сервис рассылки, который используем:

6. Можно добавить параметры формы рассылки. Приятно, что JumpOut поддерживает большое количество таких сервисов:

7. В разделе «Остальные» при необходимости можно задать дополнительные CSS или JS-код.

Так выглядит поп-ап, созданный с помощью JumpOut:

8. После создания поп-апа сохраняем его и выбираем пункт «Установить код на сайт», который находится в правом углу экрана:

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

Преимущества сервиса JumpOut

• Большое количество инструментов.
• 5 типов виджетов.
• Есть А/Б тесты.
• Поддержка ретаргетинга.
• Встроенный персонализатор.
• Возможность интеграции с веб-аналитикой.
• 10 условий показа для целевых посетителей.
• Полезные сценарии для использования поп-апа в разделе «Идеи использования».

Недостатки сервиса JumpOut

• Пробный период – всего 15 дней.
• Ограниченное число типов джампаутов.
• Нужно вникать в функционал, так как он довольно сложный: здесь есть не только группы, но и плагины, иные дополнительные инструменты. Разобраться во всём сходу может быть довольно сложной задачей.

Сравнительная таблица

Чтобы вам было удобно сравнивать сервисы, которые я перечислила выше, воспользуйтесь таблицей Excel.

В качестве бонуса: бесплатные плагины для WordPress

За что я больше всего люблю WordPress, так это за то, что для него есть готовые плагины практически на любую тему. И всплывающие окна – не исключение. Чуть ниже я перечислю плагины, с помощью которых вы можете создать красивый поп-ап для своего сайта на WordPress. Без подробного обзора, но с картинками, чтобы вы могли посмотреть, как они будут выглядеть на вашем сайте.

9. WordPress PopUp (официально совместим с версиями WP от 4.6 до 5.6)

10. WordPress Notification Bar (официально совместим с WP версии 3.0 и до 5.5.3)

11. Boxzilla (официально совместим с WP версии 4.6 и до 5.5.3)

12. Popups (официально совместим с WP версии 3.1 и до 5.3.6)

13. WP Popup Plugin - Lightbox Popup (официально совместим с WP версии 3.1 и до 4.8.15)

14. PopupAlly (официально совместим с WP версии 2.9 и до 5.2.9)

Русскоязычные сервисы, которые не вошли в обзор

• ApixDrive. Хороший сервис. Широкая тарифная линейка. В свое время мы его использовали для своего сайта, лидов было не очень много, но, я уверена, можно добиться более хороших результатов, если поэкспериментировать.
• Сервисы обратного звонка, а также сервисы типа Hubspot, в которых помимо всплывающих окон есть еще три миллиона разных функций для работы по сбору и обработке лидов. Я считаю, эти сервисы должны идти отдельно (возможно, когда-нибудь сделаем и на них обзор).

В заключение

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