Панель уведомлений вверху сайта: как сделать её самому

Этот материал для владельцев сайтов и маркетологов малого бизнеса: как сделать панель уведомлений вверху сайта, какие варианты существуют и какой из них выбрать.

Панель уведомлений вверху сайта - это тонкая полоса с коротким текстом и кнопкой, которая закреплена в верхней части страницы. Основное назначение таких полос - сообщить посетителю одну важную вещь: про акцию, новинку или призыв подписаться. Собрать её можно вручную на HTML, CSS и JavaScript или поставить готовым плагином на WordPress. Основы простые, но от выбора места, текста и поведения при закрытии зависит, поможет ли панель вашему бизнесу или начнёт раздражать пользователя.

Здесь разобрано, что это за полоса и когда она нужна бизнесу, а дальше - как собрать её вручную и через плагин WordPress, что проверить, чтобы она не мешала читателям. Всплывающие окна по центру экрана, формы заявок и боковые баннеры упоминаются только по касательной. Речь о сайтах на WordPress и на чистом HTML: конструкторы работают похоже, но интерфейс у них другой, поэтому их не разбираю. Чек-лист в конце статьи должен помочь проверить результат.

Что такое панель уведомлений вверху сайта и зачем она нужна

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

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

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

Какие функции есть у панели. Главная - показать сообщение и вести посетителя на нужную страницу. Дополнительно полосу можно менять в зависимости от темы сайта, подбирать цвет и запоминать, что человек уже её закрыл, чтобы не показывать на каждой странице. Простой вариант - одна полоса с текстом и кнопкой, без анимации. Многое из этого делается парой строк кода или одной настройкой плагина. Выберите цвет так, чтобы текст читался с телефона, и дайте возможность скрыть полосу.

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

Когда панель уведомлений нужна бизнесу

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

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

Анонс акции и новый продукт работают лучше всего, когда срок ограничен или товар действительно новый. Сбор почты - другой случай: полоса обращается к тем, кто уже знает бренд. Если хотите увеличить базу, держите кнопку подписки на рассылку на виду, но не добавляйте в список никого без согласия. Для электронной почты нужна явная галочка согласия, иначе жалобы неизбежны.

Полезно также сообщать о гарантии возврата или сроках доставки прямо в полосе. Такая строка показывает условия до того, как открыл карточку товара. Ссылку на подробности ставьте рядом с текстом. Что подойдёт вашему бизнесу, зависит от того, что чаще всего спрашивают клиенты.

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

Социальные сети тоже подходят как цель, но ссылки на них лучше ставить вторым сценарием, а не первым. Группа в социальных сетях растёт заметнее, когда сначала работает акция или подписка. Если на сайте больше двух панелей, посетитель перестаёт их замечать, и каждая новая строка снижает эффект предыдущей. Одна-две панели на сайт - разумный предел, остальное переносите в блоки страницы.

Обновления каталога или условий оплаты тоже удобно сообщать полосой, пока клиенты привыкают к изменению. После добавления товара в каталог или запуска интеграции с платёжным сервисом полосу можно убрать. Меняйте текст от страницы к странице: на карточке товара полоса может напоминать про доставку, а в блоге про подписку. Типы сообщений разделяйте по важности, основное правило - не менять панель без причины.

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

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

из практики студии «Мельница»

Способ 1: делаем панель вручную на HTML, CSS и JavaScript

В этом уроке собираем полосу с нуля. Если нужна не полоса вверху, а липкая боковая панель или липкая плавающая контактная форма, код почти тот же, меняются только координаты блока. Собрать панель вручную проще, чем кажется: нужны редактор кода и браузер, а сама панель укладывается в несколько строк. HTML задаёт текст, CSS отвечает за дизайн, JavaScript - за действие по клику. Окно при этом не перекрывает страницу, а остаётся тонкой полосой.

Шаг 1. Создайте блок-контейнер в начале body и поставьте внутрь текст и span с классом closebtn. Этот значок - кнопка закрытия. Символ пишется как ×, иначе браузер покажет текст как есть.

Шаг 2. Чтобы настроить фон и отступы, добавьте CSS. После добавления блока задайте контейнеру position: relative, иначе значок уйдёт в другое место. Код целиком:

<section id="notice"><span>Акция до пятницы</span><span class="closebtn" onclick="closeNotice()">&times;</span></section>
<style>#notice{position:relative;background:#ffe9a8;padding:10px 40px 10px 16px;transition:opacity .5s}.closebtn{position:absolute;right:16px;cursor:pointer}</style>
<script>
function closeNotice(){var n=document.getElementById("notice");n.style.opacity="0";setTimeout(function(){n.style.display="none"},500)}
</script>

Шаг 3. Функция closeNotice гасит панель через opacity: значение 0 означает полную прозрачность. Через setTimeout, спустя полсекунды, элемент получает display: none и пропадает из потока страницы, поэтому текст поднимается вверх. Свойство display: none скрывает панель целиком.

Проверьте результат в браузере Chrome. Нажмите на крестик и обновите страницу: панель не должна вернуться. Если она отображается снова, откройте консоль, которой пользуются разработчики, и посмотрите строки с ошибками. Неверный id или опечатка в имени функции ломают всё, поэтому без проверки не стоит пропускать ни одного шага. Включите режим эмуляции телефона в инструментах разработчика браузера и проверьте панель там.

Текст панели держите коротким, а разметку делайте простой: так код проще читать и поддерживать. Закрывать панель по клику должно быть понятно без подсказки.

Способ 2: готовые плагины WordPress и Bootstrap

Если ваш сайт работает на WordPress, проще всего установите готовый плагин. Откройте магазин плагинов в разделе «Плагины» (в актуальных версиях WordPress), нажмите «Добавить новый» и найдите его по слову «уведомление». После установки нажмите «Активировать». Чтобы включить полосу на всех страницах, выберите её в настройках.

1. В оформлении задайте цвет фона, размер шрифта и позицию вверху страницы.
2. Впишите текст и ссылку, например «популярная статья: как не переплачивать за запчасти».
3. Выровняйте текст по центру в конструкторе и проверьте, что плагин не ломает меню и не конфликтует с другими элементами сайта.
4. Если нужно собирать подписчиков на рассылку, подключите поле формы или виджет чата через интеграции.

Ниже варианты: подборка лучших и популярных по данным обзора Premio. Тарифы меняются, поэтому на момент написания бесплатную и платную версии сверяйте с описанием плагина. Бесплатную версию можно скачать из каталога.

Если сайт собран на Bootstrap, панель делают из компонента alert. Класс alert задаёт оформление, а alert-dismissible добавляет кнопку закрытия btn-close. Атрибут role="alert" нужен, чтобы программы чтения с экрана объявили сообщение. После закрытия срабатывает событие closed.bs.alert, к нему можно привязать запоминание выбора.

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

Таймер обратного отсчета и динамические панели

Таймер обратного отсчета добавляет полосе срочности: часы, минуты и секунды до конца акции видны сразу. Среди эффективных тактик, по моему опыту, это одна из самых простых: эффект FOMO (страх упустить выгоду) работает без длинного текста. Дизайн таймера обратного отсчета повторяйте с цветом полосы, а анимацию делайте спокойной: эффекты появления не должны отвлекать.

Таймеры бывают двух видов. Evergreen-таймер (вечнозеленый, то есть такой, который у каждого посетителя начинается заново) подходит для постоянных предложений. У фиксированного отсчета одна дата окончания для всех, поэтому он нужен для акции до конкретного дня.

Такой таймер требует плагина NotificationX PRO, потому что обычная полоса такой отсчет не ведёт. Плагин сам обновляет отсчет автоматически, включает настройку длительности и текста. Персональный срок можно вести через cookies (небольшие файлы в браузере, с учетом согласия посетителя): дата первого визита записывается, и отсчет идёт от неё. Кнопку закрытия при этом оставьте видимой. Нижний край страницы подходит для таймера не хуже верхнего, и отсчет идёт вниз до нуля.

Когда отсчет доходит до нуля, не пишите «0 секунд». Уберите панель или замените текст на нейтральную фразу. Фальшивый дедлайн, который снова запускается при обновлении, быстро теряет доверие читателя.

Как включить уведомления с сайта и где панель на телефоне

Как включить уведомления с сайта?

Чтобы включить уведомления с сайта, нажмите «Разрешить» в запросе браузера при первом заходе. Если запроса нет или вы отказались, откройте значок замка в адресной строке и включите доступ к уведомлениям, выбрав «Разрешить». В Chrome на момент написания путь такой: Настройки → Конфиденциальность и безопасность → Настройки сайтов → Уведомления.

Для владельца сайта веб-уведомления (push) включаются в личном кабинете сервиса рассылки. Без разрешения посетителя браузер Chrome не покажет ни одного сообщения, и это правило не обойти кодом. Разрешение выдаётся отдельно для каждого устройства и в каждом профиле браузера, поэтому проверяйте его и на телефоне, и на компьютере.

Где на телефоне находится панель уведомлений?

На Android панель уведомлений открывается, если сдвинуть шторку сверху вниз. На iPhone с Face ID свайп вниз от правого верхнего угла открывает центр уведомлений, а на старых моделях с кнопкой «Домой» жест начинают от центра верхнего края.

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

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

Доступность, мобильная версия и требования Google к баннерам

Доступность важна не только слабовидящим, а всем, кто пользуется сайтом без мыши. Пометьте панель атрибутом role="alert": программа чтения с экрана объявит сообщения сразу. Когда текст меняется, используйте aria-live="polite", чтобы речь не перебивалась. Такая разметка понятна тем, кто пользуется клавиатурой или программой чтения с экрана, и заодно помогает доверию к сайту.

Кнопка закрытия должна объяснять роль сама. Голый крестик программа чтения назовёт знаком умножения, поэтому добавьте aria-label="Закрыть уведомление" и сделайте кнопку доступной клавишей Tab. Панель, которая работает только мышью, неполная. Многие узнают о такой ошибке только после жалобы посетителя.

Мобильная версия требует отдельного взгляда, места на телефоне меньше. Рекомендации Google Search Central не запрещают баннеры вверху, если они занимают небольшую долю экрана и не мешают доступу к контенту. Проверьте на нескольких устройствах, что полоса не закрывает первый экран и не перекрывает меню. Видимость текста на маленьком экране важнее всего: поисковая выдача ведёт человека именно на мобильную версию. Требования Google к баннерам описаны в справке Search Central.

Google считает навязчивыми полноэкранные окна, которые закрывают контент. Если человек пришёл из поиска, а перед ним окно с подпиской без видимого крестика, до текста он не доберётся. Подписку лучше предложить полосой или блоком, где текст остаётся на месте.

Строка предупреждений о cookies не должна соседствовать с другой полосой сверху, иначе это выглядит как поломка. Если акция закончилась, сразу меняйте статус панели и текст. Без необходимости не добавляйте вторую полосу. Ошибки вёрстки случаются чаще, чем кажется. После правки стилей или обновления сайта проверяйте панель заново на телефоне, ведь изменения в CSS часто ломают перенос строк.

Для проверки на телефоне JavaScript и CSS должны быть включены, иначе полоса не появится. Проверяйте панель в обычном профиле без расширений и в последней версии Chrome, потому что у посетителя расширения обычно не стоят. Если на странице оформления заказа полоса мешает вводу, стоит отключить её именно там. Так помогаете и поисковой выдаче, и посетителю, который пришёл с телефона.

Типичные ошибки, чек-лист и следующие шаги

Ошибки в панелях повторяются из сайта в сайт, поэтому список ниже полезен перед запуском.

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

Чек-лист внедрения из семи пунктов:

1. Выберите один сценарий и одну цель.
2. Напишите текст в одну строку; соответствующая кнопка начинается с глагола.
3. Соберите панель вручную или поставьте плагин и задайте цвета.
4. Добавьте кнопку закрытия с подписью и role="alert".
5. Сохраните выбор посетителя, например в localStorage по отдельному ключу.
6. Проверьте на телефоне и в Chrome, что меню и формы доступны.
7. Замерьте клики по кнопке за неделю и решите, оставлять ли панель.

Попробуйте для начала один новый сценарий, и если тест прошёл успешно, добавляйте следующие. Проверьте также, что после отправки формы панель не мешает заявке. Прокрутите страницу вниз и убедитесь, что текст не налезает на подвал. Решение простое: если кликов по кнопке почти нет, меняйте призыв, а не цвет.

Если разбираться самому не хочется, задачу можно отдать исполнителю. На Kwork такую панель обычно делают недорого, а при интеграции с почтой, по моим наблюдениям, цена растёт. Логика простая: делаем сами то, что повторяем часто, а готовое отдаём специалисту. Заказ на Kwork обойдётся дешевле вечера отладки.

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

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

Список литературы

1. Google Search Central - Avoid intrusive interstitials and dialogs // Google Search Central, актуальная редакция // developers.google.com
2. W3C - ARIA19: Using ARIA role=alert or Live Regions to Identify Errors // WCAG 2.2 Techniques, актуальная редакция
3. Mozilla Developer Network - ARIA: alert role // MDN Web Docs, актуальная редакция
4. Google Chrome Help - Use notifications to get alerts // Справка Google Chrome, актуальная редакция // support.google.com