Попап на Тильде: вызов по событию, а не по кнопке

Тильда показывает попап по клику - у любого поп-ап блока есть элемент (кнопка, картинка, текстовая ссылка) с атрибутом href вида #popup:name, и клик по нему запускает окно. На практике половина заявок на доработку попапа звучит иначе: показать окно через 15 секунд после захода на страницу, когда посетитель долистал лендинг до середины, или в момент, когда курсор уже тянется к крестику вкладки. Кнопка тут ни при чём - нужно вызвать тот же попап, но по событию в браузере. Показываю, как это сделать штатным попапом Тильды и своим скриптом, без сторонних виджетов.

Как на самом деле открывается попап в Тильде

У поп-ап блока (подходят BF501N, BF502N, BF503, BF504 из категории «Форма») ссылка-линкхук показана прямо на блоке, и она же лежит в его «Контенте», в поле «Ссылка». Там её и меняют на произвольное имя вида #popup:superpopup. Дальше это имя подставляется в href любого элемента на странице: #popup:name. Скрипт Тильды слушает клики по всем элементам с таким атрибутом через делегирование событий на уровне документа, а не только по кнопке конкретного блока. Поэтому ссылку на попап можно повесить на картинку, пункт меню или текст в статье, и это будет штатное поведение, а не взлом вёрстки.

Отсюда практический вывод для программного вызова: не нужно искать скрытый API попапов. Достаточно найти на странице ссылку с нужным href и эмулировать по ней клик через JavaScript, сработает тот же обработчик, что и при обычном клике мышью.

Зачем вызывать попап по событию, а не по клику

Кнопочный попап решает задачу «нажал - увидел». Событийный решает другую: показать предложение в момент, когда вероятность отклика выше, а не когда посетитель сам догадался нажать на баннер. На практике чаще всего просят такие сценарии:

• Exit-intent - предложение или скидка в момент, когда посетитель уже собирается закрыть вкладку;
• Показ при прокрутке - лид-магнит или подписка после того, как человек дочитал статью до середины;
• Таймер - напоминание об акции или брошенной заявке через 20-30 секунд после захода на страницу;
• Успешная отправка формы - допродажа или приглашение в Telegram-канал сразу после заявки.

Первые три сценария в Тильде штатные, кода они не требуют: рядом с поп-ап блоком ставят блок-триггер из категории «Другое» и прописывают в его «Контенте» ту же ссылку, что у попапа. Прокрутка - блок T183, таймер - T188, у него в «Настройках» есть поле «Таймер (в секундах)», уход со страницы - T723, он срабатывает при подведении курсора к верхней границе браузера. Свой скрипт нужен только там, где условие показа выходит за рамки этих трёх триггеров. Последний завязан на то, что происходит после отправки формы, и для него обычно проще встроить приглашение в само сообщение об успехе, чем городить отдельный обработчик поверх формы.

Показ попапа при прокрутке страницы

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

<script>
document.addEventListener('scroll', function () {
  if (localStorage.getItem('promoPopupShown')) return;
  var scrolled = window.scrollY + window.innerHeight;
  var pageHeight = document.body.scrollHeight;
  if (scrolled / pageHeight > 0.6) {
    var trigger = document.querySelector('a[href="#popup:promo"]');
    if (trigger) {
      trigger.click();
      localStorage.setItem('promoPopupShown', '1');
    }
  }
});
</script>

Значение 0.6 - это 60% высоты страницы, для статьи в блоге разумно ставить именно такой порог, чтобы попап появлялся ближе к концу текста, а не мешал чтению с самого начала. Имя попапа в querySelector меняю на реальный ID, заданный в настройках блока.

Попап по таймеру и в момент, когда посетитель уходит со страницы

Таймер и exit-intent обычно ставлю вместе: таймер подстраховывает тех, кто просто долго читает и не двигает мышь к вкладкам браузера, а exit-intent ловит тех, кто уходит раньше.

<script>
function showPopupOnce(popupHref) {
  if (localStorage.getItem('exitPopupShown')) return;
  var trigger = document.querySelector('a[href="' + popupHref + '"]');
  if (trigger) {
    trigger.click();
    localStorage.setItem('exitPopupShown', '1');
  }
}

setTimeout(function () {
  showPopupOnce('#popup:offer');
}, 30000);

document.addEventListener('mouseleave', function (e) {
  if (e.clientY < 10) {
    showPopupOnce('#popup:offer');
  }
});
</script>

Таймер здесь - 30 секунд (30000 миллисекунд). Событие mouseleave с проверкой e.clientY < 10 срабатывает, когда курсор уходит за верхнюю границу окна, именно так пользователь тянется к крестику вкладки или адресной строке. На мобильных это событие не работает: там нет курсора и нет mouseleave, поэтому для мобильного трафика есть смысл оставить только таймер или прокрутку, а exit-intent не подключать вовсе.

Куда вставлять код на Тильде и что обычно ломается

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

Из практики - три вещи, из-за которых скрипт «не работает»:

• ID попапа в href не совпадает с реальным ID блока: Тильда генерирует его автоматически и может дописать окончание вроде -2, если на странице несколько похожих блоков;
• Скрипт вставлен в настройки одной страницы, а попап нужен на другой: код не переносится между страницами автоматически;
• Ограничение показов не настроено. У штатного триггера за это отвечает поле Cookie life time в его «Настройках»: время в днях, на которое запоминается посетитель. 10 - показывать не чаще раза в 10 дней, 365 - один раз за год, пустое поле - показ при каждом заходе. В своём скрипте ту же роль играет флаг в localStorage, без него окно лезет на каждой прокрутке заново.

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

Сколько стоит доработка попапа

Один триггер, скролл, таймер или exit-intent с ограничением повторных показов, собирается штатными блоками T183, T188 и T723 и полем Cookie life time, то есть без кода и без бюджета на разработку. Платить есть смысл только за то, чего в триггерах нет: условие показа, которое они не умеют, или разбор ситуации, когда попап и триггер не связались. Такая точечная доработка укладывается в цену кастомного скрипта для Tilda: от 3 000 ₽. Если попап нужно завязать на CRM, показывать разный контент в зависимости от источника трафика или сочетать с готовыми модулями вроде зон доставки, это уже комплексная интеграция для Tilda, от 40 000 ₽, потому что здесь появляется логика на стороне сервера и тестирование на реальных заявках.

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

Частые вопросы

Можно ли показывать попап только новым посетителям, а не тем, кто его уже видел?

Да, для этого и нужен флаг в localStorage из примеров выше. Если данные не должны сбрасываться при очистке браузера, флаг можно хранить в cookie с нужным сроком жизни, принцип тот же: перед показом проверяем, стоит ли отметка, после показа её ставим.

Почему exit-intent не срабатывает на телефоне?

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

Как показать разные попапы на разных страницах Тильды?

Каждой странице задаю свой ID попапа в настройках блока и вставляю код в поле «Ещё код» именно этой страницы, а не в настройки всего проекта. Если логика показа одинаковая для всех страниц, а меняется только имя попапа, можно вставить общий скрипт в настройки проекта и определять нужный ID через window.location.pathname внутри самого кода.

Помешает ли такой скрипт работе форм, интеграции с CRM или Т‑Банком?

Нет. Скрипт только эмулирует клик по существующей ссылке попапа, он не трогает обработку самой формы, вебхуки и настройки платёжных систем. Форма внутри попапа отправляется и уходит в CRM или Т‑Банк точно так же, как если бы посетитель открыл окно вручную.