Баннер-полоса

Введение

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

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

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

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

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

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

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

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

• Кнопка — поле для работы с кнопкой виджета. 
  • Текст кнопки — поле для ввода названия кнопки виджета. Необходимо указать текст, который будет отображаться в кнопке.
  • Ссылка — поле для ввода ссылки, куда будет переводить кнопка в виджете.
  • Чекбокс «Открывать в новом окне» — настройка функционала перехода по ссылке. Автоматически галочка выбрана, поэтому при нажатии на кнопку пользователя переведет по указанной ссылке в новое окно. Если галочку убрать, то при нажатии кнопки ссылка откроется в том же окне.

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

  Например, если пользователь зашел на сайт и увидел таймер на 20 минут, для него начнется индивидуальный отсчет. Если через 15 минут на сайт зайдет новый пользователь, он также увидит таймер на 20 минут, поскольку для него отсчет начинается заново.

• Общий таймер — таймер с единым временем окончания, который отображается одинаково для всех пользователей. Для заполнения есть поле для выбора даты завершения, где можно выбрать конкретное число из календаря), а также конкретное время.

  Например, если пользователь зашел на сайт и увидел таймер 11 часов 20 минут, а через 15 минут на сайт зайдет другой пользователь, он увидит таймер 11 часов 5 минут, поскольку отсчет для всех пользователей идет до одного и того же момента.

Шаг 2. Дизайн

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

Меню дизайна

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

Меню изображения

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

• Ширина изображения — настройка ширины картинки в виджете. Чем больше число, тем шире картинка.
• Выберите положение — настройка расположения самой картинки в выбранной ширине. То есть в этом поле при помощи стрелок вы можете передвигать изображение вправо и влево. 

Меню кнопки

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

Меню таймера

• Цвет цифр — настройка цвета цифр в виджете.
• Размер цифр — настройка размера цифр в виджете. Значение можно указать вручную или изменить с помощью кнопок увеличения/уменьшения.
• Цвет значений — настройка цвета обозначений дней/часов/минут/секунд.
• Размер значений — настройка размера названия кнопки виджета. Значение можно указать вручную или изменить с помощью кнопок увеличения/уменьшения.

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

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

Меню отступов

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

Шаг 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 — поле для вставки кода для события.