Перед настройкой виджета, убедитесь, что добавили свой сайт в LeadPlan.
Этап 1. Создаём инлайн-виджет
1. Авторизуйтесь в LeadPlan.
2. Напишите на почту contact@leadplan.ru или в чате на сайте, и мы откроем возможность создавать инлайн-виджеты. К третьему шагу переходите, только после того как сообщим, что всё готово.
3. Нажмите «Создать виджет»:
4. В адресной строке добавьте inline- перед subscribe:
Этап 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-селектор, кликнув по нему:
14. Наведите курсор на ту часть, после которой должен стоять инлайн-виджет, и кликните по ней правой кнопкой мыши. В появившемся списке выберите Copy Unique Selector to Clipboard:
15. Вернитесь на страницу настройки виджета. В блоке «Условия показа» выберите нужный параметр «Расположение» (мы установим После элемента) и вставьте в поле «Селектор элемента» то, что скопировали в предыдущем шаге:
Этап 6. Настраиваем условия показа и таргетинг
16. Ниже в этом же блоке установите остальные условия показа по своему усмотрению. Мы рекомендуем настроить показ инлайн-виджета без задержек, потому что это статический элемент:
17. Настройте таргетинг инлайн-виджета с помощью справки.
18. Чтобы посмотреть, как инлайн-виджет выглядит на странице, нажмите значок «Открыть в новой вкладке»:
Этап последний! Включаем инлайн-виджет
19. Перейдите во вкладку «Виджеты» и активируйте созданный инлайн-виджет:
Готово! Теперь вы собираете лиды через симпатичный инлайн-виджет.
