Как сделать уведомления на сайте в 2026: на странице и push

Уведомлениями на сайте называют три разные вещи: короткое сообщение прямо на странице («Заявка отправлена», «Заполните телефон»), браузерный push, который приходит человеку позже, когда сайт уже закрыт, и сигнал вам о новой заявке в Telegram или на почту. Делаются они по-разному и стоят разного труда. Ниже по каждому виду: что нужно, сколько это стоит, готовый пример кода и честный вывод, что стоит поставить почти любому сайту, а что чаще раздражает людей.

Три вида уведомлений, которые легко перепутать

Сначала определитесь, кого и когда вы хотите оповестить. От этого зависит объём работы: от десяти минут до отдельного мини-проекта.

• Сообщение на самой странице. Плашка внизу экрана, красная подсказка под полем, полоска сверху «Изменения сохранены». Живёт внутри открытой вкладки и не требует никаких разрешений.
• Браузерный push. Системное окошко, которое приходит, даже когда человек ушёл с сайта. Нужны разрешение пользователя, служебный файл на сайте и сервис рассылки.
• Уведомление вам как владельцу. Человек отправил форму, и через секунду сообщение падает в ваш Telegram или на почту. Посетитель его вообще не видит.

Сообщения на странице: то, что нужно почти всем

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

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

Несколько правил, которые сильно улучшают такие плашки: одно сообщение за раз, жизнь 3-5 секунд для успеха и без автоскрытия для ошибки (её нужно успеть прочитать), плашка не перекрывает кнопку, по которой только что кликнули, и текст говорит, что делать дальше, а не только «Ошибка».

Технически всё это один небольшой блок и одна функция. Вот минимальный вариант, который можно вставить на любую страницу и вызывать из обработчика формы командой showToast('Заявка отправлена').

<div id="toast" role="status" hidden></div>

<style>
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  max-width: 90%; padding: 12px 18px; border-radius: 10px;
  background: #222; color: #fff; font-size: 15px; z-index: 100;
}
</style>

<script>
function showToast(text) {
  const el = document.getElementById('toast');
  el.textContent = text;
  el.hidden = false;
  clearTimeout(el._t);
  el._t = setTimeout(function () { el.hidden = true; }, 3000);
}
</script>

Атрибут role="status" здесь не украшение: он говорит программам чтения с экрана, что в этом месте появляется важное сообщение, и человек с плохим зрением тоже узнает, что заявка ушла. Просить ИИ добавить его стоит явно, сам он про это вспоминает не всегда.

Как попросить нейросеть добавить уведомления на страницу

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

1. Назовите события. «После успешной отправки формы, при ошибке валидации и при ошибке сети показывай короткое сообщение внизу экрана».
2. Задайте вид и поведение. Цвет фона, скругление, время показа, что ошибка не скрывается сама, что одновременно видно только одно сообщение.
3. Попросите один общий механизм. «Сделай одну функцию showToast(text, type) и вызывай её отовсюду, не дублируй код в каждой форме».
4. Попросите тексты по-русски и по делу. Нейросеть любит «Success!» и «Что-то пошло не так»: замените на конкретику, что случилось и что делать.
5. Проверьте три сценария: успех, пустое поле и отключённый интернет. Именно на третьем обычно выясняется, что сообщения об ошибке нет вовсе.

Самое частое, что я вижу в собранных с ИИ сайтах: форма отправляется, а человек не понимает, ушла заявка или нет. Одна плашка «Спасибо, заявка принята» возвращает больше заявок, чем переделка дизайна всей страницы.

По теме: Как сделать сайт на ноутбуке в 2026: что нужно из программ и железа

Браузерные push: что нужно и почему это отдельная история

Push это уведомление, которое приходит человеку потом, когда вашего сайта на экране уже нет. Оно работает не как плашка на странице, а через связку из нескольких обязательных элементов, описанных в документации Push API на MDN.

• Сайт по HTTPS: без защищённого соединения ничего не заработает.
• Service worker: служебный файл-скрипт, который живёт в браузере отдельно от вкладки и принимает сообщения даже при закрытом сайте.
• Явное разрешение пользователя: без него браузер не отдаст подписку.
• Подписка (PushSubscription): уникальный адрес и ключи шифрования, которые сайт получает от браузера и передаёт на свой сервер.
• Сервер или сервис рассылки: кто-то должен по этому адресу отправлять сообщения, сам сайт этого сделать не может.

Из-за последних двух пунктов push почти никогда не делают руками: берут готовый сервис. Например, у SendPulse базовый тариф web push бесплатный до 10 000 подписчиков, но с брендированием формы подписки, а тариф Pro на 30 000 подписчиков стоит от 24 долларов в месяц (актуальные тарифы). Сервис даёт скрипт для вставки на сайт и панель, где вы пишете текст рассылки.

На iPhone и iPad есть ограничение, о котором узнают уже после запуска: push там работают только начиная с iOS и iPadOS 16.4 и только для сайта, добавленного на домашний экран через «Поделиться» → «На экран «Домой»». Для обычной вкладки Safari подписки не будет, и сайту нужен манифест с параметром display в значении standalone или fullscreen (требования Apple в блоге WebKit). Как превратить сайт в такое приложение, мы показывали в разборе про PWA и обёртки сайта в приложение.

Планка постепенно снижается: в Safari 18.4 и 18.5 Apple добавила Declarative Web Push, вариант без установки service worker (анонс WebKit). Но правило пока прежнее: push это отдельный проект на день-два, а не галочка в конструкторе.

Почему нельзя просить разрешение сразу при заходе

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

• Разрешение нужно запрашивать в ответ на действие человека, например по клику на кнопку «Подписаться на новости». Safari и Firefox без такого жеста запрос вообще не покажут, а на клик опирается и пример в документации метода requestPermission.
• В Chrome есть тихий режим показа запроса, при котором окно вообще не разворачивается, а сайты, злоупотребляющие уведомлениями, попадают под ограничения автоматически (пояснение Chromium).
• Отказ практически необратим. Если человек нажал «Блокировать», второй раз вы его не спросите: он должен сам залезть в настройки сайта в браузере, чего не делает почти никто.
• Ранний запрос ломает первое впечатление. Человек ещё не понял, куда попал, а от него уже чего-то хотят, и часть посетителей просто закрывает вкладку.

Рабочая схема другая: сначала польза, потом просьба. Сделайте кнопку с честным обещанием («Присылать уведомления о новых статьях, 1-2 раза в неделю») и показывайте её тем, кто уже что-то прочитал или положил в корзину.

По теме: Как сделать сайт-визитку в 2026: три способа и готовый промпт

Уведомления владельцу сайта: заявка в Telegram и на почту

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

• Telegram. Свой бот отправляет вам сообщение методом sendMessage (официальная документация Bot API). Учтите ограничение платформы: бот не может написать первым, поэтому один раз откройте диалог с ним и нажмите «Старт». Как завести бота, разобрано в статье про создание бота в Telegram.
• Почта. Надёжнее для архива и хуже по скорости: письма попадают в спам чаще, чем принято думать, поэтому почту лучше держать как дубль, а не единственный канал.
• Таблица. Заявки складываются в Google Таблицу или подобный сервис, а уведомление приходит в мессенджер. Удобно, когда заявки обрабатывает не один человек.

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

Что стоит делать, а что чаще раздражает

Честный итог по трём видам, без попытки продать вам сложность.

• Делать почти всем: сообщения на странице после отправки формы и при ошибках. Полчаса работы, заметный эффект на число доведённых заявок.
• Делать всем, у кого есть форма: уведомление о заявке себе в Telegram. Самый дешёвый способ перестать терять клиентов.
• Делать осторожно: браузерные push. Оправданы, когда людям правда нужны ваши новости (расписание, статус заказа) и когда есть кому вести рассылку.
• Не делать: запрос разрешения на входе, ежедневные рекламные push, плашки с обратным отсчётом и «сейчас этот товар смотрят 14 человек». Это раздражает и читается как манипуляция.

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

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

Можно ли сделать уведомления на сайте бесплатно?

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

Почему мои push не приходят на айфон?

Скорее всего, сайт открыт как обычная вкладка Safari. На iOS и iPadOS push доступны с версии 16.4 и только для сайта, добавленного на домашний экран, при наличии манифеста с display standalone или fullscreen. Проверьте оба условия, чаще всего дело в первом.

Человек случайно нажал «Блокировать», можно ли спросить ещё раз?

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

Нужны ли уведомления на маленьком сайте-визитке?

Push точно нет, а сообщение об отправленной заявке и дубль этой заявки вам в Telegram нужны даже на одностраничнике. Это как раз тот случай, когда полчаса работы окупаются с первого клиента.