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

Введение

Для создания виджета есть 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, весить не более 200 KB, пропорции 1 к 1.
   Когда изображение загрузится, оно отобразится в мод окне и в пунктирном поле, и появится кнопка с крестиком для удаления (на скриншоте красными стрелками показаны изображения, а синяя стрелка - кнопка удаления изображения). В мобильной версии изображение не показывается. 

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

Шаг 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. Цвет заглушки — поле для изменения цвета шрифта текста в поле.
4. Цвет обводки — поле для изменения цвета обводки поля ввода текста.

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

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

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

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

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

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

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

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

1. Сразу — виджет появляется сразу после загрузки страницы.
2. Через (сек.) — виджет появляется через указанное количество секунд после открытия страницы. В поле можно указать нужное значение вручную или изменить его с помощью кнопок увеличения/уменьшения.
3. При скролле до (%) — виджет появляется после того, как пользователь прокрутит страницу до указанного процента. Например, при значении 10% виджет будет показан после прокрутки 10% страницы.
4. Когда собирается покинуть страницу — виджет отображается в момент, когда система фиксирует намерение пользователя покинуть страницу (например, при движении курсора к кнопке закрытия вкладки).
5. После посещения кол-ва страниц — виджет появляется после того, как пользователь просмотрит указанное количество страниц сайта. В поле необходимо указать количество страниц.

• Как долго показывать — настройка времени отображения виджета

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

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

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

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