Как создать умный попап
С помощью конструктора попапов вы можете создавать умные попапы, которые показываются посетителям только по заданному сценарию. Делайте персональное предложение в нужное время, помогайте клиенту с выбором услуги или собирайте подписчиков, чтобы продолжить работу с ними в сервисе SendPulse.
Вы можете выбрать готовый шаблон и использовать его в таком виде или отредактировать под свои задачи.
Рассмотрим, как создать виджет из шаблона: настроить внешний вид, элементы и условие показа.
Создайте попап
Вы можете создать попап с нуля или выбрать готовый шаблон и отредактировать его.
Перейдите в нужный проект во вкладку Попапы (Pop-ups) и нажмите Создать попап (Create pop-up).
C нуля
Вы можете собрать попап сами с доступных в конструкторе элементов.
Нажмите Новый попап (New pop-up).
По шаблону
Шаблон — это виджет с предустановленными настройками по набору элементов и внешнему виду. Вы можете выбрать шаблон по праздникам, по типу попапа или с определенным набором элементов.
Выбрать шаблон по праздникам или с набором определенных элементов можно только на этапе выбора шаблона. Если не выбираете шаблон, но хотите создать похожий, посмотрите, из каких элементов состоит пример и выберите их во вкладке Дизайн > Элементы.
Тип попапа есть возможность поменять позже, во вкладке Дизайн > Cтиль.
Выберите справа категорию и слева сам шаблон.
Настройте элементы
После выбора шаблона открывается конструктор попапа во вкладке Дизайн (Design), где вы можете отредактировать его внешний вид и настроить элементы.
Если вы выбрали создать новый попап с нуля нажмите +Добавить элемент (+Add element) и выберите нужный.
Можно добавлять элементы для попапов типа Плавающий, Модальное окно, Перекрывающий и Горизонтальный. Про попапы типа Видео и Лаунчер читайте в секции Дополнительные элементы.
Если выбрали создать попап по шаблону, можно отредактировать имеющиеся элементы. Для этого нажмите на иконку карандаша — и вам откроется вкладка редактирования выбранного элемента.
Также вы можете перейти к редактированию элемента выбрав его на виджете. При наведении на элемент и в режиме редактирования он будет выделен зеленой рамкой.
Подробнее о каждом элементе читайте ниже.
Все элементы необязательные. Можно их добавлять, удалять и миксовать между собой, выбирая только те, которые нужны вам.
Но если вы добавляете элементы, из которых нужно передавать данные (Поле ввода, Дропдаун, Радиокнопка, Чекбокс, Мультивыбор и NPS), тогда в попап обязательно добавьте элемент Кнопка.
Обложка
Отображает картинку как часть дизайна попапа для улучшения визуального восприятия пользователем или привлечения внимания.
Если вы выбирали создать попап с нуля, нажмите Загрузить изображение и выберите его из файлового менеджера.
Чтобы заменить шаблонное изображение, нажмите на карандаш напротив него.
Чтобы загрузить файл в файловый менеджер, нажмите Загрузить файлы. Выберите или перетащите его в область и нажмите Загрузить. Затем закройте модальное окно и кликните нужный.
Выберите положение относительно края попапа: слева, справа, сверху или заполнить весь попап.
В отличие от элемента Изображение, элемент Обложка заполняет все пространство относительно выбранного края.
Поле ввода
Запрашивает у пользователя данные, которые вы можете сохранить в переменные. К примеру, имя, email, телефон, дату рождения и другие.
В поле Переменная выберите или создайте переменную, в которую нужно сохранить значения. Можно сохранять значение со всеми типами данных (Строка, Число, Phone и Email).
В поле Подсказка внутри поля введите текст для плейсхолдера.
Вы также можете автоматически предзаполнять поля попапа, настроить двойное подтверждение о подписке, добавить название и сделать поле обязательным.
Читайте подробнее: Как настроить кастомную форму и Как передавать пользовательские переменные.
Мессенджер
Перенаправляет посетителя на мессенджер выбранной социальной сети. Вы можете добавить до 10 соцсетей в один попап. Если у вас подключен чат-бот, подписывает на него и запускает цепочки.
Выберите иконку соцсети и введите текст на кнопке.
В следующем поле добавьте ссылку на соцсеть. Для Telegram, WhatsApp, Instagram и Facebook Messenger можно еще выбрать подключенный бот и цепочку, которая запустится после перехода в бот.
Текст
Отображает текст для посетителей сайта. Вы можете добавить сообщение, которое соответствует ситуации и вовлечет потенциальных клиентов во взаимодействие с попапом.
К примеру, если посетитель посмотрел страницу продукта более трех раз, сообщение во всплывающем попапе поможет ему сделать выбор, а вам — закрыть продажу. Тем, кто находится на странице доставки и оплаты, виджет поможет рассчитать стоимость доставки товара.
Введите и отформатируйте текст. Дополнительно вы можете добавить ссылки и эмодзи, а также персонализировать сообщения с помощью переменных. Нажмите {} и выберите созданную переменную.
Например, можно обратиться к посетителям по имени, предоставлять уникальные скидочные купоны, делиться рекомендациями на основе прошлых заказов или просмотров, сообщать о незаконченном заказе или передавать другие данные из вашей системы.
Дропдаун
Элемент, в котором пользователь сможет выбрать одно значение из выпадающего списка. К примеру, приоритетную категорию товаров.
В поле Переменная выберите или создайте переменную, в которую нужно сохранить значения.
Для каждого варианта в поле Текст введите текст, который будет видеть посетитель, а в поле Значение выберите значение, которое будет записано в соответствующую переменную.
Также вы можете отметить вариант, который будет выбран по умолчанию при показе попапа.
Чтобы добавить дополнительные варианты, нажмите Добавить опцию (+Add option).
Кнопка
Нажатие на кнопку передает данные заполненных полей в раздел Контакты и, если настроите соответствующие действия, — в Email и CRM сервисы.
Введите текст кнопки и выберите действие по клику на кнопку: Закрыть модальное окно (Close modal window) или Открыть URL (Open URL). Если выбрали второй вариант, в следующем поле вставьте ссылку.
Рекомендуем учитывать размеры вашего попапа и писать название кнопки призыва к отправке максимально сжато и понятно.
Чтобы изменить цвет кнопки, нажмите на пиктограмму, выберите цвет с помощью ползунков и нажмите Сохранить. Чтобы вернуться к изначальному цвету под стиль попапа — перейдите в раздел Стиль, и заново выберите цвет попапа.
Изображение
Добавляет дополнительный медийный элемент. В отличие от элемента Обложка, элемент Изображение не заполняет пространство.
Нажмите Загрузить изображение и выберите его из файлового менеджера.
Выберите размер изображения: меньше или больше.
Также вы можете добавить к изображению любую ссылку. Для этого активируйте опцию Открыть URL (Open URL) и вставьте нужную ссылку. Тогда если посетитель нажмет на изображение, ему откроется добавленная вами ссылка.
Радиокнопки
Элемент, в котором пользователь сможет выбрать одно значение с помощью радиокнопок.
В поле Переменная выберите или создайте переменную для сохранения значения.
Для каждого варианта в поле Текст введите текст, который будет видеть посетитель, и в поле Значение выберите значение, которое будет записано в соответствующую переменную.
Также вы можете отметить вариант, который будет выбран по умолчанию при показе попапа.
Чтобы добавить дополнительные варианты, нажмите +Add option (Добавить опцию).
Чекбокс
Элемент с текстом, который посетитель может отметить галочкой. К примеру, так вы можете добавлять подтверждение согласия на обработку данных.
В поле Переменная выберите или создайте переменную,чтобы сохранить в нее значения. Когда пользователь отметит чекбокс, в переменную типа Строка будет передан текст поля.
Еще можно добавить заголовок и сделать поле обязательным. Пользователь не сможет отправить форму без отметки чекбокса.
Мультивыбор
Элемент, в котором пользователь сможет отметить несколько значений в чекбоксах. В отличие от элементов Дропдаун, Радиокнопки и Чекбокс, где пользователь может выбрать только одно значение.
В поле Переменная выберите или создайте переменную для сохранения значения. Данные со всех вариантов будут записываться в одну переменную как массив значений.
Для каждого варианта в поле Текст введите текст, который будет видеть посетитель, и в поле Значение выберите значение, которое будет записано в соответствующую переменную.
Чтобы добавить дополнительные варианты, нажмите +Add option (Добавить опцию).
NPS-опрос
Элемент со шкалой оценки, с помощью которой пользователь может дать обратную связь.
В поле Переменная выберите или создайте переменную для сохранения значения. Значения будут передаваться в виде цифр или слов — в зависимости от выбранного формата.
Выберите формат оценки: звездочки, смайлики, сердечки, лайк/дизлайк или цифровые значения.
Вы также можете активировать поле ввода комментария к оценке и выбрать его размер.
Читайте подробнее: Как создать NPS-форму.
Цепочка
Запускает другой попап и используется для создания цепочек.
Выберите попап, который нужно открыть и добавьте название кнопки, которая его откроет. Чтобы добавить больше кнопок запуска попапов, добавьте еще элемент.
Вы также можете выбрать цвет кнопки.
Читайте подробнее: Как создать сценарий цепочки для попапов.
Курсы
Отображает пользователю форму оплаты за курс. При выборе элемента в попапе появляются поля для ввода контактных данных студента и кнопка, которая перенаправляет на страницу оплаты.
Выберите курс и метод оплаты. Также вы можете добавить возможность применения студентом промокода при оплате — для этого активируйте переключатель Спрашивать промокод (Ask for a promo code) и настройте отображение чекбокса.
Выберите воронку и статус воронки, в которую нужно сохранить сделку с каждым студентом, который оплатил. По умолчанию в название сделки добавляется название попапа.
Читайте подробнее: Как настроить оплату в попапе.
Управление элементами
Чтобы вернутся к списку элементов, на панели сверху нажмите на иконку (Элементы).
Чтобы удалить элемент, во вкладке Элементы нажмите на иконку корзины напротив.
Чтобы изменить порядок отображения полей или элементов, наведите слева на иконку, зажмите ее и перетащите в соответствующее место сверху или снизу. Вы можете перемещать все элементы, кроме элемента Обложка.
Дополнительные элементы
Также вы можете создать попап типа Видео и Лаунчер. Можно выбрать эти типы на этапе выбора шаблона или во вкладке Стиль и настроить отображение во вкладке Элементы.
Видео
Воспроизводит видео по выбранному сценарию.
Вставьте ссылку на видео на YouTube и выберите формат отображения: горизонтальный или вертикальный.
Выберите сценарий проигрывания видео:
| Автопроигрывание (Autoplay) | Видео начнет воспроизводиться после любого действия пользователя на странице. |
| По клику (Click-to-play) |
При показе попапа будет отображаться превью, а воспроизведение видео начнется после клика на попап. На мобильных устройствах видео попапы всегда воспроизводятся по клику, чтобы не быть навязчивыми. |
Выберите расположение видео относительно края экрана.
Выберите действие попапа:
| Без действия (Without action) | В попапе будет отображаться только видео. |
| Призыв к действию (Call to action) | В попап будет добавлена кнопка. Введите название кнопки и выберите, что делать по клику: закрыть попап или перейти на сайт. Если выбрали второй вариант, вставьте URL. |
Лаунчер
Маленький статический блок в виде иконки, закрепленной в выбранном углу страницы. При нажатии на него запускается определенное действие: открытие другого попапа или переход на указанную страницу сайта.
Выберите действие попапа: открыть попап или перейти по ссылке.
Настройте стиль попапа: выберите фон и радиус скругления иконки. Также можете добавить границу, изменить цвет и выбрать ее тип.
Можно выбрать иконку на этапе выбора шаблона попапа или загрузить свою. Чтобы загрузить свою, нажмите на иконку карандаша и выберите изображение из менеджера файлов.
Читайте подробнее: Как создать попап лаунчер.
Настройте внешний вид
Чтобы перейти настройке внешнего вида, нажмите на иконку первой вкладки (Стиль). В этом разделе вы можете настроить тип, стиль попапа и добавить анимацию при появлении или закрытии попапа.
Тип
Вы можете выбрать следующие типы по внешнему виду виджета:
| Тип попапа | Описание | Настройки стиля |
| Плавающий (Floating) | Плавающий блок, зафиксированный слева или справа в окне браузера при прокрутке страницы. Не мешает взаимодействовать с контентом. | Внешний вид настраивается во вкладке Стиль. Читайте подробнее в разделе Стиль. |
| Модальное окно (Modal window) | Блок, расположенный по центру страницы. Контент вне блока затемнен и не кликабельный. Для взаимодействия с контентом нужно закрыть модальное окно. | |
| Перекрывающий (Overlay) | Блок, который перекрывает всю страницу сайта. Для взаимодействия с контентом нужно закрыть окно попапа. | |
| Горизонтальный (Horizontal) | Горизонтальный блок, который можно зафиксировать сверху или снизу страницы. Не мешает взаимодействовать с контентом. | |
| С видео (Video) |
Блок, который воспроизводит видео с YouTube. По настройке попапа читайте подробнее: Видео. |
Внешний вид настраивается во вкладке Элементы. |
| Лаунчер (Launcher) |
Маленький статический блок в виде иконки, закрепленной в выбранном углу страницы. При нажатии на него запускается действие (открыть попап или перейти по ссылке). По настройке попапа читайте подробнее: Лаунчер. |
Стиль
Вы можете настроить следующие параметры для внешнего вида элементов всплывающего окна:
Стили применяются ко всем параметрам элементов. Также можно задать их индивидуально для каждого элемента. Для этого перейдите в настройки выбранного элемента.
| Расположение (Position) | Изменяет расположение всплывающего окна на странице относительно края экрана.
Применяется для типа Стандартный и Горизонтальный. Для других типов окна они будут располагаться посередине экрана. |
| Ширина (Width) | Изменяет ширину всплывающего окна. Вы можете перетащить регулятор или указать значение в пикселях. |
| Внутренний отступ (Inner padding) | Изменяет внутренний отступ элементов во всплывающем окне. Вы можете перетащить регулятор или указать значение в пикселях. |
| Стиль (Style) | Изменяет цвет элементов всплывающего окна.
Выберите цветовую схему — белая, темная или цветная. Она распространяется на чекбоксы, иконки в форме NPS и все типы кнопок во всплывающем окне. |
| Фоновое изображение (Background image) |
Изменяет фон попапа на картинку. Она распределяется по всему периметру попапа и не влияет на добавленные элементы, такие как Изображение или Обложка. Нажмите Загрузить изображение и выберите картинку из файлового менеджера. |
| Размер полей (Field size) | Изменяет размер всех элементов в форме. Доступные варианты: маленький (S), средний (M) и большой (L). |
Анимация
Также вы можете настроить анимацию на появление и при закрытии попапа:
| Анимация при появлении попапа (Entrance animation) | Попап показывается с выбранным эффектом после того, как выполняться условия показа попапа. |
| Анимация при закрытии попапа (Exit animation) |
Попап закрывается с выбранным эффектом после того, как пользователь нажал на кнопку или на крестик для закрытия попапа. Элементы с кнопками для отправки формы: Мессенджер, Кнопка, Цепочка и Курсы. |
Под каждым типом анимации выберите с какой стороны экрана будет появляться попап.
Вы можете выбрать следующие анимационные эффекты: вылет, подпрыгивание, проявление из прозрачности, вращение вокруг оси, ускоренное появление, переворот, изменение масштаба и выезжание.
Чтобы просмотреть, как выглядит эффект, выберите его. Для повторного воспроизведения эффекта нажмите на иконку стрелки.
Предпросмотр
В режиме реального времени, по мере редактирования попапа в рабочей области, вы можете смотреть, как он будет отображаться на сайте. Чтобы посмотреть, как попап отображается в мобильной версии, нажмите на соответствующий значок справа.
После того, как закончили настраивать дизайн попапа, нажмите Дальше (Next).
Настройте условия показа
В следующей вкладке Условия показа (Display conditions) вы можете настроить сценарий показа виджета по клику на лаунчер или по наступлению условия по отслеживанию поведения посетителей.
Чтобы попап отображался по клику на лаунчер, активируйте тумблер и выберите предварительно созданный попап с типом Лаунчер.
Чтобы попап отображался по сценарию, выберите событие, которое нужно отслеживать в поведении посетителя сайта, оператор условия и введите отслеживаемое значение. Также можно выбирать несколько условий и связывать их операторами.
К примеру, вы можете выбрать отображать виджет только тогда, когда пользователь совершает определенное действие: прокручивает страницу до определенной части или проводит на сайте больше 40 секунд.
Читайте подробнее: Как настроить сценарий показа попапа и Как создать попап лаунчер.
Когда настроите сценарий показа попапа, нажмите Дальше (Next).
Настройте сохранение данных
В следующей вкладке Сохранение данных (Data saving) вы можете выбрать, где хранить данные подписчиков в других сервисах.
Активируйте соответствующий переключатель* и выберите, куда сохранять:
| Сохранить в адресную книгу (Save to a mailing list) |
Сохраняет контакт с данными в выбранную адресную книгу в Email сервис. Название переменной возьмется из названия поля или элемента, а значение — из заполненого поля или отмеченного посетителем элемента попапа. Выберите адресную книгу, в которую будете сохранять контакт. |
| Создать сделку в CRM (Create a deal in CRM) |
Сохраняет данные в виде сделки и контакта в CRM. Выберите воронку, введите название и статус сделки. При сохранении данных контактов в CRM создаются новые поля контакта. |
| Присылать email уведомления о новых подписчиках (Send an email notification about new subscribers) |
Отправляет письмо о каждом новом подписчике. Введите почту, на которую отправлять уведомления. |
*Вы можете сохранять значение только с попапов, где собираете данные пользователей. Если у вас нет элементов Поле ввода, Дропдаун, Мультивыбор, Радиокнопка, Чекбокс, NPS и Курсы, то переключатели будут неактивны.
Задайте название попапа
По умолчанию название попапа берется из даты и времени, когда создается попап. Чтобы изменить его, нажмите на соответствующую иконку, введите свой текст и нажмите Enter.
Опубликуйте попап
Когда настроите попап, нажмите Сохранить и опубликовать (Save and publish) или Сохранить и закрыть.
Чтобы изменения отобразились и вы могли все проверить в своем браузере, после сохранения очистите кэш и куки браузера.
Все попапы отображаются в разделе Попапы (Pop-ups) в отдельных вкладках. После создания вы можете посмотреть внешний вид попапа, отслеживать статистику и отредактировать любую настройку.
Обновлено: 29.03.2024
или