Как создать виджет “Уведомления (на мобильный телефон)”

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

Шаг 1 - Дизайн.

В открывшейся странице открылось поле с виджетом и меню для дизайна (см. скриншот).
То, что выделено красной рамкой - это поле для более наглядного размещения виджета на вашем сайте
(оно всегда серых цветов), а стрелкой показан сам виджет. 

Как создать виджет “Уведомления (на мобильный телефон)” — 1

Меню Дизайна:

  1. Цвет фона: цвет самого модального окна (на примере бирюзовый цвет);

  2. Цвет заголовков: цвет текста темы виджета (на примере красный цвет);

  3. Цвет текста: цвет внутреннего текста-описания, раскрывающего заголовок (на примере фиолетовый цвет).

  4. Закругления: поле для определения углов виджета. Значение 0 - значит углы будут прямые углы в 90 градусов. Чем выше число, тем больше закругления у виджета. В поле можно самостоятельно ввести нужное число или прибавить/убавить при помощи кнопок выше/ниже. 

  5. Тень: чек-бокс для добавления или удаления тени у виджета. Если требуется добавить тень, нужно поставить галочку, а чтобы убрать тень - нужно убрать галочку. 

  6. Шрифт: поле для правки шрифта в виджете. 

  7. Размер заголовков: поле для правки размера темы виджета. В поле можно самостоятельно ввести нужное число размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. 

  8. Размер текста: поле для правки размера описания виджета. В поле можно самостоятельно ввести нужное число размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. 

Меню Расположения:

  1. z-index - если вы хотите чем-то перекрыть наш виджет, то можете редактировать это поле. Но как правило, это поле стандартное и вносить изменения туда не требуется. 

  2. Чек-бокс “Показывать только на первом экране” - возможность показа виджета только на первом экране, не затрагивая другие страницы.

  3. Отступы - поле для настройки отступов в ручную. В поле можно самостоятельно ввести нужное число размера отступа или прибавить/убавить при помощи кнопок выше/ниже.


При завершении этого шага можно перейти на следующий шаг при помощи кнопки “Следующий шаг” в правом нижнем углу или при перечислении шагов чуть выше поля создания виджета.


Шаг 2 - Содержание.

В открывшейся странице открылось поле с виджетом (как в шаге 1) и меню для содержания ссылки:

  1. Заголовок - поле для ввода темы виджета, здесь просто требуется ввести текст;

  2. Описание - поле для ввода текста-описания виджета, здесь просто требуется ввести текст;

  3. Ссылка - поле, куда нужно вставить ссылку, куда ведет виджет;

  4. Пунктирное поле - поле для загрузки файла изображения. Изображение должно быть в формате png или jpeg.

В отличие от десктопных уведомлений, в виджет для мобильного телефона можно добавить только одну ссылку!

Как создать виджет “Уведомления (на мобильный телефон)” — 2

Шаг 3 - Размещение.

В открывшейся странице открылась страница уже без поля для создания виджета, а просто меню. Здесь следующие поля для заполнения: 

  1. Название виджета - поле для названия виджета во внутренней системе touch_me;

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

  3. Начинать показ - здесь выбираете время для показа;

  4. Как долго показывать - здесь выбираете время показа;

  5. Где показывать - выбираете на каких страницах показывать или не показывать данный виджет: 

  • На всех страницах указанного сайта;

  •  На всех страницах, кроме и поле для вставки ссылок страниц, где виджета не должно быть (сюда вставляем ссылки страниц через ENTER);

  • Только на этих страницах и поле для вставки ссылок страниц, где виджет должен быть (сюда вставляем ссылки страниц через ENTER);

  • URL-адреса соответствующие

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

  1. Цель в Яндекс Метрике - поле для ввода кода для интеграции (получать в Яндекс Метрике).

Полностью заполненные поля можно посмотреть на данном примере, где выбрано,

что виджет будет показан через 10 секунд после попадания на указанный сайт и находиться в течение

всего времени нахождения пользователя на сайте на всех страницах, кроме указанных страниц. 


Когда виджет полностью создан, то нужно нажать на кнопку “Сохранить изменения” слева в самом низу страницы.

Как создать виджет “Уведомления (на мобильный телефон)” — 3

Как создать виджет “Уведомления (на мобильный телефон)” — 4

Начните повышать
конверсию уже сегодня

Подключите Touch_me и превратите трафик
в реальные заявки

Как создать виджет “Уведомления (на мобильный телефон)” — №2
Как создать виджет “Уведомления (на мобильный телефон)” — №1

Мы используем куки, чтобы улучшить ваш пользовательский опыт

Улучшим конверсию вашего сайта за 20 минут

Разберём ваш сайт, подскажем, какие виджеты дадут максимальный прирост лидов, и покажем, как их настроить. Всё бесплатно.