Подробно рассказываем, как создать виджет ЛидХантер: умную форму обратной связи, которая собирает лиды, повышает конверсию и помогает не терять заявки с сайта.

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

1. Настройка кнопки - дизайн и контент для кнопки “Оставить заявку”.
   Если такая кнопка не нужна, то переключатель должен быть неактивен (черного цвета) и поля
   для редактирования не будут доступны для правок, а настроенное далее модальное окно
   появится через время (которое задается в шаге 3);

2. Настройка модального окна - расположение, дизайн и контент для большого модального окна;

3. Размещение - название виджета в списке виджетов в touch_me, на каких страницах будет
   показан/не показан виджет, код для подключения к Яндекс Метрике. 

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

В открывшейся странице открылось поле с виджетом и меню для настройки кнопки (см. скриншот 30).
То, что выделено красной рамкой - это поле для более наглядного размещения виджета на вашем сайте
(оно всегда серых цветов), красной стрелкой показана кнопка, желтой стрелкой - кнопка переключения
с десктопной версии на мобильную, а синей - кнопка-переключатель наличия кнопки. 

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

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

2. Дизайн

• Цвет - цвет текста названия кнопки;

• Закругления - поле для определения углов виджета. Значение 0 - значит углы будут прямые углы в 90 градусов.
  Чем выше число, тем больше закругления у виджета. В поле можно самостоятельно ввести нужное число или прибавить/убавить при помощи кнопок выше/ниже. 

• Цвет фона - цвет самого модального окна;

• Шрифт: поле для правки шрифта в виджете (см. скриншот 10). 

• Размер текста: поле для правки размера шрифта в виджете. В поле можно самостоятельно ввести нужное число
  размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. 

• Иконка справа: чек-бокс для перемещения иконки в кнопке вправо (иконки выбираются в следующем разделе).

• Тень: чек-бокс для добавления или удаления тени у виджета. Если требуется добавить тень, нужно поставить галочку, а чтобы убрать тень - нужно убрать галочку. 

  3. Контент - тут поле для добавления названия кнопки. По умолчанию стоит “Оставить заявку”, но можно вписать любой текст, а также можно добавить иконку.
     Для этого необходимо нажать на кнопку Выбрать иконку (см. скриншот 31) и в открывшимся модальном окне выбрать нужную (см. скриншот 26 в тап-баре).
     После выбора иконки меняются поля в меню: появляется поле с названием иконки (если требуется удалить иконку, то нажимаем на крестик внутри поля)
     и рядом с кнопкой появляется выбранная иконка (см. скриншот 32). 

4. Расположение: здесь выбираем 1 из 3х вариантов расположения виджета на странице: слева, по центру или справа.. 

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

• Чек-бокс “Показывать только на первом экране” - возможность показа виджета только на первом экране, не затрагивая другие страницы.

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

Шаг 2 - Настройки модального окна.

В открывшейся странице открылось поле с модальным окном. 

Меню в настройках модального окна:

1. Расположение

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

2. Дизайн

• Цвет фона - цвет самого модального окна (на примере белый цвет);

• Закругления - поле для определения углов виджета. Значение 0 - значит углы будут прямые углы в 90 градусов. Чем выше число, тем больше закругления у виджета.
  В поле можно самостоятельно ввести нужное число или прибавить/убавить при помощи кнопок выше/ниже. 

• Шрифт: поле для правки шрифта в виджете (см. скриншот 10).

3. Изображение

• Кнопка-переключатель - кнопка для добавления/удаления изображения рядом с полями формы. По умолчанию кнопка активна и изображение предполагается.
  Если изображение не нужно, то переключатель перемещаем влево и кнопка становится черного цвета (см. скриншот 33).

• Пунктирное поле - Чтобы загрузить изображение нужно нажать на пунктирное поле и найти нужное изображение в вашем компьютере.
  Изображение должно быть в формате png или jpeg, весить не более 200 KB, пропорции 1 к 1 (см. скриншот 34).
  Когда изображение загрузится, оно отобразится в мод окне и в пунктирном поле, и появится кнопка с крестиком для удаления
  (на скриншоте красными стрелками показаны изображения, а синяя стрелка - кнопка удаления изображения). В мобильной версии изображение не показывается. 

• Изображение справа: чек-бокс для перемещения изображения вправо,  а слева сделать поля за заполнения).

4. Заголовок

• Поле для названия заголовка - поле для ввода названия заголовка модального окна;

• Размер заголовка - поле для правки размера шрифта заголовка. В поле можно самостоятельно ввести нужное число
  размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. 

• Цвет заголовка - выбор цвета текста в заголовке;

• Стиль текста - 2 кнопки для выбора стиля текста “В” - жирный, “I” - курсивный. Можно выбрать по отдельности или вместе. 

• Выравнивание текста - по левому краю, по центру или по правому краю.

5. Подзаголовок

• Поле для названия подзаголовка - поле для ввода текста подзаголовка модального окна;

• Размер подзаголовка - поле для правки размера шрифта подзаголовка. В поле можно самостоятельно ввести нужное число
  размера шрифта или прибавить/убавить при помощи кнопок выше/ниже. 

• Цвет подзаголовка - выбор цвета текста в подзаголовке;

• Стиль текста - 2 кнопки для выбора стиля текста “В” - жирный, “I” - курсивный. Можно выбрать по отдельности или вместе. 

• Выравнивание текста - по левому краю, по центру или по правому краю.

6. Текст в полях ввода - блок для редактирования самих полей внутри модального окна (см. скриншот 35).

• Размер текста- поле для правки размера шрифта в полях. В поле можно самостоятельно ввести нужное число размера шрифта
  или прибавить/убавить при помощи кнопок выше/ниже. 

• Цвет текста - выбор цвета текста в полях для заполнения внутри модального окна, когда пользователь заполняет форму;

• Цвет заглушки - выбор цвета текста в подсказках внутри полей;

• Цвет обводки - выбор цвета обводки полей в модальном окне.

6. Чекбокс

• Размер текста - выбор размера шрифта текста в модальном окне;

• Цвет текста - выбор цвета текста чек-бокса в модальном окне.

2. Кнопка

• Поле для названия кнопки - поле для ввода названия кнопки в модальном окне;

• Размер текста - выбор размера шрифта текста в кнопке;

• Цвет текста - выбор цвета текста в кнопке;

• Цвет фона - выбор цвета фона в кнопке;

• Закругления: поле для определения углов виджета. Значение 0 - значит углы будут прямые углы в 90 градусов.
  Чем выше число, тем больше закругления у виджета. В поле можно самостоятельно ввести нужное число или прибавить/убавить при помощи кнопок выше/ниже. 

• Расположение - место кнопки в форме слева, по центру или справа.

7. Поля ввода - в этом блоке можно выбрать как уже предусмотренные поля (Почта, Номер телефона, Имя), так и создавать самим.
   Если какое-то предусмотренное поле не требуется, то ползунок в кнопке перемещаем влево (см. желтую стрелку на скриншоте 36).
   Если нужно переставить местами эти поля, то можно воспользоваться кнопками вверх/вниз справа от ползунка (см. красную стрелку на скриншоте 36). 

Чтобы создать новое поле, нужно нажать на кнопку “Добавить еще поле ввода” (см. синюю стрелку на скриншоте 36).
После нажатия кнопка трансформируется в поле где нужно ввести название (см. красную стрелку на скриншоте 37), а рядом иконка удаления этого поля (см. синюю стрелку на скриншоте 37).

10. Политика конфиденциальности - поле для ввода ссылки на политику конфиденциальности, которая размещена на вашем сайте. 

Шаг 3 - Размещение.

В открывшейся странице открылась страница уже без поля для создания виджета, а просто меню. Здесь следующие поля для заполнения: 

1. Название виджета - поле для названия виджета во внутренней системе touch_me;

2. Сайт - поле для вставки ссылки вашего сайта, где будет размещен виджет. Выбирается через выпадающий список;

3. Начинать показ - здесь выбираете время для показа;

4. Как долго показывать - здесь выбираете время показа;

5. Где показывать - выбираете на каких страницах показывать или не показывать данный виджет: 

• На всех страницах указанного сайта;

•  На всех страницах, кроме и поле для вставки ссылок страниц, где виджета не должно быть (сюда вставляем ссылки страниц через ENTER);

• Только на этих страницах и поле для вставки ссылок страниц, где виджет должен быть (сюда вставляем ссылки страниц через ENTER);

• URL-адреса соответствующие

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

6. Цель в Яндекс Метрике - поле для ввода кода для интеграции (получать в Яндекс Метрике).

Полностью заполненные поля можно посмотреть на скриншотах 18 и 19 в создании виджета Уведомления.
На примере выбрано, что виджет будет показываться сразу на выбранном сайте на конкретных страницах в течение 6 секунд. 

Когда виджет полностью создан, то нужно нажать на кнопку “Сохранить изменения” слева в самом низу страницы.