Коджи Танака
Разработка

Потеря лидов из веб-форм: как связать Tally, вебхук n8n и Telegram за 3 узла без сложного бэкенда

1. Введение: почему ручной сбор заявок не работает

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

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

  • Менеджеры не мониторят почту каждую минуту, из-за чего заявки висят без ответа часами.
  • Оповещения на почте теряются в спаме или смешиваются с системными рассылками.
  • Ручной перенос контактов в мессенджеры для распределения между сотрудниками тратит рабочее время и повышает риск человеческой ошибки при копировании номеров телефонов.

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

2. Архитектура решения и стек технологий

Для реализации задачи выбран минималистичный и надежный пайплайн, состоящий из трех связанных компонентов без лишних внешних прослоек:

  1. Конструктор форм (Tally) - интерфейс ввода данных клиентом на сайте с поддержкой нативных исходящих Webhook.
  2. Оркестратор автоматизации (n8n) - принимает входящий HTTP-запрос, разбирает структуру полезной нагрузки (payload) и готовит шаблон сообщения.
  3. Telegram Bot API - доставка готового уведомления менеджеру или в групповой чат отдела продаж.
Потеря лидов из веб-форм: как связать Tally, вебхук n8n и Telegram за 3 узла без сложного бэкенда

[Пользователь заполняет форму Tally]

▼ (HTTP POST / Webhook)

[Узел n8n: Webhook]

▼ ($json.body.data.fields)

[Узел n8n: Edit Fields] ──► (Извлечение: Имя, Телефон, Почта)

▼ (HTML parse_mode)

[Узел n8n: Send a text message] ──► [Рабочий Telegram-чат команды]

Логика движения данных по узлам сценария:

  1. Узел 1: Webhook (n8n-nodes-base.webhook, version 2.2). Настроен на прослушивание входящих POST-запросов по пути webhook-leads. Он принимает сырой JSON-пейлоад от платформы форм сразу после успешной отправки.
  1. Узел 2: Edit Fields (n8n-nodes-base.set, version 3.5). Принимает входящий массив полей формы и преобразует вложенную структуру во внутренние строковые переменные.
  1. Узел 3: Send a text message (n8n-nodes-base.telegram, version 1.2). Принимает сформированные сущности и отправляет HTML-сообщение в заданный chatId через бота.

3. Техническое «мясо» и обработка данных

Основная инженерная деталь интеграции веб-форм заключается в том, как Tally передает данные. Платформа отправляет ответы пользователя не в виде плоского словаря {"name": "Иван"}, а в виде массива объектов fields внутри body.data, где каждое поле идентифицируется уникальным системным хэш-ключом.

Пример входящего пейлоада (исходный JSON от вебхука)

JSON { "body": { "data": { "fields": [ { "key": "question_2bJMKb", "label": "Имя", "type": "INPUT_TEXT", "value": "Иван" }, { "key": "question_x0PeJ9", "label": "номер телефона", "type": "INPUT_PHONE_NUMBER", "value": "+79352225898" }, { "key": "question_ZGzp2v", "label": "Ваша почта", "type": "INPUT_EMAIL", "value": "ivanivanov@gmail.com" } ] } } }

Извлечение и нормализация данных в узле Edit Fields

Чтобы не писать громоздкие скрипты на отдельном Code-ноде, нормализация реализована встроенными выражениями JavaScript прямо в параметрах маппинга узла Edit Fields с использованием безопасного оператора опциональной последовательности (?.):

• Поле имя:

{{ $json.body.data.fields.find(f => f.key === 'ВАША ФОРМА')?.value }}

• Поле Номер Телефона:

={{ $json.body.data.fields.find(f => f.key === 'ВАША ФОРМА')?.value }}

• Поле почта:

={{ $json.body.data.fields.find(f => f.key === 'ВАША ФОРМА')?.value }}

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

Формирование шаблона в Telegram

Сформированные переменные передаются в узел отправки сообщения. Для удобства менеджеров сообщение размечается с помощью parse_mode: "HTML":

=<b>🔥Новая заявка на консультацию</b> <b>имя:</b> {{ $json['Имя'] }} <b>номер телефона:</b> <i>{{ $json['Номер Телефона'] }}</i> <b>почта:</b> <code>{{ $json['почта'] }}</code>

В интерфейсе Telegram телефон выделяется курсивом для визуального считывания, а адрес электронной почты оборачивается в тег

, что позволяет менеджеру скопировать email в буфер обмена одним кликом.

4. Итоги и экономика связки

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

5. Заключение

Интеграция вебхуков и мессенджеров закрывает вопрос потери горячих лидов без необходимости разворачивать кастомный бэкенд на Python или Node.js под каждую лендинг-страницу.

Готовый JSON-шаблон сценария для быстрого импорта в n8n доступен в моём репозитории на GitHub и также как в telegram-посте. Забирайте, подставляйте свои ID полей формы и токен Telegram-бота.

Больше практических сценариев, архитектурных разборов и готовых шаблонов автоматизаций публикую в Telegram-канале «Build > Запуск» (@tanaka_dev).

22