К содержимому
Написать в MAX (новая вкладка)Заявка

Демо-проект — все данные в примерах вымышлены, форма на странице ничего не отправляет

Все работы

Демо-проект

Автоматизация: заявка с сайта в мессенджер и Google Таблицу

Посетитель заполняет форму на сайте, а заявка сразу приходит владельцу в Telegram и одновременно записывается новой строкой в Google Таблицу. Не нужно следить за почтой и переписывать заявки вручную: ничего не теряется, а таблица остаётся списком клиентов. Демо сделано на Telegram; для клиентов делаем такие боты в MAX.

  • Серверная функция
  • Node.js, без зависимостей
  • Telegram Bot API
  • Google Apps Script
  • Автотесты (18)

Что это даёт бизнесу

  • Заявка у вас в телефоне сразу. Сообщение в Telegram приходит, как только посетитель нажал «Отправить» — можно перезвонить, пока клиент ещё на сайте.
  • Заявки собраны в таблице. Дата, имя, телефон, сообщение и страница-источник — в одной строке; таблицу можно фильтровать и делиться ею с менеджерами.
  • Один сбой не ломает всё. Telegram и таблица работают независимо: если один канал недоступен, заявка всё равно дойдёт по другому.
  • Защита от спама. Скрытое поле-ловушка отсекает простых ботов; телефон и имя проверяются до отправки.
  • Не нужен свой сервер. Обработчик — небольшая серверная функция, а таблицу принимает скрипт Google Apps Script.

Схема: путь заявки

Упрощённый вариант схемы. Полная версия с ветками для спама и ошибок — ниже, её можно прокрутить или открыть отдельно.

  1. 1. Посетитель

    Заполняет форму на сайте: имя, телефон, сообщение.

  2. 2. Обработчик

    Серверная функция проверяет данные и приводит телефон к единому виду. Заполнено скрытое поле — это бот: ответ «ок», но ничего не отправляется. Ошибки ввода возвращаются подсказками в форму.

  3. 3. Два канала параллельно

    TelegramBot API: сообщение в чат владельца.
    Google ТаблицаЗапрос с секретом в Apps Script, который дописывает строку на лист «Заявки».

  4. 4. Ответ посетителю

    «Спасибо, заявка отправлена», если сработал хотя бы один канал. Если упали оба — понятная ошибка и можно отправить ещё раз.

Схема потока данных: посетитель отправляет форму в серверную функцию; после проверки заявка параллельно уходит в Telegram и через Google Apps Script в таблицу; посетитель получает ответ «Спасибо», если сработал хотя бы один канал. Спам-бот получает «ок» без отправки, ошибки ввода возвращают подсказки.
Полная схема. Прокрутите картинку вбок.
Открыть схему целиком (новая вкладка)

Попробуйте форму

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

Это демо: данные никуда не отправлены. Форма работает только в вашем браузере; на страницу ничего не передаётся и нигде не сохраняется. Лучше вводите вымышленные данные.

Оставить заявку

Это демо: данные никуда не отправлены.

Здесь появится макет сообщения в Telegram и строки таблицы после отправки формы.

Как подключить к вашему сайту

Кратко. Пошаговая инструкция с проверкой — в README проекта; при заказе всё настраиваем сами.

  1. Бот в TelegramСоздаёте бота у @BotFather (/newbot), получаете токен. Узнаёте chat_id своего чата или группы, куда слать заявки.
  2. Таблица и скриптСоздаёте Google Таблицу, в «Расширения → Apps Script» вставляете код скрипта, задаёте секрет в свойствах и публикуете как веб-приложение. Адрес оканчивается на /exec.
  3. Переменные окруженияВ настройках хостинга — TELEGRAM_BOT_TOKEN, TELEGRAM_CHAT_ID, SHEETS_WEBHOOK_URL, SHEETS_WEBHOOK_SECRET, ALLOWED_ORIGIN. Токены и секреты хранятся только там, не в коде. Можно подключить только один канал.
  4. ПубликацияРазмещаете функцию на хостинге с поддержкой серверных функций — обработчик доступен по адресу /api/lead.
  5. Форма на сайте и проверкаКопируете форму-пример (в ней уже есть скрытое поле-ловушка), указываете адрес обработчика и отправляете тестовую заявку: в Telegram должно прийти сообщение, в таблице появиться строка.

Что важно знать

  • Живой запуск не проверялся. Ключей Telegram и Google для демо нет, поэтому обращения к этим сервисам проверены тестами с подменой запросов (18 автотестов). Перед сдачей клиенту тестовая заявка проходит с его ключами.
  • Персональные данные. Заявки (имя, телефон) проходят через серверную функцию и попадают в Telegram и Google Таблицу — это зарубежные сервисы. Подходит ли это вашим требованиям к хранению данных, решаете вы; на боевом сайте нужны политика обработки данных и согласие. Для строгого случая тот же код переносится на сервер в России.
  • Защита от спама простая (скрытое поле). Если заявки начнут заливать, добавляется капча и ограничение частоты.
  • Если оба канала недоступны, заявка у нас не сохраняется, посетитель видит ошибку. Для критичных заявок можно добавить третий канал, например письмо.

Все работы

Код проекта лежит в закрытом репозитории компании.