Баннер

Введение

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

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

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

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

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

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

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

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

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

Шаг 2. Дизайн

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

Меню дизайна

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

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

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

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

Меню кнопки

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

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

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

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