Использование WebHooks

WebHook — механизм оповещения системы о каком-либо событии при помощи HTTP-запроса к внешнему ресурсу — скрипту-обработчику Webhook’а . Для включения интеграции через WebHook укажите ссылку на скрипт-обработчик:

При заполнении и отправки формы поп-апа будет сделан POST-запрос к скрипту-обработчику Webhook’а. POST-запрос в формате JSON со следующими данными:

{
    "data":{ //В этом узле передаются поля формы поп-апа. В этой форме два поля
        "email":{
             "name":"email", //Название поля - берется из атрибута name поля формы
             "value":"inbox@mail.ru" //Содержимое поля
        },
        "lp-text":{
            "name":"lp-text",
            "value":"Hello!"
        }
    },
    "environment":{ //В этом узле передаются данные пользователя, которые передаются неявно
        "visitor_key":"3557e496-20cc-4c3f-f2c8-bfe56d72946b", //Уникальный ключ посетителя сайта
        "visitor_ipaddress":"89.151.169.237", //IP адрес посетителя, который заполнил форму
        "visitor_locale":"ru-RU", //Язык посетителя сайта, установленный в его браузере
        "visitor_browser_type":"Chrome 71.0", //Браузер посетителя сайта
        "visitor_device_type":"desktop", //Тип устройства посетителя сайта (может быть mobile или desktop)
        "visitor_ device_os":"windows", //Операционная система посетителя сайта 
        "utm_source":"yandex.direct", //UTM-метки (необязательный элемент)
        "utm_medium":"cpc",
        "utm_campaign":"context",
        "utm_term":"site",
        "utm_content":"site",
        "site_id":"77", //ID сайта
        "tool_id":"23411",  //ID попапа на сайте
        "referer":"https://www.somesite.ru/cat/page.html ", //URL страницы сайта на которой появился поп-ап
        "submit_date":"2019-06-18 15:07:12", //Дата и время отправки формы
     }
}

Используя WebHook, вы можете использовать данные из поп-папа для своих целей. Например, можно добавить данные посетителя сайта в свою CRM-систему.

Настройка интеграций виджета

Настройки интеграции поп-апа осуществляется на вкладке Интеграции.

Там всегда присутствует, как минимум, возможность включить и настроить интеграцию через WebHook. В настройке должна быть указана ссылка на скрипт обработки. Более подробно об использовании WebHook читайте в соответствующем разделе справки.

Встроенные интеграция с внешними сервисами

Если на в разделе настроек сайта вы установили интеграцию с одним или несколькими из поддерживаемых внешних сервисов, то на вкладке Интеграции вы сможете произвести детальные настройки интеграций для данного поп-апа:

  1. Вы сможете выбрать целевой лист внешнего сервиса, в который будут переданы данные при отправке формы поп-апа;
  2. Включите или выключите необходимость Opt-in подтверждения (для некоторых платформ);
  3. Далее вы сможете установить соответствие элементов формы с полями данных внешнего сервиса.

В текущей реализации стандартных интеграций вы можете выбрать только один из существующих во внешнем сервисе целевых листов.

Нестандартные элементы формы, созданные в режиме Тонкой настройки также будут доступны в интеграциях и будут передаваться при отправке WebHooks.

Настройка таргетинга

На вкладке Таргетинг вы можете настроить параметры аудитории, которой может быть показан данный виджет.

В настройках доступны следующие типы таргетинга:

В ближайшем обновлении платформы будет доступен Геотаргетинг.

Настройки могут носить разрешающий или запрещающий характер, который задаётся либо выпадающим списком, либо активностью чекбокса для настроек, связанных с параметрами устройства посетителя сайта.

Взаимосвязь нескольких настроек таргетинга

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

Взаимосвязь разрешающих параметров разных типов настроек таргетинга (например, Целевая страница и URL параметры) осуществляется по принципу пересечения (логический оператор И).

Взаимосвязь разрешающих параметров одного типа настроек таргетинга (например, две или более разные настройки типа Целевая страница) осуществляется по принципу объединения (логический оператор ИЛИ).

Далее рассмотрим более подробно перечисленные выше настройки таргетинга.

Таргетинг по целевым страницам

Данный вид таргетинга позволяет разрешать или блокировать показ виджета в определённых разделах или на определённых страницах сайта.

При настройке условий вы можете использовать символ * в качестве маски для замещения любого участка URL. Возможно использование внутри одного правила нескольких масок, если это необходимо.

При обработке данного условия алгоритмом отбрасываются и не учитывается слеш ( / ) в конце URL и параметры запроса (символ ? и всё, что следует правее за ним). Также алгоритм обработки не чувствителен к регистру.

Проверка данной настройки инициируется в начале загрузки страницы сайта и, если URL текущей страницы оказывается вне таргетинга, то виджет не будет даже загружен на на текущей странице.

Таргетинг по URL параметрам

Эта настройка позволяет таргетировать показы по GET-параметрам. Чаще всего используется для взаимосвязи работы сервиса с рекламой и прочими внешними каналами привлечения аудитории на сайт.

Важная особенность проверки состоит в том, что сервис запоминает однажды возникшие в течении сессии стандартные UTM-метки (utm_source, utm_medium, utm_campaign, utm_content и utm_term) и использует их для таргетинга в течении всей сессии при перемещении пользователя по сайту.

Алгоритм обработки параметров не чувствителен к регистру. Также проверка таргетинга по URL инициируется в начале загрузки страницы сайта и, если параметры текущей страницы будут вне таргетинга, то виджет не будет даже загружен на на текущей странице.

Рекомендация: Наиболее часто формы LeadPlan используются для сбора базы email-адресов посетителей сайта. Поэтому целесообразно исключать из таргетинга посетителей, которые переходят на сайт из email-канала. Обычно, при использовании платформ рассылки и грамотно настроенных email-кампаниях, у таких пользователей utm_medium = email.

Таргетинг по селекторам CSS/JavaScript

Эти настройки предоставляют очень широкие возможности, но для работы с данным типом таргетинга необходимо обладать пониманием основ HTML и CSS на уровне определения селекторов.

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

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

Некоторые случаи, когда может быть полезно использование таргетинга по селекторам:

  • Таргетинг по зарегистрированным / анонимным пользователям;
  • Таргетинг по пользователям с пустой / полной корзиной в интернет-магазине;
  • Таргетинг по страницам, в структуре которых имеется / отсутствует ключевой элемент;
  • Необходимость предотвратить одновременный показ виджетов LeadPlan с виджетами других сервисов.

Например, на данном скриншоте для одного из сайтов настроен запрет показа виджета авторизованным пользователям, у которых на всех страницах имеется ссылка выхода из кабинета с id = «logout». И показ только тем пользователям, у которых в корзине с class = «flying-cart» имеется хотя бы один добавленный элемент. Кроме того, последнее условие запрещает показываться виджету, если на странице присутствует в открытом состоянии поп-ап стороннего сервиса с id = «advert-pop».

Таргетинг по коду страницы

Этот вид таргетинга по своим принципам работы и сферам применения очень похож на Таргетинг по селекторам, но в данном случае в алгоритме анализируется HTML код страницы на момент показа виджета.

На скриншоте выше в таргетинг попадают анонимные посетители сайта, у которых на всех страницах присутствует ссылка с названием Войти в личный кабинет.

При анализе не учитываются регистр, пробелы и переносы в HTML коде.

Таргетинг по типу устройства

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

Таргетинг по типу операционной системы

Адресатами вашей кампании могут быть пользователи той или иной платформы.

Например, если вы посредством виджетов продвигаете мобильное приложение своего сайта для iOS, то целесообразно показывать его только пользователям iOS, ну может быть ещё Mac OS, не более того.

Таргетинг по типу браузера

Данная настройка позволяет работать с аудиториями определённых браузеров.

Настройка условий показа

На вкладке Условия показа осуществляется настройка механики начала и прекращения показа, а также действия после отправки.

Начать показ виджета

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

Когда пользователь покидает сайт

Условие сайт срабатывает во время увода курсора мыши пользователем из области сайта в браузере.

При скроле ниже N% страницы

Срабатывает, когда происходит скролл по странице ниже указанного в настройках процента от общей высоты. Данное условие не работает на страницах, на которых невозможен скролл, т.е. на страницах, высота которых меньше или равна высоте окна браузера.

После N секунд на текущей странице

В начале загрузки каждой страницы сайта начинается отсчёт. Условие срабатывает, когда отсчёт доходит до N секунд.

После N секунд от начала визита

В начале визита пользователя на сайт (сессии) начинается отсчёт. Условие срабатывает, когда отсчёт доходит до N секунд.

Не раньше N страниц от начала сессии

Это единственное в данной группе условий ограничивающее условие. Если грубина просмотра страниц сайта пользователем в текущей сессии меньше указанного N, то показа не будет. Начиная с посещения N-й страницы, данное ограничение будет снято.

Действие после успешной отправки

С помощью данной настройки можно настроить действие, которое должно произойти после успешной отправки формы виджета.

Показать сообщение

После отправки формы на месте поп-апа появится поп-ап подтверждения отправки, который по внешнему виду ничем не отличается от основного, но имеет свои настройки заголовка и описания, а также, в отличии от основного, не имеет формы.

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

  1. Имея в виду тот факт, что основной поп-ап имеет уникальный класс LP-main, а поп-ап подтверждения, в свою очередь, имеет уникальный класс LP-success можно посредством вёрстки и задания раздельных стилей управлять содержимым двух данных поп-апов;
  2. Можно отключить поп-ап подтверждения, выбрав в настройке действия после отправки пункт Закрыть виджет. Затем создать отдельный поп-ап, который будет выполнять функцию поп-апа подтверждения и вызывать его с помощью JavaScript кода LP_show(popup_ID) по событию LP_tools.onSubmit основного поп-апа.

Обычно поп-ап подтверждения используется для уведомления пользователя сайта об успешной отправке основного поп-апа и для информирования.

Закрыть виджет

После отправки формы основного поп-апа он просто закрывается и ничего больше не происходит.

Редирект

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

Скрыть виджет при клике на внешнюю область

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

При этом, с одной стороны, общая конверсия поп-апов немного снижается. По нашему опыту можно ожидать снижение конверсии от показа в клик до 0,5%. При этом абсолютное значение конверсии может снизиться на 10-25%. Это обусловлено тем, что поп-ап становится слишком просто закрыть и даже становятся возможными случайные закрытия. С другой стороны, такое поведение более привычно и удобно пользователям.

Частота показов

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

Условия прекращения показа

Данные настройки позволяют задать условия, при которых виджет больше не будет показываться в текущей сессии или вообще для каждого конкретного пользователя.

Дата, Время и Дни недели показа

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

Вы можете устанавливать начальную и / или конечную дату показа, временной диапазон с учётом временной зоны и дни недели, в течении которых возможен показ текущего виджета.

Настройки, произведённые на вкладке Условия показа распространяются на всех посетителей сайта, кроме тех аудиторий, для которых был ограничен показ, посредством настроек Таргетинга.

Настройка содержимого

На вкладке Содержимое осуществляется настройка основных элементов поп-апа: текста, формы, изображения.

Результат редактирования содержимого синхронно отображается в предварительном просмотре.
Редактировать можно элементы самого поп-апа и поп-апа подтверждения отправки основного, если последний активирован на вкладке Условия показа.

Все редактируемые элементы можно включать/выключать с помощью переключателя:

К редактированию доступны:

Это не полный перечень элементов, которые вы можете использовать.
При использовании Тонкой настройки вы можете использовать все возможные элементы форм. Более подробно читайте об этом в разделе Тонкая настройка формы в поп-апе.

Далее рассмотрим более подробно перечисленные выше элементы содержимого, для которых возможно быстрое редактирование.

Заголовок и Заголовок сообщения об отправке

Выводятся в начале формы внутри тэга <div> с классом LP-title.
Заголовок выводится в основном поп-апе, а Заголовок сообщения об отправке выводится на том же месте и по такому же принципу, но уже в поп-апе сообщения об успешной отправке формы.

Описание и Описание в сообщении об отправке

Выводятся под заголовком внутри тэга <div> с классом LP-description.
Описание выводится в основном поп-апе, а Описание в сообщении об отправке выводится на том же месте и по такому же принципу, но уже в поп-апе сообщения об успешной отправке формы.

При выделении фрагмента описания, во всплывающем окне появляется редактор, расширяющий возможности редактирования:

Изображение

Вы можете загрузить своё изображение в виджет.

Загруженное изображение будет храниться на cdn сервиса. Хостинг изображений настроен для соответствия требованиям Google PageSpeed Insights: при отдаче изображения оптимизируются и кэшируются в браузерах пользователей.

Возможно добавление изображения путём указания прямой ссылки на него в сети Internet. Дополнительно можно указать Высоту изображения (ширина будет выбрана пропорционально указанной высоте) и Отступ до края поп-апа.

Изображение будет расположено в левой части поп-апа в десктопной версии и будет скрыто на в мобильной версии поп-апа. Изображение с заданными параметрами выводятся внутри тэга <div> с классом LP-image.

Именно такое расположение и такая механика являются наиболее эффективными по результатам многочисленных проведённых нами A/B тестов. Однако, если вам необходимо иное расположение или поведение на мобильных устройствах, вы всегда можете использовать режим Тонкой настройки.

Допустимо использование любых видов изображений, поддерживаемых тегом <img>. Тем не менее, рекомендуется использовать изображения в небольшом разрешении в форматах с высоким уровнем сжатия: *.jpg, *.gif. Также рекомендуется по возможности использовать векторный формат *.svg.

Обратите особое внимание на то, что если ваш сайт работает на https:// протоколе, то и добавляемое изображение обязательно должно быть загружено c ресурса с поддержкой https.

На платных тарифах доступна встроенная загрузка изображений на высокопроизводительный CDN, а также файловый менеджер.

Поле ввода email

Возможно редактирование текста placeholder-а данного элемента.
При отправке формы, на которой присутствует данное поле, будет произведена валидация на факт и корректность ввода поля email. При некорректном вводе, с целью оповещения пользователя, граница данного поля будет подсвечена на 3 секунды цветом, совпадающим цветом кнопки отправки формы, установленным в разделе Внешний вид.

Поле ввода телефона

Возможно редактирование текста placeholder-а данного элемента.
На форме в данное поле пользователь сайта сможет ввести только цифры. Ввод может быть начат с символа «+». При начале ввода с цифры «8», будет произведена автоматическая замена на «+7».

Если вам необходимо отклонение от указанных выше правил, то добавляйте поле ввода телефона, используя режим Тонкой настройки. Стоит отметить, что данный режим позволяет устанавливать на поля ввода произвольные пользовательские маски и валидаторы.

Поле ввода имени

Возможно редактирование текста placeholder-а данного элемента.

Кнопка отправки формы

Вы можете изменять текст кнопки отправки формы. Возможно, но не рекомендуется отключать кнопку отправки формы, при прочих активных элементах формы поп-апа.

Текст под формой (комментарий)

Данный элемент служит для публикации комментария под формой. Чаще всего используется для информирования о политике конфиденциальности.

Чекбокс подтверждения согласия с условиями

Данный элемент служит для подтверждения согласия пользователя сайта с политикой конфиденциальности при отправке формы. По умолчанию чекбокс отмечен. Если его деактивировать (что будет означать отсутствие согласия), то кнопка отправки формы станет неактивной (disabled) и форму технически невозможно будет отправить:

Все Элементы формы, а также Комментарий и Чекбокс подтверждения выводятся только в основном поп-апе.

Тонкая настройка формы в поп-апе

В верхнем правом углу вкладки «Внешний вид» вы можете активировать режим «Тонкой настройки».

После включения данного режима вы сможете редактировать HTML и CSS, а также добавлять любой JavaScript код, связанный с работой данного поп-апа.

Внимание: При выключении режима «Тонкой настройки», все изменения кода, созданные в этом режиме будут утрачены. Будут возвращены последние настройки, выполненные и сохранённые в обычном режиме до включения «Тонкой настройки».

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

Настройка HTML

HTML код по умолчанию выглядит так:

<div class="LP-image">
    {{image}}
</div>
<div class="LP-content">
    {{title}}
    {{description}}
    {{form}}
    {{note}}
</div>
<div class="LP-close-x"></div>

Он содержит три основных блока:

  • LP-image, в котором содержится изображение, если оно включено в настройках;
  • LP-content для всего остального содержимого попапа;
  • LP-close-x служит для отрисовки крестика закрытия попапа.

В коде присутствуют специальные переменные: {{image}}, {{title}}, {{description}}, {{form}} и {{note}}. При генерации окончательного HTML кода виджета вместо них подставляются динамические данные, сгенерированные в соответствии с настройками, произведёнными на вкладке «Содержимое».

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

Для удобства работы, классы всех элементов имеют префикс LP-. Рекомендуется следовать этому правилу в процессе доработок и создания своего HTML кода.

HTML код поп-апа благодарности за отправку

Если в настройках действий после отправки используется вариант «Показать сообщение», то после успешной отправки формы посетителю сайта будет показан попап, содержащий информационное сообщение.

Для информационного сообщения используется HTML код самого поп-апа, отличающийся только набором подставляемых переменных: в него будет загружен то же изображение, свои заголовок и описание, не будут загружены форма и комментарий под формой.

Благодаря такому решению, вам не делать двойную работу по созданию отдельного кода для поп-апа с формой и поп-апа подтверждения. Если же вам нужно реализовать отличающийся внешний вид этих двух попапов, то можете воспользоваться следующим руководством.

Переменная {{image}}

В переменную {{image}} подставляется изображение (если оно используется), в соответствии с настройками, производимыми на вкладке «Содержимое». Код будет возвращен в виде: 

<img src="https://anysite.ru/image.jpg" style="height: 210px;">

Переменная {{title}}

В эту переменную будет подставляться «Заголовок» формы в основном поп-апе и «Заголовок сообщения об отправке» в информационном поп-апе после отправки основной формы. Код будет возвращен в виде: 

<div class="LP-title">
    Подпишитесь на нашу рассылку!
</div>

для основного попапа и:

<div class="LP-title">
    Спасибо!
</div>

для последующего.

Переменная {{description}}

В переменную {{description}} будет подставляться «Описание» формы в основном поп-апе и «Описание в сообщении об отправке» во втором информационном поп-апе. Код будет возвращен в виде: 

<div class="LP-description">
    <p>Зарегистрируйтесь,чтобы получать последние новости, обновления и специальные предложения.</p>
</div>

для основного попапа и:

<div class="LP-description">
    <p>Вы успешно подписаны.</p>
</div>

для последующего.

Переменная {{form}}

В {{form}} подставляется код формы, сгенерированный в соответствии с настройками, производимыми на вкладке «Содержимое». В зависимости от настроек, в этой форме может быть разное количество полей. Возвращаемый HTML код формы по умолчанию:

<form novalidate="novalidate" class="LP-form">
    <div class="LP-input-block">
        <input type="text" class="LP-input" name="email" placeholder="Email" value="">
    </div>
    <div class="LP-input-block">
        <input type="text" class="LP-input" name="name" placeholder="Имя" value="">
    </div>
    <div class="LP-submit-block">
        <button type="submit" class="LP-submit">Подписаться</button>
    </div>
</form>

В режиме тонкой настройки вы можете добавлять любое количество элементов формы. При соблюдении определенных правил, значения данных новых элементов при отправке сохранятся в LeadPlan и будут доступны в системе интеграций.

Для переопределения формы необходимо в режиме Тонкой настройки вместо переменной {{form}} написать код формы и внутри необходимые поля. В общем виде, конструкция выглядит так:

<form novalidate="novalidate" class="LP-form">
    <!-- Ниже должны быть поля -->
    <!-- Конец блока с полями -->

    <!-- Кнопка submit -->
    <div class="LP-submit-block">
        <button type="submit" class="LP-submit"></button>
    </div>
</form>

Далее рассмотрим, как работать с различными элементами форм.

Rabiobutton (переключающийся флажок)
<div class="LP-input-block">
    <input type="radio" name="LP-rb-1" value="1" />Номер 1
    <input type="radio" name="LP-rb-1" value="2" />Номер 2
    <input type="radio" name="LP-rb-1" value="3" />Номер 3
</div>
<div class="LP-input-block">
    <input type="radio" name="LP-rb-2" value="2-1" />Номер 2-1
    <input type="radio" name="LP-rb-2" value="2-2" />Номер 2-2
    <input type="radio" name="LP-rb-2" value="2-3" />Номер 2-3
</div>
Checkbox (флажок)
<div class="LP-input-block">
    <input type="checkbox" name="LP-cb-1" value="1" />cb 2-1
    <input type="checkbox" name="LP-cb-2" value="2" />cb 2-2
    <input type="checkbox" name="LP-cb-3" value="3" />cb 2-3
</div>
Select (выпадающий список)
<div class="LP-input-block">
    <select class="LP-input" name="LP-select-1" placeholder="Выбор">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>
Text (текстовое поле)
<div class="LP-input-block">
    <label>Text-1</label>
    <input class="LP-input" type="text" name="LP-text-1" value="text-1" />
</div>
Number (числовое поле)
<div class="LP-input-block">
    <label>Number-1</label>
    <input class="LP-input" type="number" name="LP-number-1" value="123" />
</div>
Textarea (многострочный текст)
<div class="LP-input-block">
    <textarea class="LP-input" name="LP-ta-1" value="" />
</div>

В информационном попапе, появляющемся после отправки основного, код формы не возвращается.

Переменная {{note}}

Содержимое и настройки этой переменной, как правило выполняют роль подтверждения согласия с условиями подписки (отправки формы). По умолчанию в коде выводится под формой и имеет общий вид:

<div class="LP-note">
    <div class="LP-input-block">
        <input class="LP-checkbox" id="LP-conditions-mark-1" name="LP-conditions-mark-1" type="checkbox" value="" checked="">
    </div>
    <label class="LP-checkbox-label" for="LP-conditions-mark-1">
        <p>Я соглашаюсь с условиями обработки персональных данных</p> 
    </label>
</div>

В информационном попапе код комментария не возвращается.

Настройка CSS

При включении «Тонкой настройки» в поле CSS выводится код, сгенерированный с учётом изменений, сделанных в режиме обычной настройки. Отличия могут быть в цветах базовых элементов и используемой в попапе коллекции шрифтов.

Используя поле CSS, вы можете переопределить любой CSS код попапа. Но при этом следует учитывать, что в процессе загрузки в браузер посетителя сайта, в начало каждого стиля будет автоматически добавлена ссылка на индексный класс поп-апа. Благодаря этой особенности работы сервиса, CSS код поп-апа действует только в пределах своего поп-апа.

В свою очередь, попап может наследовать некоторые стили сайта, поскольку он загружается непосредственно в HTML код сайта. Это также необходимо учитывать.

Поддержка адаптивности

До того, как попап будет показан посетителю, он измеряется в браузере пользователя сайта и если его ширина+допуски на отступы по бокам оказываются шире текущего браузера, обёртке попапа добавляется класс LP-mobile. Такая же проверка производится при любых изменениях размера окна браузера уже после загрузка страницы.

Благодаря этому решению, для поддержки адаптивности отпадает необходимость использования медиа запросов CSS (media queries). Попробуйте, это очень удобно. Если что, применение медиа запросов не исключено.

Например, вот весь CSS код, который делает базовый попап адаптивным:

.LP-mobile .LP-image {
    display:none; 
}
.LP-mobile .LP-input-block {
    display: block;
    padding-bottom: 7px;
    padding-right: 0px;
}
.LP-mobile .LP-note .LP-input-block {
    display: table-cell;
    padding-right: 5px !important;
}
.LP-mobile .LP-submit {
    margin-top: 10px; 
    width: 100%;
    height: 40px;
}
.LP-mobile .LP-submit-block {
    display: block !important;
}
.LP-mobile .LP-description {
    font-size: 14px;
}

Настройка JavaScript

При включении «Тонкой настройки» данное поле JavaScript не содержит никакого кода.

Этот функционал может пригодиться, когда необходимо будет реализовать принудительный вызов попапа при совершении какого то действия на странице сайта (например, клик по кнопке). Или когда нужно передать в наборе отправляемых в попапе данных какое то значение со страницы сайта или из переменных в Cookies.

Для удобства работы с попапами вы можете использовать объекты и методы, которые становятся доступны при установке кода LeadPlan на сайт.

Объект LP_tools

Объект содержит поля и методы текущего попапа. В коде страницы могут быть несколько попапов, в том числе скрытых. Поэтому работать с DOM-элементами попапа в глобальном контексте неудобно. Рекомендуется использовать объект LP_tools, который определен в контексте попапа, который вы настраиваете.

LP_tools.element

Ссылка на DOM-элемент попапа. Удобно использовать для работы с DOM-элементами попапа. Например, получить содержимое поля email можно при помощи такого кода:

var email = LP_tools.element.querySelector('input[name="email"]');

LP_tools.onShow

Событие, которое вызывается при показе попапа.

LP_tools.onSubmit

Событие, которое вызывается при отправки формы попапа.

LP_tools.onClose

Событие, которое вызывается при закрытии формы попапа.

Метод window.LP_show(popup_ID)

Метод позволяет показать другой попап на странице сайта. Аргумент метода — числовой ID попапа. Попап, который требуется показать, должен быть включен, и в его настройках показа должно быть установлено «По JavaScript вызову».

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

LP_tools.onSubmit = function() {
    window.LP_show(<ID второго попапа>);
}

Настройка внешнего вида формы в поп-апе

Настройка осуществляется на одноимённой вкладке страницы редактирования формы в поп-апе:

Расположение появления поп-апа

Мы оставили только те варианты, которые действительно работают: нижнее левое, нижнее правое и центральное расположения.

При настройке попапа следует учитывать, что расположение не влияет на вывод стандартных попапов на смартфонах. Там всегда используется полноэкранное центральное расположение такого вида:

Используемый шрифт

Здесь выбирается коллекция шрифтов, которые могут быть использованы в поп-апе:

  • Без засечек: Helvetica Neue, Helvetica, Arial, sans-serif;
  • С засечками: Georgia, Times New Roman, Times, serif;
  • Наследуемые с сайта.

Как правило, лучший результат даёт последний вариант.

Цвет основных элементов

Можно изменять цвет:

  • Фона формы;
  • Заголовка;
  • Текста описания;
  • Текста кнопки;
  • Фона кнопки;
  • Фона кнопки при наведении.

В верхнем правом углу вкладки «Внешний вид» вы можете активировать режим «Тонкой настройки».

В следующем разделе мы расскажем, как его применять.

Создание формы в поп-апе

Создание форм с тонкой настройкой внешнего вида, условий показа и таргетинга — это ключевой функционал сервиса LeadPlan.

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

Чтобы создать форму в поп-апе, в разделе «виджеты» кликните по ссылке «Создать виджет»:

В интерфейсе создания/редактирования виджета вы можете его переименовывать, настраивать внешний вид, содержимое, условия показа, таргетинг и интеграции.

В процессе работы вы можете просматривать в режиме раельного времени изменения внешнего вида получающейся формы на компьютере, смартфоне, непосредственно на вашем сайта (если код LeadPlan на сайте уже установлен):

Черновик попапа на вашем сайте будет загружен только условии наличия в URL специального параметра esd=[id_черновика]. Поэтому его не увидят посетители сайта.

Ссылка на черновик вида https://anysite.ru/?esd=[id_черновика] будет доступна с любого устройства, поэтому её можно использовать для тестирования совместимости или для согласования дизайна.

Данные отправляемые в формах предпросмотра не сохраняются и не передаются в интеграции.