Мини-баннер

Введение

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

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

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

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

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

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

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

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

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

Шаг 2 - Дизайн

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

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

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

Меню кнопки:

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

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

1. Расположение — здесь выбираем 1 из 3х вариантов расположения виджета на странице: нижний левый угол, нижний правый угол или верхний правый угол. 
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 — поле для вставки кода для события.