Как сделать всплывающее окно на сайте с помощью enPop

Как сделать всплывающее окно на сайте с помощью enPop

Ольга Губарева

Пишет контент, любит кошечек, собачек, вино и диско. Придирается к дизайнерам.

Если перевести с человеческого на язык маркетологов, то окно может:

  • собрать подписчиков
  • сегментировать их
  • увеличить конверсию
  • подтолкнуть клиента к действию
  • удержать клиента

 Неспешно сделать всплывающее окно в enPop можно минут за 15.  Без привлечения к этому процессу дизайнеров, верстальщиков и высших сил. Мы продумали и придумали все за вас.
Рассказываем, что и как делать в сервисе всплывающих окон для сайта, чтобы получить попап вашей мечты.

Шаг первый. Выбор шаблона

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

По виду попапы делятся на три группы:

  • По центру
  • Угловой
  • Полоса

И по типу тоже на три:

  • Собирающие ─ пригодятся тем, у кого базы нет, но очень хочется. Такое всплывающее окно соберет всю нужную контактную информацию ;
  • Информирующие ─ скидки, распродажи,  условия доставки, бонусы за покупку, изменения в работе магазина, поздравления с праздниками — все, на что хватит у вас фантазии. Делитесь с посетителями сайта любыми новостями.
  • Опросы ─ помогут вам узнать вашего подписчика чуть лучше. Зачем страдать и гадать, когда можно просто спросить?  Поинтересуйтесь, чего не хватает вашим клиентам, а что их бесит.

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

Шаг второй. Редактирование окна

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

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

Основные настройки:

После целевого действия: когда подписчик совершил нужное действие —  подписался или ответил на парочку вопросов — можно выбрать несколько вариантов развития событий.

  • Закрыть окно

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

  • Перейти по ссылке

Можно выразить благодарность на странице вашего сайта или стороннего сервиса —  добавить URL страницы, на которую попадет ваш гость.

  • Показать спасибо-страницу 

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

Другие настройки:

  • Показывать ссылку на политику обработки персональных данных

Федеральный закон «О персональных данных» (ФЗ-152) гласит, что вы должны рассказать вашему будущему подписчику о цели сбора, обработки, хранения, учета персональных данных до начала их сбора.Закон суров, но это закон, от него никуда не деться. Иначе будет больно на очень большие суммы денег.  Конечно, вы можете классически разместить политику в футере вашего сайта. Но удобнее, когда оставляя свои данные во всплывающем окне, подписчик может в этом же окне ознакомиться с Политикой. 

  • Закрывать попап окно по клику по внешней области

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

  • Скрывать окно при неактивности

Если всплывающее окно игнорируется подписчиком, оно может остаться до закрытия или исчезнуть через какое-то время, которое также можно настроить: от 5 до 60 секунд.

Не менее значимые настройки:

  • Цвет

 У любого шаблона есть несколько предустановленных цветов. Но мы можем персонализировать поп ап по вашему желанию: добавить корпоративные цвета или иллюстрации. Просто расскажите про свои пожелания персональному менеджеру или покажите ему примеры.

  • Текст

Делится на заголовок, мотивирующее тело сообщения и название кнопки. Количество этих блоков зависит от шаблона, в некоторых можно увидеть сочетание только заголовка и кнопки. Результат можно посмотреть и оценить сразу 🙂 
А еще можно использовать магию html. Например, на скриншоте выше html используется для вставки неразрывных пробелов &nbsp, чтобы при адаптации попапа под разные экраны текст продолжал выглядеть красиво.

  • Позиция

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

  • Поля

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

Шаг третий. Настройки показа

Теперь, когда с дизайном покончено, можно заняться чуть более технической настройкой. 

К ней относятся:

  • выбор сегмента
  • настройки интеграции

Сегментация

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

Создать новый сегмент можно в меню «Сегменты» или во время создания окна в «Настройках показа».

Яркий блок И/ИЛИ позволяет группировать условия. Например, вы можете показывать окно только тем, кто был на сайте меньше 5 минут и посмотрел больше 2 страниц. Или тем, кто проскроллил страницу до конца и собирается уйти. Поменять И на ИЛИ можно кликом по блоку.

Категории можно сворачивать и разворачивать:

По просмотру страниц:

  • прошло времени (находился на странице больше/меньше определенного времени)
  • скролл страницы (скролл страницы больше/меньше определенного % страницы)
  • просмотрено страниц (просмотрено за сессию больше/меньше/равно определенного числа страниц)
  • закрытие вкладки
  • посещение сайта (количество посещений меньше/больше/равно определенного количества)

По адресу страницы:

  • URL страницы (начинается с/содержит/по маске/равен и ввод значения)
  • UTM-метки

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

По данным подписчика:

  • Значение поля (поля емейл и телефон со значениями пустое/принимает значение/содержит домен)
  • Тип устройства (устройство ПК и мобильный)

По покупательскому поведению:

  • Просмотрено товаров (просмотрено товаров по количеству/id, за сессию/все время, больше/меньше/равно определенного количества раз)
  • Корзина (товары в корзине по количеству/id/по наличию/времени добавления, больше/меньше/равно определенного количества)
  • Покупка (число покупок за всё время/по количеству дней больше/меньше/равно определенного числа,по id товара, по сумме покупок за всё время/по количеству дней, средняя/общая/максимальная/минимальная стоимость которых меньше/больше определенной суммы)

К некоторым условиям можно применить отрицание. Например, «URL не содержит» можно задать с помощью блока «НЕ» в начале условия:

После того, как сегмент настроен — нужно его сохранить. Теперь сегмент видно в списке. Его можно выбрать, нажав на «+». Должно получиться вот так:

PopUp можно настроить сразу на несколько сегментов:

Сегменты можно удалять. Но есть  на сегмент настроены какие-то попапы, то enPop  не даст совершить непоправимую ошибку и выдаст вот такое уведомление:

Интеграция

Самое основное, ради чего нам, собственно, и потребовалось создать всплывающее окно на сайте — данные. Мы их собрали и теперь их надо передать и где-то хранить. И желательно не абы как, а как положено. У нас уже есть готовые интеграции с ExpertSender и Myown CRM. Можем организовать интеграцию с любой другой системой, вы только скажите. В этот раздел можно попасть через “Настройки” → “Интеграции” и при создании попапа в “Настройки показа” → “Интеграции”.

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

  • название интеграции
  • систему
  • API-адрес
  • API-ключ
  • номер листа 

Потом нужно выбрать настроенную интеграцию, нажав на + :

И всё, с настройками покончено. Осталось лишь активировать попап, нажав на соответствующую кнопку. На чтение этой статьи вы потратили больше времени, чем потребуется на настройку всплывающего окна. Если остались вопросы или есть предложения и пожелания по улучшению функционала, напишите нам, мы хотим быть самыми классненькими. 

ПОХОЖИЕ СТАТЬИ

28.10.19

Сегментация базы клиентов

Семьи с двумя детьми, которые любят отдых в Турции. Мужчины до 35, которые интересуются лыжными гонками.
Что объединяет всех этих людей?

Читать статью

17.10.19

Сall to action: 50 примеров, которые действительно работают

Мы собрали примеры сильных Call to action, перед которыми невозможно устоять.

Читать статью

17.10.19

Как увеличить конверсию сайта?

Чтобы увеличить конверсию сайта, вам нужно два главных компонента: сайт и понимание, какая конверсия вам нужна. А как добиться от пользователей нужных действий читайте тут 🙂

Читать статью