Всплывающее окно на сайт — генератор кода

Триггер решает больше, чем текст. Одно и то же предложение в первую секунду читается как помеха, а после половины прочитанной статьи — как уместное продолжение.

• Доскролл до 50–70%. Лучший вариант по умолчанию. Человек, доехавший до середины, уже решил, что текст ему нужен, и предложение попадает в интерес, а не перебивает его.
• Задержка. Проще всего настроить и проще всего испортить. Окно на второй секунде показывают людям, которые ещё не поняли, куда попали, — это и есть тот самый попап, который все закрывают не читая. Пять секунд — нижняя граница, десять-пятнадцать честнее.
• Уход курсора. Срабатывает, когда курсор уходит за верхний край окна — в адресную строку или к закрытию вкладки. Ловит уже уходящего, поэтому ничего не отнимает у читающих. Работает только на компьютере: на телефоне курсора нет, и любой «exit-intent для мобильных» — это таймер под другим названием. В сгенерированном коде для мобильных так и сделано, честной задержкой.
• Клик по элементу. Формально не всплывающее окно, а модальное по запросу — и самый безобидный формат. Конверсия к показам у него высокая просто потому, что окно видят только те, кто сам нажал.

Отдельно про частоту. Показ без ограничения — самая частая техническая ошибка в самодельных попапах: человек закрыл окно, перешёл на вторую страницу и получил его снова. Это ломает не конверсию, а отношение к сайту. В коде ограничение стоит до отрисовки, а не после, поэтому окно не успевает мигнуть.

Всплывающее окно — это диалог, и у диалога есть обязанности. Ни одна из них не видна глазами, поэтому их и пропускают.

1. Окно объявлено диалогом. role="dialog", aria-modal="true" и aria-labelledby, указывающий на заголовок. Иначе скринридер читает содержимое как обычный кусок страницы, не сообщая, что открылось окно.
2. Фокус входит внутрь. При открытии фокус переводится на первое поле или кнопку. Без этого человек на клавиатуре остаётся там, где был, и Tab гуляет по странице за окном.
3. Фокус не выходит. Ловушка: Tab с последнего элемента возвращается на первый, Shift+Tab с первого — на последний. Это та часть, которую почти никогда не пишут руками, и именно из-за неё модальные окна недоступны с клавиатуры.
4. Фокус возвращается. При закрытии — ровно на тот элемент, с которого окно открыли. Иначе фокус падает в начало документа, и человек заново проходит всю страницу.
5. Esc закрывает. И клик по затемнению тоже. Крестик — настоящая кнопка с aria-label, а не <div> с обработчиком: по <div> нельзя попасть табом и нельзя нажать пробелом.
6. Страница под окном выключена. Пока окно открыто, документ не прокручивается, а остальные узлы получают aria-hidden. Без этого скринридер продолжает ходить по тексту за окном, а на телефоне страница уезжает под пальцем.

Проверить всё это можно за минуту и без инструментов: откройте окно, пройдите его Tab'ом по кругу дважды, нажмите Esc и посмотрите, куда попал фокус. Если фокус вышел на страницу за окном или после закрытия оказался в начале документа — окно сломано, как бы оно ни выглядело.

Цвета кнопки и текста ошибки должны проходить контраст: текст — 4,5:1 к фону, рамка поля с ошибкой — 3:1. Подобрать пару можно в палитре интерфейса, проверить отдельную — в проверке контраста.

У окна есть три строки и примерно одна секунда. Заголовок должен говорить, что человек получит, а не что вы делаете.

Разница не в вежливости, а в том, что во втором варианте названа цена и польза. «Раз в две недели» снимает страх ежедневных писем. «За 15 минут» — обещание, по которому вас можно проверить.

• Кнопка называет результат. «Забрать промокод», «Жду звонка» — а не «Отправить» и не «ОК». Надпись на кнопке читают чаще, чем подзаголовок.
• Снимите возражение в подзаголовке. Что будет с почтой, как часто придут письма, будете ли звонить повторно. Одна такая фраза работает лучше, чем усиление заголовка.
• Не делайте закрытие стыдным. Второй вариант кнопки в духе «Нет, я не хочу экономить» — это приём, который запоминается плохо и про сайт, а не про предложение.
• Не обещайте того, чего не будет. Обещанный за 15 минут звонок, который не случился, стоит дороже, чем не полученная заявка.

Заготовки в генераторе написаны по этим правилам — их можно оставить как есть или переписать в полях «Текст в окне». Если переписываете и хотите проверить, не получилось ли канцелярита, прогоните текст через проверку читаемости.

Два ограничения снаружи, о которых стоит знать до того, как вы поставите окно.

Персональные данные. Почта и телефон — персональные данные, и их сбор по закону № 152-ФЗ требует конкретного и осознанного согласия. На практике это отдельный чекбокс, не отмеченный заранее, с названным оператором, перечнем данных, целью и ссылкой на опубликованную политику. Согласие на ответ по заявке не даёт права на рассылку: для неё нужна отдельная галочка со своей формулировкой. Подробнее это разобрано на странице генератора формы обратной связи — там же лежит полный текст согласия, который подставляется и здесь.

Мобильная выдача. С 2017 года у Google действует отдельная мера против навязчивых межстраничных блоков (intrusive interstitials) на мобильных: окно, которое закрывает основной контент сразу после перехода из поиска, может стоить странице позиций. Под неё не попадают окна по действию пользователя и небольшие баннеры, занимающие разумную долю экрана. Отсюда практический вывод: модальное окно на весь экран сразу после загрузки — худшая комбинация из возможных, а полоса сверху или карточка в углу с доскроллом безопасны.

Поэтому в генераторе задержка меньше пяти секунд помечается предупреждением, а не молча принимается.

Попап — не всегда плюс к конверсии. Есть случаи, где он честно вредит, и лучше знать их заранее.

• Когда трафика мало. Чтобы отличить конверсию 2% от 3% на уровне, которому можно верить, нужны тысячи показов. На сотне визитов в месяц любой результат — шум: вы увидите «2 заявки вместо 1» и решите, что попап работает, хотя это разница в одного человека. Посчитать нужный объём можно в калькуляторе A/B-тестов.
• Когда окно собирает контакты, с которыми никто не работает. Попап поднимает число адресов в базе, а не выручку. Если письма не уходят или уходят через месяц, вы получили список людей, которые вас забыли, и испортили первое посещение сайта. Это самая частая причина, по которой попап «не сработал».
• Когда предложение не связано со страницей. Скидка на первый заказ на странице «Доставка и возврат» — человек читал условия, а ему предложили купить. Попап усиливает намерение, которое уже есть; создать его он не может.
• В поддержке и в личном кабинете. Там человек пришёл с проблемой. Окно с рассылкой поверх экрана, где он ищет, как отменить заказ, читается как издевательство, и именно оттуда приходят жалобы.
• На платном трафике с узким запросом. Вы заплатили за переход человека, готового купить, и перекрыли ему товар просьбой подписаться. Здесь попап отнимает деньги напрямую.
• Когда его ставят вместо исправления страницы. Если люди уходят из-за непонятной цены, отсутствия отзывов или сломанной формы, окно поверх этой страницы ничего не лечит — оно только собирает адреса тех, кто всё равно бы ушёл.

Отдельно про числа. Вендоры попап-сервисов публикуют сводки со средней конверсией около 3% и лучшими результатами около 9–10%. Это данные самих вендоров по своим клиентам, то есть по сайтам, которые уже решили ставить попапы и настраивают их; как оценка того, что получится у вас, они не годятся. Ориентироваться стоит на собственный замер: поставьте окно на половину трафика и сравните не число подписок, а выручку на посетителя.

И последнее: попап решает задачу «получить контакт, пока человек здесь». Задачу «объяснить, как пользоваться продуктом» он не решает — для этого нужны подсказки и туры внутри интерфейса, а не окно на входе. Разница разобрана в статье про продуктовый онбординг.

Три блока, и порядок важен:

1. HTML — в конец <body>, перед скриптом. Если окно лежит внутри контейнера с overflow: hidden или transform, оно обрежется: position: fixed считается от такого предка, а не от окна браузера.
2. CSS — в общий файл стилей или в <style> в <head>. Все классы начинаются с одного префикса, поэтому со стилями сайта они не столкнутся.
3. JS — в конце <body>, после разметки окна. Скрипт ищет окно по идентификатору при запуске и молча выходит, если не нашёл.

В конструкторах то же самое, но через блок произвольного кода: в Тильде это блок T123 «HTML-код», в WordPress — блок «Произвольный HTML» или файл шаблона, в Битриксе — включаемая область. Инструкции по установке без разработчика собраны отдельно: поп-ап без программиста и поп-ап на Тильде.

Если на странице уже есть другое всплывающее окно, следите за z-index: у сгенерированного стоит 9999. И проверьте, что у вас не два окна с одинаковыми идентификаторами полей — иначе label for начнёт указывать не туда.

1. W3C. WAI-ARIA Authoring Practices Guide — Dialog (Modal) Pattern: role, aria-modal, перевод и возврат фокуса, ловушка фокуса, Esc.
2. W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — критерии 2.1.2 (без ловушки клавиатуры), 2.4.3 (порядок фокуса), 2.4.7 (видимый фокус), 3.3.1 (определение ошибки), 1.4.3 (контраст).
3. Google Search Central. Helping users easily access content on mobile — мера против навязчивых межстраничных блоков, действует с января 2017 года.
4. Федеральный закон от 27.07.2006 № 152-ФЗ «О персональных данных» — статьи 9 (согласие), 18.1 (политика оператора).
5. HTML Living Standard — атрибуты hidden, novalidate, autocomplete, inputmode; Web Storage API и исключения при отключённом хранилище.