Попап — это всплывающее окно, которое появляется на сайте поверх основного контента. С его помощью можно привлечь внимание пользователя к важной информации по работе сервиса, обновлениям или маркетинговым активностям.
Кроме попапов, для размещения рекламных или информационных сообщений на сайте часто используют баннеры — статичные элементы, которые отображаются в определенной части экрана и не перекрывают основной контент.
В Нотифлоу можно создать попап и баннер за считанные минуты. Ниже расскажем, как это сделать.
Как создать виджет
Чтобы создать виджет, нажмите кнопку «Создать» в левом верхнем углу экрана. Откроется окно, где нужно выбрать тип виджета и способ его создания — с нуля или на основе шаблона.
В этой инструкции разберем по шагам, как собрать виджет с нуля. Но те же шаги пригодятся, если вы решите отредактировать готовый шаблон под свои задачи.
Нажмите в окне кнопку «Создать», чтобы попасть в редактор виджетов.
Работа над виджетом начинается на вкладке «Внешний вид». Справа отображается сам виджет — здесь нужно добавить заголовок, основной текст и кнопку с переходом на нужную страницу сайта. Слева — панель с настройками оформления: фон, шрифт и другие параметры.
Первым делом выберите нужный тип — попап или баннер, а затем переходите к добавлению контента, настройке внешнего вида и условий показа. Подробно об этом рассказываем ниже.
Как добавить контент
Чтобы изменить текст в попапе или баннере, кликните на нужный элемент на рабочей области и введите свой текст вместо шаблонного.
При выделении текста появится панель редактирования. Через нее можно изменить тип текста (например, сделать заголовком или списком), настроить начертание, цвет или зашить ссылку.
Также в пустой строке можно ввести слэш (/), чтобы открыть меню команд. Оно позволяет быстро изменить тип текста или добавить дополнительные элементы — например, изображение, видео или разделитель.
Изображения можно загрузить прямо с устройства, а видео вставляется по ссылке — подойдут файлы, размещенные на внешнем хостинге.
Как добавить кнопку
Если вы хотите, чтобы попап или баннер вел пользователя на лендинг с подробной информацией или в определенный раздел личного кабинета, добавьте в виджет кнопку действия.
Для этого на панели настроек активируйте переключатель «Кнопка действия» и укажите URL-адрес, по которому будет происходить переход при клике.
При необходимости можно задать, чтобы ссылка открывалась в новом окне. Для этого включите соответствующий переключатель также на панели настроек.
Текст кнопки можно изменить прямо на рабочей области. Просто кликните на элемент и введите нужный текст.
Кнопка готова, осталось настроить ее внешний вид.
Как настроить внешний вид
В левой части экрана на вкладке «Внешний вид» можно изменить внешний вид виджета и кнопки, чтобы они соответствовали стилю вашего сайта. Доступны настройки для:
- скругления углов виджета;
- цвета фона самого виджета;
- ширины содержимого;
- цвета фона и шрифта для кнопки.
Здесь также при необходимости можно скрыть или показать крестик, с помощью которого пользователь закрывает виджет.
Как изменить расположение на странице
По умолчанию попап отображается в центре экрана, а баннер — в верхнем углу.
При необходимости вы можете изменить расположение виджета. Для этого кликните в рабочей области редактора на нужную зону, например центр, левый или правый верхний угол. Виджет будет автоматически закреплен в выбранной позиции.
Как настроить условия показа
После того как вы оформили попап или баннер, можно перейти к настройке условий его показа. Для этого перейдите на вкладку «Настройки».
Здесь задаются параметры, которые определяют, когда и где на сайте будет отображаться виджет.
Когда показывать. Если попап или баннер должен показываться на сайте постоянно, ничего дополнительно указывать не нужно. По умолчанию виджет будет доступен сразу после активации.
Но если вы хотите запустить показ к определенному событию, например к промо новой функции, задайте дату начала или окончания показа. В этом случае виджет появится или скроется на сайте автоматически.
Где показывать. Чтобы виджет отображался только на определённых страницах, укажите здесь их полные URL-адреса (с протоколом и доменом). Например: https://mydomain.com/profile.
|
Обратите внимание! Без указания хотя бы одного URL виджет не будет доступен для активации. |
Готово! Теперь вы можете опубликовать виджет, чтобы проинформировать пользователей о важном событии на вашем сайте.
