Как установить и настроить инлайн-виджет в LeadPlan

LeadPlan — читать 3 мин.

Инлайн-виджеты — это форма подписки, которую можно встроить в любое место страницы. Разберём, как самостоятельно подключить инлайн-виджет для сайта.

Сейчас разработчики готовят к релизу новую версию LeadPlan, поэтому некоторые функции (в частности, инлайн-виджеты) пока доступны в только тестовом режиме. Из-за этого к установке прибавится два обязательных шага. Когда выйдет LeadPlan 2.0, процесс станет проще и мы переработаем инструкцию.

Даша Карпова

03 июня 2020 г.

Перед настройкой виджета, убедитесь, что добавили свой сайт в LeadPlan.

Этап 1. Создаём инлайн-виджет

1. Авторизуйтесь в LeadPlan.

2. Напишите на почту contact@leadplan.ru или в чате на сайте, и мы откроем возможность создавать инлайн-виджеты. К третьему шагу переходите, только после того как сообщим, что всё готово.

3. Нажмите «Создать виджет»:

4. В адресной строке добавьте inline- перед subscribe:

В адресной строке добавляем inline к url

Этап 2. Выбираем и скачиваем шаблон

Мы подготовили 7 шаблонов (7 HTML, CSS и JS-кодов), чтобы вы смогли быстро отредактировать их и подключить к своему сайту.

Посмотрите превью инлайн-виджетов в папке. Кроме изображений там лежат 7 папок с файлами каждого шаблона.

Шаблоны инлайн-виджетов

5. Выберите тот, который понравится. Для статьи мы взяли 3-й шаблон:

6. Скачайте на свой компьютер три файла из папки выбранного шаблона. У нас это «3-й шаблон»: 3.html, 3.css и 3.js

Этап 3. Настраиваем код инлайн-виджета

7. В Leadplan поменяйте название виджета и включите режим настройки кода:

Ползунок для перехода к изменению кода виджета

8. Удалите код из блока HTML и вставьте в него HTML-код из скачанного файла:

9. Повторите предыдущий шаг для CSS и HTML-кодов. Вставьте их в поля CSS и JS.

10. Сохраните изменения, нажав кнопку внизу страницы или сочетание Ctrl+S.

Этап 4. Настраиваем содержимое инлайн-виджета

11. Перейдите к блоку «Содержимое», отредактируйте поле «Заголовок» и другие нужные вам параметры:

Блок для настройки пользовательского текста, ссылок, картинок в инлайн-виджете — С помощью инструментов можно вставить ссылку, изображение, эмодзи и т.п.

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

Этап 5. Выбираем место для инлайн-виджета на сайте

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

Если вы разбираетесь в CSS, просмотрите умную статью о селекторах. Если нет — установите в браузере любое расширение для поиска CSS-селекторов. Мы использовали Get Unique CSS Selector. Покажем на примере LeadPlan.

12. Перейдите на страницу сайта, на которой хотите установить инлайн-виджет.

13. Активируйте расширение CSS-селектор, кликнув по нему:

Расширение для получение css-селектора блоков на странице

14. Наведите курсор на ту часть, после которой должен стоять инлайн-виджет, и кликните по ней правой кнопкой мыши. В появившемся списке выберите Copy Unique Selector to Clipboard:

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

15. Вернитесь на страницу настройки виджета. В блоке «Условия показа» выберите нужный параметр «Расположение» (мы установим После элемента) и вставьте в поле «Селектор элемента» то, что скопировали в предыдущем шаге:

Настройка расположения инлайн-виджета в LeadPlan

Этап 6. Настраиваем условия показа и таргетинг

16. Ниже в этом же блоке установите остальные условия показа по своему усмотрению. Мы рекомендуем настроить показ инлайн-виджета без задержек, потому что это статический элемент: