ЛидХантер - форма сбора заявок

Введение

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

1. Настройка кнопки — дизайн и контент для кнопки «Оставить заявку». Если такая кнопка не нужна, то переключатель должен быть неактивен (черного цвета) и поля для редактирования не будут доступны для правок, а настроенное далее модальное окно появится через время (которое задается в шаге 5);
2. Содержимое модального окна — изображение и контент для большого модального окна;
3. 152-ФЗ — поля с ссылками на документы;
4. Дизайн модального окна — цвета и размеры шрифтов в модальном окне;
5. Размещение — название виджета в списке виджетов в touch_me, на каких страницах будет показан/не показан виджет, код для подключения к Яндекс Метрике.

Шаг 1. Настройка кнопки

После открытия страницы отобразится область предпросмотра виджета и панель его настройки (см. скриншот ниже).

• Красной рамкой выделена область предпросмотра, которая позволяет наглядно оценить расположение виджета на странице сайта. Эта область всегда отображается в серых тонах и служит только для визуализации.
• Красной стрелкой обозначена кнопка виджета, которая будет отображаться на вашем сайте.
• Желтой стрелкой показан переключатель между режимами отображения десктопной и мобильной версии.
• Синей стрелкой отмечен переключатель, позволяющий включить или отключить отображение кнопки виджета.

Меню настройки кнопки:

1. Кнопка для вызова формы — кнопка-переключатель. По умолчанию она активна, то есть на странице будет кнопка «Оставить заявку».
   Если такая кнопка не нужна, то переключатель перемещаем влево и кнопка становится черного цвета и тогда переходим к заполнению содержимого модального окна (шаг 2).
2. Дизайн

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

3. Контент — блок для добавления названия кнопки. По умолчанию стоит «Оставить заявку», но можно вписать любой текст. Также можно добавить иконку: нажмите кнопку «Библиотека иконок» и выберите нужную иконку из списка (или воспользуйтесь поиском). Если подходящей иконки нет, ее можно загрузить самостоятельно с помощью кнопки «Загрузить SVG».
   После выбора иконки меняются поля в меню: появляется поле с названием иконки (если требуется удалить иконку, то нажимаем на крестик внутри поля) и рядом с кнопкой появляется выбранная иконка.
4. Расположение — блок для выбора 1 из 3х вариантов расположения виджета на странице: слева, по центру или справа.

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

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

Шаг 2. Содержимое модального окна

В меню этого шага следующие поля для заполнения:

• Изображение — блок для загрузки изображения в модальное окно. 

1. Кнопка-переключатель — кнопка для добавления/удаления изображения рядом с полями формы. По умолчанию кнопка активна и изображение предполагается. Если изображение не нужно, то переключатель перемещаем влево и кнопка становится черного цвета, а в поле с модальным окном изображение не показывается.
2. Пунктирное поле — для загрузки изображения нужно нажать на данное поле и найти нужное изображение в вашем компьютере.
   Изображение должно быть в формате png или jpeg, весить не более 6 MB.
   Когда изображение загрузится, оно отобразится в мод окне и в пунктирном поле, и появится кнопка с крестиком для удаления (на скриншоте красными стрелками показаны изображения, а синяя стрелка - кнопка удаления изображения). В мобильной версии изображение не показывается. 

• Заголовок — поле для ввода заголовка. Автоматически это поле заполнено текстом «Получить консультацию».
• Подзаголовок — поле для ввода подзаголовка.  Автоматически это поле заполнено текстом «Менеджер перезвонит вам и ответит на ваши вопросы».
• Выпадающий список — блок для создания поля с ответом, который нужно выбрать из списка. Автоматически это поле закрыто, чтобы активировать его, требуется передвинуть переключатель вправо. Когда поле станет активным, то кнопка-переключатель поменяет цвет на зеленый, а внизу появится поле с вводом названия поля (что нужно будет выбрать пользователю). Например, «выберите профессию», «выберите отрасль» и т.п.
• Поля ввода — блок для настроек других полей в модальном окне. Автоматически проставлены поля, какие наиболее часто используются в модальных окнах: Почта, Номер телефона, Имя.
  Если какое-то предусмотренное поле не требуется, то ползунок в кнопке перемещаем влево (например не нужно поле номер телефона) (см. желтую стрелку на скриншоте).
  Если нужно переставить местами эти поля, то можно воспользоваться кнопками вверх/вниз справа от ползунка (например поле почта требуется опустить ниже) (см. красную стрелку на скриншоте). 
  Если нужно создать другое поле, то это можно сделать при помощи кнопки «Добавить еще поле ввода» и в появившемся настраиваемом поле вводим название дополнительного поля (см. синюю стрелку на скриншоте). Для удаления такого поля предусмотрена иконка корзины рядом с полем.
  
• Кнопка — блок с названием кнопки модального окна. Если требуется переименовать кнопку, то в поле вводим новое название. Автоматически в кнопке предусмотрен текст «Отправить».

Шаг 3. 152-ФЗ

В меню этого шага есть следующие поля для заполнения:

1. Ссылка на согласие — поле для ввода ссылки на документ/страничку сайта о согласии на обработку персональных данных. Для соблюдения 152-ФЗ «О персональных данных» это поле обязательно для заполнения.
2. Политика обработки — поле для ввода ссылки на документ/страничку сайта на Политику конфиденциальности или обработки персональных данных. Для соблюдения 152-ФЗ «О персональных данных» это поле обязательно для заполнения.
3. Согласие на рассылку — поле для ввода ссылки на документ/страничку сайта о согласии на рассылку. Такое поле ставится отдельным чекбоксом в модальном окне и обязательно для заполнения при использовании маркетинговых рассылок. Без отдельного согласия отправлять рекламные сообщения нельзя. 
   Автоматически это поле закрыто, чтобы активировать его, требуется передвинуть переключатель вправо. Когда поле станет активным, то кнопка-переключатель поменяет цвет на зеленый, а внизу появится поле с вводом ссылки на документ.

Шаг 4. Дизайн модального окна

В меню этого шага есть следующие поля для заполнения:

• Модальное окно — блок с правками самого модального окна.

1. Цвет фона — поле для добавления/изменения цвета фона, на котором написан текст. Просто кликаем на название или квадратик цвета и выбираем нужный. Подробнее в этом в статье «Инструкция как создать виджет».
2. Закругления — поле для изменения закруглений модального окна: чем больше число, тем больше закругление. В поле можно самостоятельно ввести нужное число или прибавить/убавить при помощи кнопок выше/ниже. 
3. Шрифт — поле для изменения шрифта. Подробнее в этом в статье «Инструкция как создать виджет».

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

1. Чекбокс «Изображение справа» — чекбокс для перемещения изображения вправо, а слева будут поля за заполнения.
2. Ширина изображения — поле для изменения ширины показываемого изображения. Тем выше число, тем больше показывается изображение.
3. Положение по оси X — поле, чтобы можно было двигать изображение вправо/влево.
4. Положение по оси Y — поле, чтобы можно было двигать изображение вверх/вниз.

• Заголовок — блок для внесения изменений в заголовок модального окна.

1. Размер заголовка — поле для изменения размера шрифта заголовка.
2. Цвет заголовка — поле для изменения цвета шрифта заголовка.
3. Стиль текста — поле для добавления стиля к шрифту. Можно сделать жирным, выбрав кнопку с буквой B, и курсивом, выбрав кнопку с буквой I.
4. Выравнивание текста — поля для корректировки расположения текста: можно выровнять по левому краю, по середине и по правому краю.

• Подзаголовок — блок для внесения изменений в подзаголовок модального окна.

1. Размер подзаголовка — поле для изменения размера шрифта подзаголовка.
2. Цвет подзаголовка — поле для изменения цвета шрифта подзаголовка.
3. Стиль текста — поле для добавления стиля к шрифту. Можно сделать жирным, выбрав кнопку с буквой B, и курсивом, выбрав кнопку с буквой I.
4. Выравнивание текста — поля для корректировки расположения текста: можно выровнять по левому краю, по середине и по правому краю.

• Выпадающий список — блок для изменения текста в выпадающий список.

1. Цвет фона активного фона — поле для изменения цвета пункта в выпадающем списке (ховер).
2. Цвет текста — поле для изменения цвета текста пункта в выпадающем списке (ховер).
3. Размер галочки — поле для изменения размера галочки, которая находится в поле справа.

• Текст в полях вода — блок для изменения текста в самих полях ввода текста пользователем.

1. Размер текста — поле для изменения размера шрифта текста в поле.
2. Цвет текста — поле для изменения цвета шрифта текста в поле.
3. Цвет заглушки — поле для изменения цвета шрифта текста в поле.
4. Цвет обводки — поле для изменения цвета обводки поля ввода текста.

• Текст в полях согласия — блок по работе с чекбоксом.

1. Размер текста — поле для изменения размера шрифта чекбокса.
2. Цвет текста — поле для изменения цвета шрифта в чекбоксе.
3. Цвет чекбокса — поле для изменения цвета самого окошка чекбокса.

• Кнопка — поле для работы с кнопкой.

1. Размер текста — поле для изменения размера шрифта текста в кнопке.
2. Цвет текста — поле для изменения цвета шрифта текста в кнопке.
3. Цвет фона — поле для изменения цвета самой кнопки.
4. Закругления — поле для изменения закруглений модального окна: чем больше число, тем больше закругление. В поле можно самостоятельно ввести нужное число или прибавить/убавить при помощи кнопок выше/ниже. 
5. Расположение — поля для корректировки расположения кнопки: можно выровнять по левому краю, по середине и по правому краю.

Шаг 5. Размещение

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

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

• Название виджета — поле для ввода названия виджета во внутренней системе 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 — поле для вставки кода для события.