Как создать умный попап
С помощью конструктора попапов вы можете создавать умные попапы, которые показываются посетителям только по заданному сценарию. Делайте персональное предложение в нужное время, помогайте клиенту с выбором услуги или собирайте подписчиков, чтобы продолжить работу с ними в сервисе SendPulse.
Вы можете выбрать готовый шаблон и использовать его в таком виде или отредактировать под свои задачи.
Рассмотрим, как создать виджет из шаблона: настроить внешний вид, элементы и условие показа.
Создайте попап
Вы можете создать попап с нуля или выбрать готовый шаблон и отредактировать его.
Перейдите в нужный проект во вкладку Попапы (Pop-ups) и нажмите Создать попап (Create pop-up).
C нуля
Вы можете собрать попап сами с доступных в конструкторе элементов.
Нажмите Новый попап (New pop-up).
По шаблону
Шаблон — это виджет с предустановленными настройками по набору элементов и внешнему виду. Вы можете выбрать шаблон по праздникам, по типу попапа или с определенным набором элементов.
Выбрать шаблон по праздникам или с набором определенных элементов можно только на этапе выбора шаблона. Если не выбираете шаблон, но хотите создать похожий, посмотрите, из каких элементов состоит пример и выберите их во вкладке Дизайн > Элементы.
Тип попапа есть возможность поменять позже, во вкладке Дизайн > Cтиль.
Выберите справа категорию и слева сам шаблон.
Настройте элементы
После выбора шаблона открывается конструктор попапа во вкладке Дизайн (Design), где вы можете отредактировать его внешний вид и настроить элементы.
Если вы выбрали создать новый попап с нуля нажмите +Добавить элемент (+Add element) и выберите нужный.
Можно добавлять элементы для попапов типа Плавающий, Модальное окно, Перекрывающий и Горизонтальный. Про попапы типа Видео и Лаунчер читайте в секции Дополнительные элементы.
Если выбрали создать попап по шаблону, можно отредактировать имеющиеся элементы. Для этого нажмите на иконку карандаша — и вам откроется вкладка редактирования выбранного элемента.
Также вы можете перейти к редактированию элемента выбрав его на виджете. При наведении на элемент и в режиме редактирования он будет выделен зеленой рамкой.
Подробнее о каждом элементе читайте ниже.
Все элементы необязательные. Можно их добавлять, удалять и миксовать между собой, выбирая только те, которые нужны вам.
Но если вы добавляете элементы, из которых нужно передавать данные (Поле ввода, Дропдаун, Радиокнопка, Чекбокс, Мультивыбор и NPS), тогда в попап обязательно добавьте элемент Кнопка.
Обложка
Отображает картинку как часть дизайна попапа для улучшения визуального восприятия пользователем или привлечения внимания.
Если вы выбирали создать попап с нуля, нажмите Загрузить изображение и выберите его из файлового менеджера.
Чтобы заменить шаблонное изображение, нажмите на карандаш напротив него.
Чтобы загрузить файл в файловый менеджер, нажмите Загрузить файлы. Выберите или перетащите его в область и нажмите Загрузить. Затем закройте модальное окно и кликните нужный.
Выберите положение относительно края попапа: слева, справа, сверху или заполнить весь попап.
В отличие от элемента Изображение, элемент Обложка заполняет все пространство относительно выбранного края.
Поле ввода
Запрашивает у пользователя данные, которые вы можете сохранить в переменные. К примеру, имя, email, телефон, дату рождения и другие.
В поле Переменная выберите или создайте переменную, в которую нужно сохранить значения. Можно сохранять значение со всеми типами данных (Строка, Число, Phone и Email).
В поле Подсказка внутри поля введите текст для плейсхолдера.
Вы также можете автоматически предзаполнять поля попапа, настроить двойное подтверждение о подписке, добавить название и сделать поле обязательным.
Читайте подробнее: Как настроить кастомную форму и Как передавать пользовательские переменные.
Мессенджер
Перенаправляет посетителя на мессенджер выбранной социальной сети. Вы можете добавить до 10 соцсетей в один попап. Если у вас подключен чат-бот, подписывает на него и запускает цепочки.
Выберите иконку соцсети и введите текст на кнопке.
В следующем поле добавьте ссылку на соцсеть. Для Telegram, WhatsApp, Instagram и Facebook Messenger можно еще выбрать подключенный бот и цепочку, которая запустится после перехода в бот.
Текст
Отображает текст для посетителей сайта. Вы можете добавить сообщение, которое соответствует ситуации и вовлечет потенциальных клиентов во взаимодействие с попапом.
К примеру, если посетитель посмотрел страницу продукта более трех раз, сообщение во всплывающем попапе поможет ему сделать выбор, а вам — закрыть продажу. Тем, кто находится на странице доставки и оплаты, виджет поможет рассчитать стоимость доставки товара.
Введите и отформатируйте текст. Дополнительно вы можете добавить ссылки и эмодзи, а также персонализировать сообщения с помощью переменных. Нажмите {} и выберите созданную переменную.
Например, можно обратиться к посетителям по имени, предоставлять уникальные скидочные купоны, делиться рекомендациями на основе прошлых заказов или просмотров, сообщать о незаконченном заказе или передавать другие данные из вашей системы.
Вы также можете редактировать текст как HTML код. Для этого нажмите на три точки и выберите <>. Добавьте HTML код и нажмите Сохранить (Save).
Дропдаун
Элемент, в котором пользователь сможет выбрать одно значение из выпадающего списка. К примеру, приоритетную категорию товаров.
В поле Переменная выберите или создайте переменную, в которую нужно сохранить значения.
Для каждого варианта в поле Текст введите текст, который будет видеть посетитель, а в поле Значение выберите значение, которое будет записано в соответствующую переменную.
Также вы можете отметить вариант, который будет выбран по умолчанию при показе попапа.
Чтобы добавить дополнительные варианты, нажмите Добавить опцию (+Add option).
Кнопка
Нажатие на кнопку передает данные заполненных полей в раздел Контакты и, если настроите соответствующие действия, — в Email и CRM сервисы.
Вы можете добавить кнопку в виде текста или изображения.
Введите текст кнопки или загрузите картинку и выберите действие по клику на кнопку: Закрыть модальное окно (Close modal window) или Открыть URL (Open URL). Если выбрали второй вариант, в следующем поле вставьте ссылку.
Рекомендуем учитывать размеры вашего попапа и писать название кнопки призыва к отправке максимально сжато и понятно.
Чтобы изменить цвет кнопки, нажмите на пиктограмму, выберите цвет с помощью ползунков и нажмите Сохранить. Чтобы вернуться к изначальному цвету под стиль попапа — перейдите в раздел Стиль, и заново выберите цвет попапа.
Ви также можете настроить стиль каждой кнопки чи группы кнопок.
Читайте больше: Как настроить кнопку в попапах.
Изображение
Добавляет дополнительный медийный элемент. В отличие от элемента Обложка, элемент Изображение не заполняет пространство.
Нажмите Загрузить изображение и выберите его из файлового менеджера.
Выберите размер изображения: меньше или больше.
Также вы можете добавить к изображению любую ссылку. Для этого активируйте опцию Открыть URL (Open URL) и вставьте нужную ссылку. Тогда если посетитель нажмет на изображение, ему откроется добавленная вами ссылка.
Радиокнопки
Элемент, в котором пользователь сможет выбрать одно значение с помощью радиокнопок.
В поле Переменная выберите или создайте переменную для сохранения значения.
Для каждого варианта в поле Текст введите текст, который будет видеть посетитель, и в поле Значение выберите значение, которое будет записано в соответствующую переменную.
Также вы можете отметить вариант, который будет выбран по умолчанию при показе попапа.
Чтобы добавить дополнительные варианты, нажмите +Add option (Добавить опцию).
Чекбокс
Элемент с текстом, который посетитель может отметить галочкой. К примеру, так вы можете добавлять подтверждение согласия на обработку данных.
В поле Переменная выберите или создайте переменную,чтобы сохранить в нее значения. Когда пользователь отметит чекбокс, в переменную типа Строка будет передан текст поля.
Еще можно добавить заголовок и сделать поле обязательным. Пользователь не сможет отправить форму без отметки чекбокса.
Мультивыбор
Элемент, в котором пользователь сможет отметить несколько значений в чекбоксах. В отличие от элементов Дропдаун, Радиокнопки и Чекбокс, где пользователь может выбрать только одно значение.
В поле Переменная выберите или создайте переменную для сохранения значения. Данные со всех вариантов будут записываться в одну переменную как массив значений.
Для каждого варианта в поле Текст введите текст, который будет видеть посетитель, и в поле Значение выберите значение, которое будет записано в соответствующую переменную.
Чтобы добавить дополнительные варианты, нажмите +Add option (Добавить опцию).
NPS-опрос
Элемент со шкалой оценки, с помощью которой пользователь может дать обратную связь.
В поле Переменная выберите или создайте переменную для сохранения значения. Значения будут передаваться в виде цифр или слов — в зависимости от выбранного формата.
Выберите формат оценки: звездочки, смайлики, сердечки, лайк/дизлайк или цифровые значения.
Вы также можете активировать поле ввода комментария к оценке и выбрать его размер.
Читайте подробнее: Как создать NPS-форму.
Цепочка
Запускает другой попап и используется для создания цепочек.
Выберите попап, который нужно открыть и добавьте название кнопки, которая его откроет. Чтобы добавить больше кнопок запуска попапов, добавьте еще элемент.
Вы также можете выбрать цвет кнопки.
Читайте подробнее: Как создать сценарий цепочки для попапов.
Курсы
Показывает пользователю форму регистрации на курс. Для платного курса открывает форму оплаты.
Для платного курса активируйте опцию Регистрировать на платный курс (Enroll users in a paid course), выберите курс и способ оплаты. Также вы можете добавить возможность применения студентом промокода при оплате – для этого активируйте опцию Спрашивать промокод (Ask for a promo code) и настройте показ чекбокса.
Для бесплатного курса выключите опцию Регистрировать на платный курс (Enroll users in a paid course) и выберите курс для регистрации.
Для любого курса выберите воронку и ее статус, в которую нужно сохранять сделку с каждым студентом. По умолчанию к названию сделки добавляется название попапа.
После ввода данных студент будет записан на курс или перенаправлен на страницу оплаты.
Читайте подробнее: Как записать студентов на курс через попап.
Комментарий
Это элемент, в котором пользователь может оставить текст до 5000 символов. Это позволяет пользователю оставлять комментарии непосредственно на странице, способствуя обратной связи и улучшению взаимодействия с аудиторией вашего сайта.
В поле Переменная (Variable) выберите или создайте переменную, в которой нужно сохранить значение. В поле Подсказка внутри поля (Placeholder text) введите текст подсказки.
Опционально вы можете включить переключатель Показывать заголовок (Display title) и ввести заголовок для этого поля. Выберите размер поля: маленький (S), средний (M) или большой (L).
Видео
Это элемент, который отображает видео на попапе. В отличии от типа попапа Видео, эта опция позволяет комбинировать видео с другими элементами конструктора в выбранном типе попапа.
Вставте ссылку на YouTube видео в поле Ссылка.
Конструктор принимает ссылки только на YouTube видео.
Настройте стиль отображения видео:
Ориентация (Orientation) | Выберите горизонтальную или вертикальную ориентацию. |
Размер (Size) | Выберите больший или меньший размер видео. Больший размер видео достигается удалением рамки вокруг видео в попапе. |
Варианты воспроизведения (Playback option) | Выберите сцнарий воспроизведения видео: автопроигрывание или воспроизведение по клику. |
Звук (Sound) | Выберите, будет ли выше видео проигрываться с автоматически включенным звуком. |
Колесо
Добавляет к попапу рулетку, которую посетитель сайта может вращать и участвовать в розыгрышах.
Выберите или создайте переменную, куда будут храниться результаты вращения колеса. Добавьте сектора и настройте внешний вид. Установите вероятность выпадания секций, добавьте текст и выберите расположение колеса относительно попапа.
Читайте подробнее: Как настроить рулетку в попапах.
Таймер
Показывает, сколько времени осталось до события, например, до окончания акции или начала курса.
Выберите режим работы таймера.
Фиксированная дата и время окончания |
Таймер будет отсчитывать указанное время до определенной даты. Нажмите на поле и выберите дату окончания события и часовой пояс календаря. В секции Часовой пояс выберите, по какому часовому поясу должен работать таймер: в соответствии с временной зоной, выбранной в вашем аккаунте, или в соответствии с временной зоной посетителя сайта. |
Динамическая дата и время окончания |
Таймер будет отсчитывать указанное время для каждого посетителя сайта с момента показа попапа. Выберите время работы таймера с момента запуска. |
В секции Параметры даты выберите количество показателей таймера – для этого ограничьте их с помощью бегунка (от дней до секунд).
В секции Внешний вид выберите дизайн таймера.
Ниже настройте цвет текста, размер (S, M или L) и выравнивание (слева, по центру или справа).
Галерея
Показывает посетителю изображения поочередно в режиме слайд-шоу или по клику.
Нажмите Добавить обложку, чтобы добавить первое изображение и выберите его из менеджера файлов. Чтобы загрузить следующие изображения, нажмите Добавить слайд (Add slide).
Настройте показ в следующих секциях.
Скругление (Rounding) | Введите закругление углов в пикселях для всех изображений. |
Размер (Size) |
Выберите масштаб: горизонтальная картинка, квадрат или вертикальная. Изображение будет сжиматься, поэтому загружайте соответствующие изображения или выбирайте средний (квадратный) размер. |
Автоматически менять слайды (Automate slide transition) |
Активируйте опцию, чтобы картинки перелистывались автоматически, без участия посетителя сайта. В разделе ниже выберите периодичность в секундах. |
Положение (Position) | Выберите расположение элемента относительно краев попапа: с отступами или без. |
Также на размер элемента Галерея влияет размер самого попапа, который можно настроить отдельно.
Аккордеон
Добавляет пространство, которое можно заполнить другими элементами. Вы можете использовать Аккордеон, чтобы скрыть определенные элементы попапа. По нажатию пользователь сможет развернуть его и увидеть скрытые элементы.
Настройте стиль аккордеона, выбрав его Внешний вид, Цвет кнопки и Цвет разделителя.
Для добавления элементов нажмите + Добавить элемент (+ Add element). Вы вернетесь к вкладке Элементы (Elements). В разделе Аккордеон нажмите + Добавить элемент и выберите нужные элементы.
Вы также можете перетащить уже созданные элементы в секцию Аккордеон на вкладке Элементы, чтобы переместить их в аккордеон.
Загрузка файла
Добавляет зону, куда пользователи могут загружать файлы из своих устройств. Вы можете использовать элемент Загрузка файла когда ожидаете от клиентов определенные документы, например, уникальные ваучеры на скидку.
Настройте элемент:
Поддерживаемый тип (Supported file type) | Выберите Изображение, Документ, Видео или несколько типов одновременно.
Все файлы, загруженные пользователями, хранятся в их карточке контакта CRM в секции Файлы. |
Максимально допустимый размер (Maximum allowed size) | Выберите максимальный размер файла для загрузки, до 25 Мб. |
Текст формы (Form text) | Введите показываемый текст в зоне загрузки. |
Цвет поля (Field color) | Выберите цвет элемента или оставьте его по умолчанию. |
Рекомендуется добавлять элемент Поле ввода вместе с элементом Загрузка файла, чтобы корректно добавлять контакты в CRM.
Управление элементами
Чтобы вернутся к списку элементов, на панели сверху нажмите на иконку (Элементы).
Чтобы удалить элемент, во вкладке Элементы нажмите на иконку корзины напротив.
Чтобы изменить порядок отображения полей или элементов, наведите слева на иконку, зажмите ее и перетащите в соответствующее место сверху или снизу. Вы можете перемещать все элементы, кроме элемента Обложка.
Дополнительные элементы
Также вы можете создать попап типа Видео и Лаунчер. Можно выбрать эти типы на этапе выбора шаблона или во вкладке Стиль и настроить отображение во вкладке Элементы.
Видео
Воспроизводит видео по выбранному сценарию.
Вставьте ссылку на видео на 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). |
Иконка закрытия
Отрегулируйте внешний вид иконки закрытия.
Нажмите Настройки (Settings) и выберите стиль иконки, цвет, размер в пикселях, расположение справа или слева и позицию относительно самого попапа: полностью в пределах виджета, частично за его пределами или полностью вне окна.
Анимация
Также вы можете настроить анимацию на появление и при закрытии попапа:
Анимация при появлении попапа (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) в отдельных вкладках. После создания вы можете посмотреть внешний вид попапа, отслеживать статистику и отредактировать любую настройку.
Обновлено: 09.10.2024
или