Представьте: ваш чат-бот автоматически получает уведомления об оплате, отслеживает статусы заказов в реальном времени и обновляет данные без вашего участия. Звучит как магия? На самом деле, это работа блока «Входящий Webhook» — одного из самых мощных инструментов платформы Watbot.ru.
В этом руководстве мы детально разберем блок входящего вебхука на примере реального бота службы доставки роллов. Вы узнаете, как принимать HTTP-запросы от внешних систем, обрабатывать их с помощью JavaScript и создавать сложные интеграции без программирования с нуля.
Мы рассмотрим два практических применения: систему рекуррентных платежей (автоматическое списание за подписку) и отслеживание статусов заказов в реальном времени. Эти знания откроют вам доступ к созданию по-настоящему профессиональных ботов с интеграциями любой сложности.
Что такое входящий Webhook и зачем он нужен
Прежде чем погружаться в технические детали, давайте разберемся с основами. Что же такое webhook и почему он так важен для создания продвинутых чат-ботов?
Определение и принцип работы
Входящий Webhook — это блок, созданный для приема HTTP-запросов от сторонних сервисов и их обработки с помощью языка программирования JavaScript на платформе Watbot.ru.
Простыми словами: webhook позволяет внешним системам (платежным сервисам, CRM, системам доставки, базам данных) автоматически отправлять данные в ваш чат-бот. Бот получает эти данные и реагирует на них — отправляет уведомления пользователям, обновляет статусы, выполняет действия.
Это работает по принципу «push-уведомлений»: не бот постоянно опрашивает внешний сервис «есть ли обновления?», а сервис сам уведомляет бота, когда что-то происходит.
Основные возможности блока
С помощью входящего вебхука вы можете:
Получать сообщения от внешних систем. Например, платежная система уведомляет бота об успешной оплате, и бот автоматически активирует подписку пользователя.
Получать обновления данных из внешних источников. Система доставки обновляет статус заказа («готовится», «в пути», «доставлен»), и бот сразу уведомляет клиента.
Интегрироваться с внешними сервисами. CRM-системы, складские программы, аналитические платформы — всё это может взаимодействовать с вашим ботом через вебхуки.
В блоке есть специальные обучающие материалы с подробной документацией и примерами кода JavaScript для обработки входящих запросов. Рекомендую ознакомиться с ними перед началом работы.
Повторение основ платформы
Перед тем как разбирать сложный функционал, давайте быстро освежим базовые навыки работы с конструктором Watbot.ru.
Работа со связями и блоками
Связи между блоками отображаются синими стрелками и показывают логику движения по сценарию. Чтобы удалить связь, наведите курсор — она станет красной — и нажмите на значок корзины.
Чтобы создать новую связь, наведите курсор на черную точку блока, зажмите левую кнопку мыши и протяните стрелку к целевому блоку. Связь установлена!
Добавление блоков возможно двумя способами:
Первый способ — через кнопку «Добавить блок» в верхнем правом углу. Откроется панель со всеми доступными блоками, разделенными по категориям. Есть раздел «Часто используемые» и поисковая строка для быстрого поиска нужного блока.
Второй способ быстрее: наведите курсор на черную точку блока, нажмите правую кнопку мыши — появится контекстное меню. Выберите нужный блок из списка или воспользуйтесь поиском. При таком способе блок добавится сразу с проведенной связью, что очень удобно.
Удаление блоков — наведите курсор на блок, нажмите на корзину и обязательно подтвердите удаление. Блок исчезнет из сценария.
Масштабирование — внизу слева находятся кнопки для увеличения и уменьшения масштаба рабочей области. Настраивайте под свое удобство.
Обзор структуры готового чат-бота
Теперь давайте рассмотрим реальный кейс — чат-бот службы доставки роллов с подпиской и интеграциями. Мы подробно разберем его архитектуру, чтобы понять, как всё организовано.
1. Организация сценариев
Первое, что бросается в глаза — бот не представляет собой один огромный громоздкий сценарий. Вместо этого он разделен на множество логических сценариев, которые отображаются в списке внизу справа.
Некоторые сценарии даже объединены в папки для удобства навигации: личные кабинеты, процессы подписки, обработка заказов и так далее. Это делает работу с ботом намного проще — не нужно прокручивать бесконечное полотно блоков, можно быстро найти нужный сценарий.
Такой подход — лучшая практика при создании сложных ботов. Разделяйте логику на независимые сценарии, и поддержка бота станет в разы проще.
2. Стартовая логика и проверки
После стартового блока бот выполняет несколько последовательных проверок через блоки с условиями.
Первая проверка: содержит ли контакт тег «админ»? Если да — пользователь переходит в специальный сценарий. Если нет — движемся дальше.
Вторая проверка: ознакомлен ли контакт с соглашением об обработке данных? Если пользователь впервые зашел в бота, он еще не давал никаких согласий, поэтому отправляется в сценарий ознакомления с политиками.
Третья проверка: есть ли у пользователя активная подписка? В зависимости от ответа пользователь попадает либо в стандартный личный кабинет (без подписки), либо в премиум-кабинет (с подпиской).
Эта многоступенчатая система проверок обеспечивает персонализированный опыт для каждого типа пользователей.
Сценарий онбординга и согласий
Давайте детально разберем, как новый пользователь проходит первичное знакомство с ботом и дает необходимые согласия.
3. Приветствие и знакомство
Когда пользователь попадает в сценарий «На согласие», первым блоком идет видео-приветствие. Это создает более личный контакт и сразу показывает преимущества подписки.
После видео следует текстовое сообщение с ответами на основные вопросы о сервисе. Здесь объясняются условия работы, преимущества подписки и другая важная информация.
4. Технология подмены сообщений
Обратите внимание на важную настройку в этих блоках. В разделе «Дополнительно» каждого блока включена опция «Подменять предыдущее сообщение в чате».
Что это означает? При нажатии на inline-кнопку (кнопку под сообщением) предыдущее сообщение не останется в истории, а будет заменено новым из следующего блока. Вместо отправки нового сообщения старое просто обновляется.
Как сделать кнопку inline-кнопку? Зайдите в настройки клавиатуры блока. По умолчанию кнопки располагаются внизу экрана как обычная клавиатура. Чтобы кнопка стала inline (отображалась под конкретным сообщением), просто перетащите её снизу наверх в окне настроек и сохраните.
Эта функция подмены включена во всех последовательных блоках онбординга. Зачем? Чтобы не загромождать чат множеством сообщений. Пользователь нажимает кнопки, информация обновляется на месте — всё выглядит чисто и профессионально.
5. Ознакомление с документами
После информационных блоков пользователь должен ознакомиться с юридическими документами:
- Политика обработки персональных данных
- Политика конфиденциальности
- Правила использования Telegram-бота
Все три документа реализованы через мини-приложения. При нажатии на соответствующую кнопку открывается веб-страница внутри Telegram с текстом документа. Пользователь может прочитать всё в удобном формате.
Четвертая кнопка — обычная, с текстом «Ознакомлен». После нажатия на неё начинается обработка через HTTP-блоки.
6. Серия HTTP-запросов для идентификации
После подтверждения ознакомления запускается цепочка из нескольких HTTP-блоков.
Первый HTTP-блок использует метод POST с командой
sendMessage. В чат отправляется сообщение с просьбой поделиться номером телефона для идентификации пользователя.
Кстати, по работе с HTTP-блоками и методом POST на канале есть отдельное подробное видео:
Второй HTTP-блок удаляет предыдущее техническое сообщение, чтобы не загромождать чат.
Блок «Интерпретатор JavaScript» обрабатывает полученный номер телефона с помощью кода.
Блок с условием проверяет результат обработки. Если определенная переменная существует (это означает ошибку валидации), то следует еще один HTTP-запрос с сообщением: «Вы ввели некорректный номер телефона. Пожалуйста, введите номер заново». Пользователь возвращается к вводу данных.
Если переменной нет (номер корректный), запускается блок «Операция над переменной», где данные пользователя сохраняются:
- Телефон записывается в соответствующую переменную
- Telegram ID сохраняется
- Другие данные профиля фиксируются
7. Сохранение в базу и назначение тега
После успешной валидации данных выполняется «Добавление записи в список» с названием «Список клиентов». Все переменные с данными пользователя записываются в этот список — по сути, создается профиль клиента в базе данных бота.
Затем пользователю назначается тег «Ознакомлен». Этот тег будет использоваться в условиях для определения статуса пользователя.
После всех этих операций пользователь переходит в сценарий «Стандартный кабинет» — личный кабинет без активной подписки.
Личные кабинеты: стандартный и премиум
У бота есть два типа личных кабинетов, которые отличаются наличием или отсутствием активной подписки. Давайте разберем каждый.
Стандартный личный кабинет
В разделе «Личные кабинеты» есть два сценария: стандартный и премиум. Стандартный кабинет предназначен для пользователей без оформленной подписки.
После стартового блока идет проверка: есть подписка или нет? Если нет, запускается цепочка сообщений с отображением профиля.
В сообщении показывается:
- Информация о профиле пользователя
- Статус: «Подписка неактивна»
- Детали о том, что дает подписка
Далее пользователю предлагаются кнопки:
«Получать роллы по подписке» — переход в сценарий оформления подписки.
«Подробнее об условиях» — открывается блок с детальной информацией об акции и условиях подписки.
«Больше опций» — открывается меню с дополнительными возможностями:
- Заказать доставку (запуск мини-приложения с каталогом)
- История заказов (мини-приложение с личным архивом)
- Доставка и оплата (информационный блок)
- Связь с администратором
Блок «Доставка и оплата»
Если пользователь выбирает «Доставка и оплата», открывается простой информационный блок с текстом о способах доставки, зонах обслуживания и доступных методах оплаты.
Это статичная информация без сложной логики — просто справочный раздел для пользователей.
Оформление подписки и первый Webhook
Теперь самое интересное — разберем, как работает система подписки с автоматическими платежами через входящий вебхук.
1. Сценарий оформления подписки
Когда пользователь нажимает «Получать роллы по подписке», он попадает в специальный сценарий оформления.
Первый блок — «Операция над переменной». Здесь записываются произвольные значения в переменные, необходимые для дальнейшей обработки платежа.
Второй блок — «Сохранение записи» (добавление записи в список). Если запись с данными пользователя уже существует, она обновляется новыми значениями.
Третий блок — HTTP-запрос для инициализации платежа. Этот запрос обращается к платежной системе и создает транзакцию.
Четвертый блок — еще один HTTP-запрос с методом POST, который генерирует платежную ссылку для пользователя.
Пятый блок — «Добавление записи в список» с операцией над переменной.
Шестой блок — «Интерпретатор JavaScript» для дополнительной обработки данных.
2. Отправка платежной ссылки
После всех подготовительных блоков пользователю приходит цепочка сообщений с информацией о подписке: что включено, стоимость, условия.
Внизу есть кнопка «Оформить». При нажатии пользователь переходит по ссылке для оплаты в платежную систему.
3. Первый входящий Webhook — рекуррентные платежи
После кнопки оплаты в сценарии находится блок «Входящий Webhook». Это первый из двух вебхуков, которые мы разберем в этом боте.
Если открыть настройки блока. Вы увидите две ключевые части:
URL для запросов — уникальная ссылка, которую нужно указать в настройках внешнего сервиса (платежной системы). Когда происходит событие (успешная оплата, ошибка платежа), платежная система отправляет HTTP-запрос на этот URL.
Код JavaScript для обработки — здесь прописана логика обработки входящего запроса. Код анализирует данные, которые пришли от платежной системы, извлекает нужную информацию и выполняет действия.
Этот вебхук реализует рекуррентные платежи — автоматическое списание средств с карты пользователя за продление подписки.
Как это работает:
- Пользователь первый раз оплачивает подписку и сохраняет карту
- Платежная система запоминает карточные данные (токенизирует)
- Каждый месяц система автоматически списывает оплату
- После каждого списания платежная система отправляет уведомление на URL вебхука
- Бот получает уведомление и продлевает подписку пользователю
4. Обработка результатов оплаты
После вебхука стоит блок с условием: оплата прошла успешно или нет?
Если оплата не прошла (недостаточно средств, карта заблокирована и т.д.), пользователь попадает в блок с сообщением об отказе: «Пожалуйста, проверьте баланс карты, попробуйте снова или измените способ оплаты».
Если оплата успешна, выполняется обновление записей в списке клиентов — активируется подписка, записывается дата начала и окончания.
Затем идет еще одна проверка: содержит ли контакт тег «Подписка 30» (активная оплаченная подписка)? Если нет — ведем в стандартный сценарий. Если да — пользователь попадает в премиум личный кабинет.
Премиум личный кабинет
Личный кабинет для пользователей с активной подпиской значительно отличается функционалом от стандартного.
1. Отображение данных подписки
В премиум-кабинете пользователь видит сообщение с расширенной информацией:
- Профиль и контактные данные
- Статус подписки: активна
- Дата начала подписки
- Дата окончания подписки
- Период действия
- Другие детали подписки
Все эти данные подставляются через переменные, которые хранятся в списке клиентов и обновляются после каждого платежа.
2. Функция «Мои подарки»
В премиум-кабинете есть специальная кнопка «Мои подарки». Давайте разберем, как это работает.
При нажатии на кнопку запускается блок с условием: знает ли пользователь о подарках или нет? Если это первое обращение к разделу:
Обрабатывается HTTP-запрос к системе. Приходит текст: «Буквально пару минут готовим подарки. Скоро вам придет сообщение с переходом к выбору подарка. Благодарим за ожидание». Пользователь нажимает кнопку «Хорошо».
Открывается раздел с подарками — здесь отображается информация через переменные
Если пользователь нажимает «Назад», ему назначается тег «Знает о подарках», и в следующий раз этот процесс будет пропущен — подарки покажутся сразу.
После просмотра подарков есть кнопка возврата в активный личный кабинет.
3. Доступ к закрытому каналу
Еще одна эксклюзивная функция премиум-подписки — доступ к закрытому Telegram-каналу.
При нажатии на соответствующую кнопку система генерирует уникальную пригласительную ссылку специально для этого пользователя. Через эту ссылку он может вступить в закрытый канал с эксклюзивным контентом.
Важный момент: когда пользователь отменяет подписку или она истекает, доступ к каналу автоматически удаляется. Система отслеживает статус подписки и при деактивации исключает пользователя из канала. Это обеспечивает защиту эксклюзивного контента.
Отслеживание статусов заказов — второй Webhook
Теперь разберем второе применение входящего вебхука — систему отслеживания заказов в реальном времени.
Сценарий «Ловим статусы»
Этот сценарий полностью построен вокруг интеграции с внешним сервисом доставки, в котором хранится вся информация о заказах: готовятся, в пути, доставлены.
Блок «Входящий Webhook» в этом сценарии. Посмотрим на его содержимое:
URL для запросов — сюда система доставки отправляет уведомления при изменении статуса заказа.
Код JavaScript — здесь прописана логика обработки данных о заказе. В коде видна структура данных, которые приходят от службы доставки:
- ID заказа
- Номер заказа
- Токен безопасности
- Текущий статус заказа
- Дополнительная информация
Когда в системе доставки меняется статус (например, заказ отправился в доставку), система автоматически отправляет POST-запрос на URL вебхука с обновленными данными. Бот получает эти данные и обрабатывает их.
Сопоставление с пользователем
После получения данных о заказе нужно определить, какому пользователю отправить уведомление. Для этого используется блок HTTP-запрос с методом GET.
Этот запрос сопоставляет телефон из данных заказа с телефонами в базе клиентов бота. Так система понимает, кому принадлежит заказ.
Проверка наличия подарков
Далее идет блок с условием: есть ли в заказе переменная с подарком? Подарки — это бонусные позиции для клиентов с подпиской.
Если переменной с подарком нет, проверяется наличие следующей переменной. Если и её нет, выполняется блок «Конвертация телефона» — приведение номера к стандартному формату для корректного сопоставления.
Задание переменных и финальное условие
В следующем блоке задаются переменные для хранения данных о заказе: номер, статус, позиции.
Еще одно условие: есть подарок в заказе или нет? В зависимости от этого формируется разное сообщение пользователю.
Отправка уведомления пользователю
Если подарка нет, пользователю отправляется стандартное сообщение:
«Ваш заказ №[номер_заказа]. Текущий статус: [статус]»
Статус подставляется из переменной и может быть: «Готовится», «Передан курьеру», «В пути», «Доставлен».
Это невероятно удобно для пользователей! Им не нужно заходить на сайт или звонить в службу доставки — достаточно открыть чат-бот, и там уже будет актуальная информация о заказе.
Причем уведомления приходят автоматически при каждом изменении статуса. Заказ начали готовить — пришло уведомление. Курьер выехал — еще одно уведомление. Доставлен — финальное сообщение.
Подключение и тестирование в Telegram
Теперь, когда мы разобрали всю структуру бота, давайте посмотрим, как он работает в реальном Telegram.
1. Подключение мессенджера
Чтобы подключить Telegram к платформе, вам нужен токен от BotFather. Как его получить? На канале Watbot есть отдельное подробное видео о работе с BotFather и подключении мессенджеров:
Получив токен, вставьте его в поле подключения Telegram на платформе и нажмите «Сохранить». Теперь ваш сценарий связан с ботом в Telegram.
2. Тестирование онбординга
Откройте Telegram и найдите вашего бота. Нажмите кнопку «Старт» или отправьте команду
/start.
Видео-приветствие — первым приходит видео с информацией о подписке и сервисе. Визуальный контент сразу привлекает внимание.
Информационные блоки — далее текстовое сообщение с ответами на основные вопросы. Нажимаете кнопку «Отлично», и смотрите — происходит замена сообщения! Предыдущий текст не остается в истории, а обновляется новым. Это та самая функция подмены сообщений, о которой мы говорили.
Нажимаете следующую кнопку «Понятно, спасибо» — снова замена сообщения. Всё выглядит чисто, без загромождения чата множеством текстов.
Ознакомление с документами — появляются кнопки с правилами. При нажатии открывается мини-приложение внутри Telegram с полным текстом документа. Можно прокручивать, читать в удобном формате.
После ознакомления нажимаете «Ознакомлен».
Запрос контакта — приходит сообщение с просьбой поделиться контактом для идентификации. Нажимаете кнопку «Поделиться контактом», и Telegram автоматически отправляет ваш номер телефона боту.
3. Просмотр личного кабинета
После идентификации открывается ваш профиль. Если вы не оформляли подписку (первый запуск), это будет обычный стандартный профиль со статусом «Подписка неактивна».
Кнопка «Получать роллы по подписке» — при нажатии запускается процесс оформления подписки со всеми блоками, которые мы разбирали.
Кнопка «Подробнее об условиях» — открывается информация об акции, стоимости, что входит в подписку.
Кнопка «Больше опций» — открывается меню с дополнительными функциями.
4. Тестирование мини-приложений
Выберите, например, «История заказов». Если нажимаете на эту кнопку или на «Заказать доставку», внутри Telegram открывается мини-приложение — по сути, веб-страница с полноценным сайтом.
При выборе «Заказать доставку» открывается каталог с роллами, суши, напитками. Вы можете выбрать позиции, добавить в корзину и оформить заказ — всё это не выходя из Telegram!
Мини-приложения — это мощная технология, которая позволяет встраивать полноценные веб-сервисы прямо в чат-бот.
Кнопка «Администратор» — переводит в чат с живым оператором для решения нестандартных вопросов.
Практические рекомендации по использованию Webhook
Теперь, когда вы понимаете, как работают входящие вебхуки, давайте обсудим лучшие практики их применения.
Безопасность вебхуков
Используйте токены авторизации. В коде JavaScript проверяйте, что запрос пришел от легитимного источника, а не от злоумышленника. Многие сервисы отправляют специальный секретный токен в заголовках запроса.
Валидируйте входящие данные. Проверяйте формат и содержание данных, которые приходят. Не доверяйте слепо всему, что получаете.
Логируйте запросы. Сохраняйте историю входящих запросов для отладки и мониторинга. Это поможет отследить проблемы.
Обработка ошибок
Предусмотрите таймауты. Если внешний сервис перестал отправлять уведомления, у вас должен быть запасной план.
Создайте fallback-сценарии. Если вебхук не сработал, должен быть альтернативный способ получить информацию (например, кнопка «Проверить статус вручную»).
Уведомляйте администраторов. Настройте систему уведомлений для себя, если вебхук долго не получает данные — возможно, интеграция сломалась.
Тестирование интеграций
Используйте тестовые среды. Большинство платежных систем и сервисов предоставляют sandbox-окружения для тестирования без реальных транзакций.
Имитируйте разные сценарии. Проверьте, как бот реагирует на успешную оплату, отклоненный платеж, частичный возврат и другие ситуации.
Проверяйте граничные случаи. Что произойдет, если придут некорректные данные? Если два запроса придут одновременно? Предусмотрите всё.
Масштабирование
Оптимизируйте код JavaScript. Тяжелая обработка в вебхуке замедлит отклик бота. Делайте только необходимые операции, остальное перенесите в фоновые процессы.
Используйте кеширование. Если одни и те же данные запрашиваются часто, кешируйте их вместо повторных обращений к базе.
Мониторьте нагрузку. Следите за количеством входящих запросов. Если их становится слишком много, возможно, нужно оптимизировать архитектуру.
Идеи для применения входящих Webhook
Давайте рассмотрим другие сценарии использования этой технологии в ваших проектах.
Интеграция с CRM-системами
Когда менеджер меняет статус сделки в CRM, система автоматически отправляет уведомление в вебхук бота. Бот информирует клиента: «Ваша заявка принята в обработку» или «Менеджер свяжется с вами в течение часа».
Мониторинг складских остатков
Система учета товаров отправляет уведомление, когда заканчивается популярная позиция. Бот автоматически убирает её из меню или показывает «Временно нет в наличии».
Автоматизация email-маркетинга
Сервис рассылок отправляет данные о том, кто открыл письмо, кто кликнул по ссылке. Бот может на основе этого сегментировать аудиторию и отправлять персонализированные предложения.
Интеграция с IoT-устройствами
Умные устройства (датчики температуры, камеры, замки) могут отправлять данные в бот. Например, система умного дома уведомляет: «Температура в комнате упала ниже 18°C» или «Зафиксировано движение у входной двери».
Уведомления от систем мониторинга
Сервисы мониторинга сайтов отправляют уведомления при падении сервера. Бот моментально информирует администраторов в Telegram.
Входящий Webhook — это мост между вашим чат-ботом и остальным цифровым миром. С его помощью бот перестает быть изолированной системой и становится частью экосистемы ваших сервисов.
Это один из самых мощных инструментов платформы, открывающий безграничные возможности для создания профессиональных решений с глубокими интеграциями. Экспериментируйте, изучайте документацию внешних сервисов и создавайте инновационные проекты! 🚀
Полезные ссылки
Бесплатная регистрация на платформе Watbot для создания чат-ботов:
