Показывать виджет по клику на кнопку

Чтобы виджет появлялся по клику на кнопку или ссылку, нужен ID этой кнопки в коде страницы. Разберём на примере сайта на Tilda.

Шаг 1. Найдите ID кнопки#

1. Откройте страницу сайта и нажмите правой кнопкой мыши на нужную кнопку или ссылку.
2. Выберите «Просмотреть код» (в некоторых браузерах — «Посмотреть код» или «Исследовать элемент»).

3. В открывшейся панели разработчика найдите код выбранной кнопки. При наведении на строку кода элемент подсвечивается на странице.
4. Скопируйте значение атрибута id.

Шаг 2. Узнайте ID виджета#

ID виджета указан в карточке виджета в разделе Виджеты личного кабинета LeadPlan (lk.leadplan.ru). Подробнее — в статье «Управление виджетами».

Функция LP_show показывает виджет в обход его условий показа, поэтому отдельно настраивать их для показа по кнопке не нужно. Подробнее о функциях — в статье «Тонкая настройка формы в поп-апе».

Шаг 3. Добавьте код на страницу#

1. В редакторе Tilda добавьте на страницу блок T123 «HTML-код».

2. Вставьте в блок код:

<script>
document.querySelector('#cardbtn1_790061077').addEventListener('click', () => LP_show(84082));
</script>

где:

• cardbtn1_790061077 — ID кнопки или ссылки из шага 1;
• 84082 — ID виджета из шага 2.

3. Сохраните и опубликуйте страницу.

Если блок с кодом стоит на странице выше кнопки, код может выполниться раньше, чем кнопка появится. Тогда оберните его в обработчик DOMContentLoaded:

<script>
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#cardbtn1_790061077').addEventListener('click', () => LP_show(84082));
});
</script>

Готово: теперь виджет будет появляться по клику на кнопку.

Если что-то не получилось, напишите в поддержку: contact@leadplan.ru.