Контент веб-попапов

Контент веб-попапа — это визуальный макет, который посетители видят, когда на вашем сайте появляется веб-попап. Создайте его в разделе «Контент», а затем прикрепите к кампании веб-попапов.

Создание контента для веб-попапа

1. Перейдите в Контент → Контент веб-попапов.
2. Нажмите Создать контент веб-попапа.
3. Выберите стартовый шаблон из галереи. Используйте выпадающий список категорий в правом верхнем углу, чтобы отфильтровать по варианту использования (например, Акции и предложения, Игры и маркетплейсы или Обратная связь и опросы), или оставьте Все шаблоны. Категория Пустые макеты содержит простые отправные точки, включая Модальное окно + форма подписки, в котором уже есть блок формы подписки.

4. После выбора шаблона настройте попап в редакторе.

Название попапа

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

Редактирование настроек попапа

Настройте внешний вид и положение попапа в панели настроек слева от холста:

Примечание

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

Изображения и видео

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

Нажмите Изменить изображение, чтобы выбрать файл из хранилища медиафайлов вашего проекта, или установите Медиа в значение Видео, чтобы воспроизводить видео вместо статического изображения.

Под предпросмотром:

• Медиа: Изображение или Видео.
• Заполнение: как изображение или постер заполняет свой кадр: Естественный, Заполнение или Вместить. Не отображается для фонового изображения, которое всегда покрывает свою область.
• Размытие: смягчение изображения или постера от 0 до 20 пикселей.
• Затемнение: только для фоновых медиа. Добавляет темную подложку поверх изображения или видео, чтобы текст, размещенный поверх, оставался читаемым, от 0 до 100%.

Установка Медиа в Видео добавляет еще четыре поля:

• URL видео: прямая ссылка на видеофайл. Видео принимает только внешний URL. Вы не можете загрузить видео в хранилище медиафайлов. Экспортируйте его в формате MP4 (видео H.264, аудио AAC) с включенной опцией «быстрый старт» (иногда называемой «оптимизировано для веба»), чтобы браузер мог начать воспроизведение до полной загрузки файла. Если URL не загрузится, посетители увидят только постер.
• Зациклить: непрерывное воспроизведение видео вместо остановки после одного проигрывания.
• Показывать элементы управления: отображение встроенных в браузер элементов управления воспроизведением, паузой и громкостью. Видео всегда начинается без звука, и без этой опции у посетителей нет возможности включить звук.
• URL постера: изображение, которое показывается во время загрузки видео. Это необязательно, но рекомендуется: это также единственное, что увидит посетитель, чей браузер все еще использует старый скрипт попапов, не поддерживающий видео, поэтому если оставить это поле пустым, посетитель ничего не увидит там, где должно быть видео.

Некоторые макеты также добавляют раздел Макет с настройками размещения медиаблока:

• Ширина изображения: доля ширины попапа в процентах.
• Позиция изображения: Слева или Справа, для макетов с медиа рядом с текстом.

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

Размер и стиль попапа

В разделе Попап:

• Ширина, Высота (пусто = авто): оставьте оба поля пустыми для попапа, который сам подбирает размер под свой контент, или установите фиксированный размер в пикселях. В попапе с несколькими страницами у каждой страницы свой размер.
• Радиус скругления углов, Тень: скругление углов и тень попапа.
• Анимация: как появляется попап: Нет, Появление или Выдвижение.

Цвета

Нажмите Цвета, чтобы развернуть цветовую палитру попапа:

• Фон, Акцент (кнопки): фон попапа и акцентный цвет, применяемый к кнопкам.
• Текст, Второстепенный текст: цвет основного текста и второстепенного текста, такого как подписи и надзаголовки.
• Текст поверх изображения: отображается только для макетов с текстом поверх фонового изображения. Устанавливает цвет, используемый для этого текста.

Тёмный режим

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

После включения Тёмного режима:

• Используйте переключатель Светлый / Тёмный над полями цветов, чтобы выбрать, какую палитру вы редактируете. Холст перерисовывается в этой схеме, чтобы вы могли проверить, как попап будет выглядеть в каждом режиме.
• Нажмите Авто из светлого, чтобы (пере)создать тёмную палитру из текущих светлых цветов: поверхности становятся тёмными, а текст — светлым, в то время как Акцент и Текст поверх изображения переносятся без изменений. После этого отредактируйте любое из пяти полей, чтобы доработать результат.
• Выключение Тёмного режима не отменяет тёмную палитру — она сохраняется, поэтому при повторном включении ваши правки восстанавливаются, а не генерируются заново.

Браузер посетителя решает, какую палитру он увидит, на основе настроек тёмного режима на уровне ОС — на самом попапе нет переключателя тёмного/светлого режима. Сайт может принудительно установить одну схему для всех независимо от настроек ОС; см. webPopups.colorScheme в документации Web SDK.

Размещение и наложение

В разделе РАЗМЕЩЕНИЕ:

• Позиция: выберите, где попап будет привязан на странице, используя сетку 3×3.
• Отступ от края: установите расстояние в пикселях от выбранного края.

В разделе НАЛОЖЕНИЕ:

• Затемнять страницу позади: включите, чтобы затемнить остальную часть страницы, пока показан попап.
• Цвет, Прозрачность: установите цвет и прозрачность наложения от 0 до 1.

Редактирование текста

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

• Применить жирный, курсивный или подчеркнутый формат.
• Добавить или удалить ссылку.
• Установить выравнивание по левому краю, по центру или по правому краю.
• Выбрать стиль текста: Иконка, Надзаголовок, Заголовок 1–3, Основной текст или Подпись.

Редактирование кнопок

Нажмите на кнопку, чтобы открыть ее панель инструментов:

• Выберите стиль кнопки: Основной или Второстепенный.
• Выберите действие кнопки:
  • Открыть ссылку: введите целевой URL.
  • Закрыть попап.
  • Перейти на страницу: выберите другую страницу попапа для перехода. Эта опция появляется, когда у попапа есть более одной страницы. См. Работа с несколькими страницами.

Совет

Когда выделен текстовый блок, кнопка или другой элемент, нажмите Добавить на его панели инструментов и выберите Текст, Кнопка, Иконка, Обратный отсчет, Выбор тем, Рейтинг или Форма подписки, чтобы вставить этот блок под ним. Используйте стрелки вверх и вниз, чтобы перемещать его по странице, и иконку удаления, чтобы удалить его. Последний оставшийся элемент на странице удалить нельзя.

Когда в разделе попапа нет элементов, он показывает только кнопки + Текст, + Кнопка и + Форма. Чтобы добавить блок иконки, обратного отсчета, выбора тем или рейтинга, сначала добавьте туда текст или кнопку, а затем используйте его меню Добавить.

Добавление формы подписки

Добавьте блок Форма подписки, чтобы собирать подписки на email и другие поля прямо в попапе. Узнайте больше о формах подписки.

Добавление блока

1. Выберите текстовый блок, кнопку или другой элемент на холсте.
2. Нажмите Добавить на его панели инструментов.
3. Выберите Форма подписки. Блок сразу же появится с полем Email и кнопкой Подписаться по умолчанию.

Выбор источника формы

Нажмите на блок формы подписки, чтобы открыть панель инструментов ФОРМА. Ее первый выпадающий список связывает блок с формой подписки в вашем проекте. Вы можете создать новую форму или выбрать уже существующую:

Опция	Когда использовать
Новая форма — создается при сохранении (по умолчанию)	Самый быстрый старт: Pushwoosh создает форму для вас, когда вы сохраняете попап, с названием «название попапа — веб-попап».
+ Создать новую форму…	Вы хотите назвать форму и настроить ее до сохранения попапа. Открывается диалоговое окно Новая форма подписки — введите Название, затем настройте Поля, текст Отправки и Конфиденциальность так же, как описано ниже, и нажмите Создать.
Существующая форма из выпадающего списка	Повторно использовать форму, у которой уже есть подписчики или настроено двойное подтверждение.

Важно

Если вы выберете существующую форму из выпадающего списка, сохранение этого попапа обновит эту форму подписки для всего проекта. Поля, текст кнопки отправки и сообщения об успехе, которые вы установите в этом блоке, заменят то, что было в этой форме ранее. Это включает форму, встроенную на вашем сайте, и форму в Аудитория → Формы подписки.

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

Настройка полей и поведения при отправке

1. Установите Стиль кнопки отправки в панели инструментов ФОРМА:
   • Основной: залитая кнопка в акцентном цвете попапа. Лучше всего подходит, когда Подписаться является основным действием на странице.
   • Второстепенный: кнопка с контуром и рамкой, а также надписью акцентного цвета. Лучше всего подходит, когда у попапа уже есть основная кнопка или вы хотите более легкий вид.
2. Включите Конфиденциальность, чтобы добавить строку о согласии с политикой конфиденциальности под формой, затем введите URL вашей политики конфиденциальности в появившемся поле.

3. Нажмите Поля…, чтобы открыть всплывающее окно, где вы можете оставить Email (всегда обязательное поле) и добавить Имя, Фамилия, Телефон или Пользовательское поле, а также установить тексты Успех и Подтвердите email, которые показываются после отправки формы посетителем.

Добавление обратного отсчета

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

1. Выберите текстовый блок, кнопку или другой элемент на холсте.
2. Нажмите Добавить на его панели инструментов и выберите Обратный отсчет.
3. Нажмите на обратный отсчет, чтобы открыть его панель инструментов:
   • Дедлайн: дата и время, когда обратный отсчет достигнет нуля.
   • Часовой пояс: зона, в которой считывается дедлайн. Оставьте пустым для UTC.
   • Язык: язык подписей единиц времени (дни, часы и т.д.). Оставьте Английский (по умолчанию) или выберите из 13 других языков.
   • Подписи: включите, чтобы показывать подписи единиц времени рядом с числами.
   • Когда дедлайн пройдет:
     • Показывать нули: обратный отсчет продолжает показывать 00:00:00.
     • Не показывать попап: весь попап пропускается, как только дедлайн наступил.
     • Перейти на страницу: перейти на другую страницу попапа, когда дедлайн пройдет. Предлагается только после того, как у попапа появится более одной страницы — выберите целевую страницу из появившегося выпадающего списка. См. Работа с несколькими страницами.

Примечание

Дедлайн считывается в выбранном вами часовом поясе, а не в часовом поясе посетителя — так же, как и в блоке обратного отсчета в редакторе email. Оставьте поле пустым, и дедлайн будет считываться как UTC.

Примечание

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

Добавление иконки

Добавьте блок Иконка, чтобы разместить небольшую пиктограмму — знак процента для распродажи, подарок для дропа — рядом с вашим текстом.

1. Выберите элемент, нажмите Добавить и выберите Иконка.
2. Нажмите на иконку, чтобы открыть ее панель инструментов:
   • Иконка: выберите из фиксированного набора из 20 иконок (колокольчик, подарок, корзина, диаграмма, замок, календарь, галочка, звезда, часы, тег, почта, телефон, загрузка, воспроизведение, щит, искра, процент, грузовик, билет, пользователь). Загрузка пользовательских иконок не поддерживается.
   • Размер: 24, 32 или 48 пикселей.
   • Акцент: включен по умолчанию, поэтому иконка соответствует акцентному цвету попапа. Выключите, чтобы выбрать пользовательский цвет.

Добавление выбора тем

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

Добавление блока и привязка тега

1. Выберите элемент, нажмите Добавить и выберите Выбор тем. Он появится с двумя опциями-заполнителями и без привязанного тега — он ничего не будет записывать, пока вы его не выберете.
2. Нажмите на блок, чтобы открыть его панель инструментов. Первый выпадающий список связывает его с тегом типа «Список» в вашем проекте — выберите существующий или выберите Создать тег-список, чтобы создать его, не выходя из редактора.

Настройка опций и ограничений

Все еще в панели инструментов:

• Элемент управления: показывать опции в виде Чекбоксов или Плашек.
• Минимум / Максимум выборов: сколько опций посетитель должен или может выбрать. 0 на любом конце означает отсутствие ограничения — хотя для отправки всегда требуется хотя бы один выбор, даже если минимум равен 0. Выбор больше максимума или попытка отправить меньше минимума показывает встроенное сообщение рядом с блоком вместо отправки чего-либо.
• Нажмите Опции, чтобы открыть панель опций:
  • Отредактируйте Надпись каждой опции (что читает посетитель) и Значение тега (что записывается в тег). Оставьте Значение тега пустым, и Pushwoosh запишет внутренний ID опции (option-1, option-2 и т.д.) — заполните его, если вам нужно читаемое значение в теге.
  • + Опция добавляет еще одну строку, всего до 12 опций.
  • Установите Надпись на кнопке и Сообщение после отправки.

Выбор только добавляет, но никогда не удаляет

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

Добавление рейтинга

Добавьте блок Рейтинг, чтобы собрать быструю оценку — NPS, звезды или пальцы вверх/вниз — в виде пользовательского события.

Добавление блока и настройка события

1. Выберите элемент, нажмите Добавить и выберите Рейтинг. Он появится без установленного события — он ничего не будет отправлять, пока вы его не выберете.
2. Нажмите на блок, чтобы открыть его панель инструментов и выбрать Событие из существующих событий вашего проекта, или выберите Создать событие, чтобы определить новое, не выходя из попапа — Pushwoosh настроит его с атрибутами score, scale и slotKey, которые отправляет блок. Оценка отправляется в Pushwoosh как это событие — используйте его в сегментах или Customer Journeys так же, как и любое другое событие.

Создание события здесь является постоянным

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

Если событие, привязанное к блоку, позже будет переименовано или удалено в другом месте — или было введено в это поле до того, как оно стало выпадающим списком — список покажет его как Отсутствует: <название события> вместо того, чтобы молча удалить или заменить его. Выберите другое событие, чтобы исправить привязку.

Настройка шкалы

Все еще в панели инструментов:

• Шкала: NPS 0–10, Звезды (от 1 до 5) или Пальцы вверх/вниз.

Примечание

Во всех трех шкалах более высокая оценка всегда означает более положительный рейтинг — «Пальцы вверх/вниз» отправляет 1 за палец вверх и 0 за палец вниз.

• Когда отправляется оценка: При нажатии отправляет оценку в тот момент, когда посетитель выбирает значение. С кнопкой ждет, пока он также нажмет кнопку отправки — установите ее надпись после выбора этой опции.
• Необязательные надписи на двух концах шкалы и Сообщение после отправки.

Работа с несколькими страницами

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

Добавление страницы

Нажмите + Добавить страницу, чтобы открыть меню добавления страницы:

• Дублировать текущую страницу: копирует активную страницу, включая все внесенные вами изменения, как новую страницу. Если на исходной странице есть форма подписки, копия создается без нее — в попапе может быть только одна.
• Выберите один из одностраничных макетов, чтобы добавить новую страницу с демонстрационным контентом этого макета. Новая страница независима от других, поэтому она может использовать другой макет. Модальное окно + форма подписки — один из таких макетов, он поставляется с уже установленным блоком формы подписки.

Примечание

В веб-попапе может быть только одна форма подписки. Как только на какой-либо странице она уже есть, Модальное окно + форма подписки исчезает из этого меню.

Примечание

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

Каждая вкладка — это одна страница. Нажмите на вкладку, чтобы переключиться на нее.

Установка стартовой страницы

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

Удаление страницы

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

Примечание

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

Сохранение контента

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

Примечание

Сохранение контента не показывает веб-попап на вашем сайте. Контент появляется на сайте только после того, как вы выберете его в кампании веб-попапов и запустите кампанию.

Использование контента в кампании

После сохранения контент появится в Контент → Контент веб-попапов. Откройте его из списка, чтобы продолжить редактирование.

Чтобы показать его на сайте, перейдите в Кампании → Веб-попапы, создайте или отредактируйте кампанию и выберите этот контент на шаге Контент.

Затем настройте аудиторию, параметры отображения, частоту и опции запуска. Полный процесс описан в разделе Создание кампаний веб-попапов.