Как сделать сайт с ботом в 2026: связка с Telegram по шагам

Сайт и бот вместе работают ради одного: чтобы заявка или вопрос доходили до вас за секунды, а человеку не приходилось искать, куда написать. Рабочих связок четыре: форма сайта, из которой сообщение падает в Telegram, чат-консультант на странице, кнопка перехода в мессенджер с меткой источника и мини-приложение внутри Telegram. Ниже каждая: как устроена, что соберётся за вечер с помощью ИИ, где нужен сервер и почему токен бота нельзя оставлять в коде страницы.

Четыре связки сайта и бота

У связки сайта и бота есть четыре варианта, и собираются они по-разному. Сначала определитесь, какой нужен вам.

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

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

Заявка с сайта падает в Telegram: как это устроено

Логика короткая: форма отправляет данные не в Telegram напрямую, а на ваш обработчик (небольшую программу на сервере), и уже он вызывает Telegram Bot API. Отправка сообщения там это обычный HTTP-запрос вида https://api.telegram.org/bot<токен>/sendMessage с двумя обязательными полями, chat_id и text (документация Bot API).

1. Создайте бота. Напишите @BotFather команду /newbot, придумайте имя и адрес бота, сохраните выданный токен в надёжном месте.
2. Узнайте, куда слать сообщения. Напишите боту любое слово, откройте в браузере адрес https://api.telegram.org/bot<токен>/getUpdates и найдите в ответе поле chat.id. Это ваш chat_id.
3. Решите, где живёт обработчик. Подойдёт хостинг с поддержкой серверного кода или облачная функция: хостинг для статичных страниц ваш код не выполняет.
4. Свяжите форму с обработчиком. Страница отправляет туда имя, контакт и текст, а в ответ показывает «Спасибо». К заявке полезно добавлять адрес страницы, с которой её отправили.
5. Проверьте на себе. Отправьте тестовую заявку с телефона и с компьютера и посмотрите, все ли поля читаются.

Обработчик занимает пару десятков строк, токен и адрес чата берутся из переменных окружения:

// серверный обработчик: принимает форму и шлёт сообщение в Telegram
const TOKEN = process.env.BOT_TOKEN;   // токен только в переменных окружения
const CHAT_ID = process.env.CHAT_ID;

export default async function handler(req, res) {
  const { name, contact, message } = req.body;
  const text = `Заявка с сайта\nИмя: ${name}\nКонтакт: ${contact}\n${message}`;

  await fetch(`https://api.telegram.org/bot${TOKEN}/sendMessage`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ chat_id: CHAT_ID, text })
  });

  res.status(200).json({ ok: true });
}

Одно ограничение держите в голове: в один чат Telegram просит не слать больше одного сообщения в секунду, в группу не больше 20 в минуту (FAQ Telegram). Для заявок запас огромный, для рассылки темп придётся считать. Промпт для сборки связки:

Помоги собрать приём заявок с сайта в Telegram.
Сделай три вещи:
1) HTML-форму с полями имя, контакт, сообщение и защитой от повторной отправки;
2) серверный обработчик, который принимает эти данные и отправляет их методом sendMessage;
3) обработку ошибки: если Telegram не ответил, покажи это на странице, а не молчи.
Токен и chat_id бери из переменных окружения, в коде страницы их быть не должно.
Мой хостинг: <напишите свой>. Покажи, какие файлы создать и куда вписать значения.

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

Токен бота нельзя оставлять в коде страницы

Токен это одновременно логин и пароль бота: у кого он есть, тот пишет от имени бота, читает входящие и меняет настройки. Всё, что попало в HTML или JavaScript страницы, посетитель видит через инструменты разработчика. Поэтому запрос к api.telegram.org прямо со страницы равносилен публикации токена.

Иногда советуют «спрятать» токен в скрипте или собрать его в коде из кусочков. Это не помогает: страница скачивается на устройство посетителя целиком, вместе со всеми кусочками.

• Токен и chat_id хранятся на сервере, в переменных окружения, а не в файлах сайта.
• Обработчик проверяет входящее: пустые поля, разумную длину текста, ловушку от спама (скрытое поле, которое человек не заполняет).
• Если токен уже попал в открытый код, отзовите его: команда /revoke в @BotFather выдаёт новый, старый перестаёт работать.
• Публичный репозиторий на GitHub это тоже открытый код: файлу с токеном там не место.

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

По теме: Как сделать окно на сайте в 2026: модальное, попап и согласие

Чат на сайте или бот в Telegram: что выбрать

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

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

Кнопка «Написать в Telegram» и метка источника

Самая дешёвая связка занимает пять минут: ссылка на бота, оформленная кнопкой. Ценность появляется, когда к ссылке добавлена метка, по ней видно, с какой страницы человек пришёл. Формат такой: https://t.me/имя_бота?start=МЕТКА. В метке допустимы латинские буквы, цифры, _ и -, длина до 64 символов; открыв такую ссылку, человек запускает бота, а бот получает команду /start МЕТКА (описание deep linking).

• ?start=ceny для кнопки на странице с ценами
• ?start=shapka для кнопки в шапке сайта
• ?start=stati_formy для ссылки из конкретной статьи

Бот читает значение после /start, здоровается нужным текстом и записывает метку к заявке. Через неделю видно, какие страницы приводят людей, а какие только собирают просмотры. Промпт для этой части:

Добавь на сайт кнопку «Написать в Telegram».
Ссылка вида https://t.me/имя_бота?start=МЕТКА, метка своя для каждой страницы.
На телефоне кнопка во всю ширину, с отступом снизу под безопасную зону экрана.
Покажи, куда вставить код и как менять метку, когда появятся новые страницы.
Отдельно объясни, как в боте прочитать значение после /start и записать его к заявке.

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

Мини-приложение: сайт внутри мессенджера

Мини-приложение (Web App) это ваша обычная веб-страница, которую Telegram открывает внутри себя. Человек не уходит в браузер, а бот знает, кто именно открыл приложение.

Требования несложные: адрес обязательно на HTTPS, в <head> до остальных скриптов подключается telegram-web-app.js, после загрузки интерфейса вызывается метод ready() (документация Telegram Mini Apps). Открыть приложение можно несколькими способами:

• кнопкой меню рядом с полем ввода в чате с ботом
• кнопкой под сообщением бота
• прямой ссылкой вида t.me/имя_бота/имя_приложения, её выдаёт @BotFather по команде /newapp

Момент про безопасность повторяется и здесь. Telegram передаёт странице строку initData с данными о том, кто открыл приложение, и доверять ей в браузере нельзя: подпись проверяется на сервере алгоритмом HMAC-SHA-256 с использованием токена бота (о валидации данных). Значит, мини-приложение с личным кабинетом или оплатой потребует серверной части, а витрина или калькулятор нет.

Если задача целиком укладывается внутрь мессенджера (запись, каталог, квиз), отдельный сайт может и не понадобиться. Подробный разбор в статье про бот-приложение в Telegram. Промпт для старта:

Собери мини-приложение Telegram: страница записи на услугу.
Требования: HTTPS; в head до остальных скриптов подключён
https://telegram.org/js/telegram-web-app.js; после загрузки вызывается Telegram.WebApp.ready();
цвета берутся из темы мессенджера, кнопка отправки это MainButton.
Данные записи уходят на серверный обработчик, там же проверяется подпись initData.
Покажи файлы и подскажи, что вписать в BotFather командой /newapp.

Что соберётся за вечер, а где нужен сервер

• За вечер. Кнопка перехода в Telegram с меткой, виджет чата на готовом сервисе, статичная страница мини-приложения без личных данных.
• Вечер плюс аккуратность. Форма, которая шлёт заявки в Telegram, если хостинг умеет запускать серверный код. Время уходит не на код, а на проверки и текст уведомления.
• Не за вечер. Личный кабинет, приём оплаты, бот с памятью и своей базой. Здесь появляется постоянно работающий сервер, а с ним обновления, логи и резервные копии.

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

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

Можно ли отправлять заявки в Telegram без своего сервера?

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

Заявки приходят мне в личку, как показать их всей команде?

Создайте группу, добавьте в неё бота и подставьте в обработчик id этой группы вместо личного (у групп он начинается с минуса). Заявки увидят все, ответит тот, кто свободен. Второй бот для этого не нужен: один умеет и принимать заявки, и вести переписку, и открывать мини-приложение.

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

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

Сообщения перестали приходить, с чего начать проверку?

По порядку: жив ли токен, верный ли chat_id, отвечает ли обработчик (посмотрите его логи), не заблокировали ли вы бота у себя. Быстрая проверка: откройте в браузере https://api.telegram.org/bot<токен>/getMe, рабочий токен вернёт данные бота.