Уведомления

Введение

Для создания виджета есть 3 шага: 

1. Содержание — наполнение текстом и добавление необходимых ссылок для виджета;
2. Дизайн — выбор расцветки виджета, его расположения на странице, корректировка отступов;
3. Размещение — название виджета в списке виджетов в Touch_me, на каких страницах будет показан/не показан виджет и пр. 

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

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

После открытия страницы отображается поле с виджетом и меню для настройки содержимого уведомления.

Доступны следующие поля:

• Заголовок — поле для ввода названия или темы виджета. Необходимо указать текст, который будет отображаться в заголовке. Заголовок всегда ограничено 2 строчками, поэтому много текста вписывать не нужно. Система автоматически ограничит текст многоточием.
• Описание — поле для ввода дополнительного текста, отображаемого в виджете. Описание всегда ограничено 2 строчками, поэтому много текста вписывать не нужно. Система автоматически ограничит текст многоточием.
• Ссылка — поле для ввода URL-адреса страницы, на которую будет вести виджет.

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

• Изображение — пунктирное поле для загрузки изображения. Чтобы добавить изображение, нажмите на поле и выберите нужный файл на компьютере.
  Требования к изображению:
  • формат файла: PNG или JPEG;
  • размер файла: не более 6 МВ.
• Удалить — кнопка для удаления ссылки из виджета. Отображается только в том случае, если в виджете добавлено несколько ссылок.

Пример полностью заполненного шага 1 на скриншоте ниже.

Шаг 2. Дизайн

В разделе «Дизайн» можно настроить внешний вид виджета. Тут блоки делятся на два вида: Дизайн и Расположение.

Меню дизайна

• Цвет фона — настройка цвета фона модального окна виджета (например, зеленый цвет на скриншоте).
• Цвет заголовков — настройка цвета текста заголовка виджета (например, красный цвет на скриншоте).
• Цвет текста — настройка цвета основного текста-описания, который раскрывает содержание заголовка (например, фиолетовый цвет на скриншоте).
• Закругления — настройка радиуса скругления углов виджета.
  Значение 0 означает, что углы будут прямыми (90°). Чем выше значение, тем более закругленными будут углы виджета. Значение можно ввести вручную или изменить с помощью кнопок увеличения/уменьшения.
• Чекбокс «Тень» — чекбокс для включения или отключения тени у виджета. Чтобы добавить тень, установите галочку. Чтобы убрать тень — снимите галочку.
• Шрифт — поле для выбора и изменения шрифта текста в виджете 
• Размер заголовков — настройка размера текста заголовка виджета. Значение можно указать вручную или изменить с помощью кнопок увеличения/уменьшения.
• Размер текста — настройка размера основного текста-описания виджета. Значение можно указать вручную или изменить с помощью кнопок увеличения/уменьшения.

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

1. Расположение — здесь выбираем 1 из 3х вариантов расположения виджета на странице: нижний левый угол, нижний правый угол или верхний правый угол. 
2. z-index — если вы хотите чем-то перекрыть наш виджет, то можете редактировать это поле. Но как правило, это поле стандартное и вносить изменения туда не требуется. 
3. Чекбокс «Показывать только на первом экране» — возможность показа виджета только на первом экране, не затрагивая другие страницы.

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

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

Шаг 3. Расположение

После создания виджета откроется страница «Размещение», где необходимо настроить параметры его отображения.

Доступны следующие разделы:

• Название виджета — поле для ввода названия виджета во внутренней системе touch_me;
• Сайт — выпадающий список для выбора сайта, на котором будет размещен виджет;
• Базовые настройки показа — настройка показа виджета на странице сайта;

• Расширенные настройки показа — дополнительная настройка виджета.

  Базовые настройки сайта

• Устройства на которых показывать — настройка показа виджета на разных устройствах (на всех устройствах, только на десктопе, только на мобильных телефонах).
• Начинать показ — настройка момента, когда виджет будет отображаться пользователю. Доступны следующие варианты:

1. Сразу — виджет появляется сразу после загрузки страницы.
2. Через (сек.) — виджет появляется через указанное количество секунд после открытия страницы. В поле можно указать нужное значение вручную или изменить его с помощью кнопок увеличения/уменьшения.
3. При скролле до (%) — виджет появляется после того, как пользователь прокрутит страницу до указанного процента. Например, при значении 10% виджет будет показан после прокрутки 10% страницы.
4. Когда собирается покинуть страницу — виджет отображается в момент, когда система фиксирует намерение пользователя покинуть страницу (например, при движении курсора к кнопке закрытия вкладки).
5. После посещения кол-ва страниц — виджет появляется после того, как пользователь просмотрит указанное количество страниц сайта. В поле необходимо указать количество страниц.

• Как долго показывать — настройка времени отображения виджета.

1. Все время — виджет остается отображаться без ограничения по времени.
2. Пока не совершит действие — виджет покажется только после взаимодействия пользователя с сайтом.
3. Скрывать через (сек.) — виджет автоматически скрывается через указанное количество секунд. В поле можно указать нужное значение вручную или изменить его с помощью кнопок увеличения/уменьшения.
4. Скрывать через (показов) — виджет автоматически скрывается через указанное количество показов. В поле можно указать нужное значение вручную или изменить его с помощью кнопок увеличения/уменьшения.

• Где показывать — настройка страниц, на которых будет отображаться виджет. Доступны четыре варианта:

1. На всех страницах указанного сайта — виджет будет отображаться на всех страницах выбранного сайта;
2. На всех страницах, кроме — виджет будет отображаться на всех страницах, кроме указанных. Вставьте ссылки на страницы, где виджет не должен отображаться. Каждую ссылку необходимо добавлять с новой строки (нажимая Enter);
3. Только на этих страницах — виджет будет отображаться только на указанных страницах. Вставьте ссылки на нужные страницы, добавляя каждую с новой строки (нажимая Enter);
4. Внутри разделов  — виджет будет отображаться только в указанных разделах;
5. URL-адреса соответствующие регулярному выражению — виджет будет отображаться на страницах, URL-адреса которых соответствуют заданному условию (например, содержат определенную часть адреса, начинаются или заканчиваются указанным значением).

Расширенные настройки показа

• Операционные системы — настройка показа виджета на определенной ОС. При помощи чекбоксов выбирайте показ виджета на нужных операционных системах. Если ограничение по операционным системам не требуется, оставьте настройку выключенной. Если нужно показывать виджет только пользователям определенных устройств, включите настройку при помощи переключателя у названия поля и выберите нужные ОС.
• Источники трафика — настройка показа виджета для посетителей, пришедших по определенным UTM-меткам. В соответствующие поля можно указать:
  • utm_source — источник кампании, например google, yandex, vk. Заполняется самым первым. Без него невозможно заполнять другие поля;
  • utm_medium — тип трафика, например cpc, email, banner;
  • utm_campaign — название рекламной кампании;
  • utm_content — идентификатор объявления или дополнительный параметр;
  • utm_term — ключевое слово.

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

• Интеграция с аналитикой — блок с настройкой интеграций виджета.
  • Цель в Яндекс Метрике — поле для вставки кода для интеграции;
  • Событие в Roistat — поле для вставки кода для события.