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

Справочник по каждому блоку, который можно добавить на макет веб-попапа из вкладки Elements.

Каждый тип блока служит разной цели в попапе:

• Текст: текст на попапе с форматированием и стилями.
• Кнопка: призыв к действию, который открывает ссылку, закрывает попап, запрашивает разрешение на веб-пуши или переходит на другую страницу.
• Иконка: небольшая пиктограмма рядом с текстом.
• Обратный отсчет: таймер с живым отсчетом до дедлайна.
• Выбор тем: чекбоксы или чипсы, которые записывают интересы в тег.
• Рейтинг: оценка NPS, звезды или лайки/дизлайки, отправляемая как событие.
• Форма подписки: подписка по email и другие поля формы.

Как настраивать блоки контента

1. Откройте вкладку Elements справа.

2. Перетащите плитку на попап или кликните по ней, чтобы добавить ее на страницу.
   • Клик вставляет блок под выделенным элементом на холсте.
   • Если ничего не выделено, блок добавляется в конец первого раздела страницы.
3. Выделите блок на попапе, чтобы открыть вкладку Settings (рядом с Elements). При добавлении блока из Elements вкладка Settings открывается сразу.

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

Во вкладке Settings вы можете:

• Настроить собственные опции блока
• Переместить его вверх или вниз в пределах раздела с помощью POSITION (стрелки вверх и вниз)
• Удалить его с помощью иконки удаления

Примечание

Когда в разделе попапа еще нет элементов, в нем отображаются собственные элементы управления + Text, + Button и + Form. Чтобы вместо них добавить Иконку, Обратный отсчет, Выбор тем или Рейтинг:

1. Добавьте элемент с помощью элемента управления + Text или + Button.
2. Выделите его.
3. Добавьте блок из вкладки Elements. Он появится в том же разделе, под вашим выделением.

Текст

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

• Применить жирный, курсивный или подчеркнутый шрифт.
• Добавить или удалить ссылку.
• Установить выравнивание по левому краю, по центру или по правому краю.

Чтобы изменить стиль текста, выделите его и откройте вкладку Settings справа. Выберите Icon (стиль текста, а не блок Иконка), Eyebrow, Heading 1–3, Body или Caption.

Кнопка

Кликните по кнопке, чтобы выделить ее, затем откройте вкладку Settings справа:

• Button style: Primary или Secondary.
• Action:
  • Open a link: введите Link URL. New tab включена по умолчанию. Снимите флажок, чтобы открыть ссылку в той же вкладке.
  • Close the popup.
  • Subscribe: запросить разрешение на веб-пуши и подписать посетителя. Это не блок Subscription form для email. Если разрешение получено, попап закроется. Если в разрешении отказано, кнопка станет неактивной, потому что браузер не будет запрашивать разрешение дважды.
  • Go to page: выберите другую страницу попапа, на которую нужно переключиться. Эта опция появляется, когда в попапе больше одной страницы. См. Работа с несколькими страницами.

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

Иконка

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

1. Откройте вкладку Elements справа.
2. Кликните Icon.
3. Установите опции во вкладке Settings:

• Icon: выберите из фиксированного набора из 20 иконок (bell, gift, cart, chart, lock, calendar, check, star, clock, tag, mail, phone, download, play, shield, sparkle, percent, truck, ticket, user). Загрузка кастомных иконок не поддерживается.
• Size: 24, 32 или 48 px.
• Accent: включен по умолчанию, поэтому иконка соответствует акцентному цвету попапа. Отключите, чтобы выбрать кастомный цвет.

Обратный отсчет

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

1. Откройте вкладку Elements справа.
2. Кликните Countdown.
3. Установите опции во вкладке Settings:

• Deadline: дата и время, когда обратный отсчет достигнет нуля.
• Time zone: часовой пояс, в котором считывается дедлайн, а не часовой пояс посетителя. По умолчанию используется часовой пояс вашего браузера; выберите UTC из списка, чтобы считывать дедлайн буквально.
• Language: язык меток единиц времени (дни, часы и т.д.). Оставьте English (default) или выберите один из 14 других языков.
• Labels: включите, чтобы показывать метки единиц времени рядом с числами.
• When the deadline passes:
  • Show zeros: обратный отсчет продолжает показывать 00:00:00.
  • Do not show the popup: весь попап не будет показываться, если дедлайн уже прошел. Pushwoosh проверяет дедлайн непосредственно перед тем, как попап должен появиться. Пропущенный таким образом попап не учитывается в частоте Once per visitor.
  • Go to page: переход на другую страницу попапа по истечении дедлайна. Предлагается только в том случае, если в попапе больше одной страницы. Выберите целевую страницу из выпадающего списка. См. Работа с несколькими страницами.

Выбор тем

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

1. Откройте вкладку Elements справа.
2. Кликните Topic picker. Блок появится с двумя опциями-плейсхолдерами. Его настройки откроются во вкладке Settings.

3. В List tag the choice is written to выберите существующий тег типа List или выберите Create a list tag, чтобы создать новый, не выходя из редактора. Пока вы не выберете тег, блок ничего не записывает.
4. Установите Control на Checkboxes или Chips.
5. Установите Minimum picks и Maximum picks. 0 на любом конце означает отсутствие ограничения с этой стороны (0 = any в метках полей). Для отправки всегда требуется хотя бы один выбор, даже если Minimum равен 0. При выборе большего количества, чем максимум, или при попытке отправить меньше, чем минимум, рядом с блоком появится сообщение, и ничего не будет отправлено.
6. В разделе Options and copy отредактируйте метку каждой опции (то, что видит посетитель) и Tag value (то, что записывается в тег). Если вы оставите Tag value пустым, Pushwoosh запишет внутренний ID опции (option-1, option-2 и т.д.). Используйте + Option, чтобы добавить еще одну строку, всего до 12 опций.
7. Установите Button label (по умолчанию Save) и Message after sending (по умолчанию Thanks! Your choice is saved.).

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

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

Рейтинг

Добавьте блок Rating, чтобы собрать быструю оценку (NPS, звезды или лайки/дизлайки) в виде кастомного события.

1. Откройте вкладку Elements справа.
2. Кликните Rating. Блок появится без установленного события. Его настройки откроются во вкладке Settings.

3. Установите Scale на NPS 0–10, Stars (от 1 до 5) или Thumbs (вверх или вниз). Во всех трех случаях более высокая оценка означает более положительный рейтинг. Thumbs отправляет 1 за лайк и 0 за дизлайк.
4. Установите When the score is sent на On tap (отправляется, когда посетитель выбирает значение) или With a button (ожидает клика для отправки).
5. В Event the score is sent as выберите событие из вашего проекта или выберите Create an event, чтобы определить новое, не выходя из попапа. Оценка сохраняется как это событие (атрибуты score, scale и slotKey). Используйте его в сегментах или Customer Journeys, как любое другое событие. Пока вы не выберете событие, блок ничего не отправляет.
6. При желании заполните Left label и Right label на двух концах шкалы.
7. Если When the score is sent установлено на With a button, установите Button label (по умолчанию Send rating).

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

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

Форма подписки

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

Примечание

В попапе может быть только одна Форма подписки. Как только на какой-либо странице уже есть одна, эта плитка становится недоступной в Elements.

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

1. Откройте вкладку Elements справа.
2. Кликните Subscription form.
3. Блок появится с полем Email и кнопкой Subscribe по умолчанию. Его настройки откроются во вкладке Settings.

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

Когда блок выделен, во вкладке Settings отображается выпадающий список Subscription form, который связывает блок с формой подписки в вашем проекте. Вы можете создать новую форму или выбрать уже существующую:

Опция	Когда использовать
New form — created on save (по умолчанию)	Самый быстрый старт: Pushwoosh создает форму для вас при сохранении попапа с названием “имя попапа — web popup”.
+ Create new form…	Если вы хотите дать название форме и настроить ее до сохранения попапа. Открывается диалоговое окно New subscription form. Введите Name, настройте Fields, текст Submit и Privacy, затем нажмите Create.
Существующая форма из выпадающего списка	Повторное использование формы, у которой уже есть подписчики или настроен double opt-in.

Важно

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

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

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

Все еще во вкладке Settings:

1. Установите Submit button style:
   • Primary: залитая кнопка в акцентном цвете попапа. Лучше всего подходит, когда Subscribe является основным действием на странице.
   • Secondary: кнопка с контуром и рамкой и надписью акцентного цвета. Лучше всего подходит, когда на попапе уже есть основная кнопка или вы хотите более легкий вид.
2. Включите Privacy, чтобы добавить строку о согласии с политикой конфиденциальности под формой, затем введите URL вашей политики конфиденциальности в появившемся поле.

3. В разделе Fields оставьте Email (всегда обязательно) и добавьте First name, Last name, Phone или Custom.
   • Для поля Custom выберите тег, в который будет отправляться его значение, из выпадающего списка Pick a tag… или выберите Create a tag, чтобы создать новый строковый тег, не выходя из редактора.
   • Установите тексты Success и Confirm email, которые будут показаны после отправки формы посетителем.