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

Введение

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

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

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

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

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

• Содержимое баннера — поле для работы с текстом в виджете.
  • Заголовок — поле для ввода названия или темы виджета. Необходимо указать текст, который будет отображаться в заголовке.
  • Описание — поле для ввода дополнительного текста, отображаемого в виджете. Описание всегда ограничено 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. Скрывать через (сек.) — виджет автоматически скрывается через указанное количество секунд. В поле можно указать нужное значение вручную или изменить его с помощью кнопок увеличения/уменьшения.

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

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

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