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

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

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

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

Перед настройкой виджета, убедитесь, что добавили свой сайт в 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-код из скачанного файла:

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. Ниже в этом же блоке установите остальные условия показа по своему усмотрению. Мы рекомендуем настроить показ инлайн-виджета без задержек, потому что это статический элемент:

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

17. Настройте таргетинг инлайн-виджета с помощью справки.

18. Чтобы посмотреть, как инлайн-виджет выглядит на странице, нажмите значок «Открыть в новой вкладке»:

Кнопка для предварительного просмотра получившегося инлайн-виджета
Если вам нравится результат, вернитесь в LeadPlan и нажмите «Сохранить».

Этап последний! Включаем инлайн-виджет

19. Перейдите во вкладку «Виджеты» и активируйте созданный инлайн-виджет:

Активация созданного инлайн-виджета

Готово! Теперь вы собираете лиды через симпатичный инлайн-виджет.

comments powered by HyperComments
Похожие статьи
+85% к конверсии в подписку в интернет-магазине дизайнерских вещей. Кейс DesignBoom

+85% к конверсии в подписку в интернет-магазине дизайнерских вещей. Кейс DesignBoom

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

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

comments powered by HyperComments
Как сегментировать пользователей при подписке

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

Анкеты-сегментаторы — это формы подписки, которые помогают получить дополнительную информацию о подписчике в момент регистрации. Фактически это поп-ап с анкетой. После регистрации пользователь сразу попадает в нужный сегмент.

comments powered by HyperComments
Как настроить сообщение о сборе куки-файлов через LeadPlan

Как настроить сообщение о сборе куки-файлов через LeadPlan

Если ваш сайт собирает куки-файлы, но не получает на это согласие пользователей — компания рискует заработать штраф согласно 152-ФЗ. Чтобы избежать санкций, нужно настроить на сайте виджет о сборе куки.

Вы можете попросить об этом своих IT-специалистов или сделать всё самостоятельно через LeadPlan.

Хорошие новости: если вы уже пользуетесь сервисом LeadPlan или у вас небольшой трафик на сайте (до 10 000 неуникальных просмотров страниц в месяц), услуга будет для вас бесплатной.

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

comments powered by HyperComments