N8n telegram отображение данных на кнопках

N8n и Telegram: Отображение динамических данных на кнопках

Интеграция n8n с мессенджером Telegram открывает широкие возможности для автоматизации коммуникаций. Одной из ключевых и технически сложных задач является динамическое формирование интерфейса бота, в частности, отображение переменных данных (названий, ID, статусов) непосредственно на тексте кнопок встроенной клавиатуры (Inline Keyboard) и клавиатуры ответа (Reply Keyboard). Статический текст кнопок часто не отвечает требованиям интерактивных систем, где интерфейс должен адаптироваться под пользователя, контекст или данные из внешних систем (баз данных, CRM, API).

Принципы работы с кнопками в Telegram через n8n

Telegram Bot API предоставляет два основных типа клавиатур: Reply Keyboard Markup (простая клавиатура, появляющаяся вместо поля ввода) и Inline Keyboard Markup (кнопки, привязанные к конкретному сообщению). Для динамического наполнения обеих используется массив массивов (матрица) объектов кнопок. Каждая кнопка имеет обязательные свойства: text (отображаемый текст) и, в зависимости от типа, callback_data (для Inline) или web_app, url. Задача в n8n — корректно сформировать эту структуру, используя данные из предыдущих узлов рабочего процесса.

Сбор и подготовка данных для кнопок

Данные для текста кнопок могут поступать из различных источников, которые необходимо обработать в n8n:

    • Внешние API-запросы: Узлы HTTP Request, GraphQL. Полученный JSON-ответ необходимо преобразовать.
    • Базы данных: Узлы PostgreSQL, MySQL. Результат SQL-запроса возвращается как массив объектов.
    • Файлы и буфер обмена: Узлы Spreadsheet File, Google Sheets.
    • Внутренние данные n8n: Переменные ($vars, $workflow), данные из предыдущих шагов, параметры вебхука.

    Ключевой этап — преобразование сырых данных в структурированный массив. Чаще всего для этого используется узел «Code» (JavaScript/Python) или «Function». Альтернативно, можно использовать узлы «Item Lists» (Split Out, Aggregate, Limit, Sort), но их функционала часто недостаточно для сложных преобразований.

    Формирование структуры клавиатуры с динамическим текстом

    Создание клавиатуры происходит в узле «Telegram» при выборе действия «Send Message», «Send Audio», «Send Photo» и других, поддерживающих прикрепление клавиатуры. В разделе «Additional Fields» необходимо развернуть опцию «Reply Markup» и выбрать тип «Inline Keyboard» или «Keyboard». Далее используется выражение для динамического создания объекта reply_markup.

    Пример формирования Inline Keyboard с данными из массива объектов, полученного из базы данных или API:

    Предположим, на предыдущем узле «Code» был сформирован массив items следующего вида:

    • [ { "id": 1, "name": "Задача №1", "status": "active" }, { "id": 2, "name": "Задача №2", "status": "closed" } ]

    В узле «Telegram» в поле «Reply Markup» необходимо ввести выражение (используя n8n Expression):


    {
    "inline_keyboard": {{ $json.items.map(item => [ { text: item.name + " [" + item.status.toUpperCase() + "]", callback_data: "task_" + item.id } ]) }}
    }

    Это выражение преобразует массив items в структуру inline_keyboard, где каждая кнопка будет содержать название задачи и ее статус, а в callback_data будет передан идентификатор.

    Продвинутые техники и обработка ограничений

    Telegram накладывает ограничения: длина текста кнопки (text) — до 64 символов, длина callback_data — до 64 байт (1 байт на символ для латиницы, больше для юникода). Необходимо обрезать строки, используя методы JavaScript в узле Code, например, .slice(0, 60).

    Для создания многоуровневой клавиатуры (например, меню с возвратом) необходимо формировать вложенную структуру. Каждый вложенный массив в inline_keyboard представляет собой ряд кнопок. Для динамического разбиения на ряды по N кнопок можно использовать следующий алгоритм в узле Code:


    const items = $input.all(); // Все элементы с предыдущего узла
    const buttonsPerRow = 2;
    const keyboard = [];

    for (let i = 0; i {
    return {
    text: `Item ${item.id}`,
    callback_data: `select_${item.id}`
    };
    });
    keyboard.push(row);
    }

    return [{ keyboard }];

    Также важно учитывать кодирование данных в callback_data. Если необходимо передать сложный объект, его следует сериализовать в JSON строку и, при необходимости, закодировать в base64, не выходя за лимит в 64 байта.

    Обработка нажатий на динамические кнопки

    Для обработки нажатий на Inline-кнопки необходимо настроить отдельный триггер «Callback Query». В рабочем процессе создается новый триггер «Telegram Trigger» с событием «Callback Query». Данные о нажатии будут содержаться в $json.callbackQuery.data. Далее, используя узел «Switch» или «IF», можно маршрутизировать логику обработки в зависимости от значения callback_data. После обработки часто требуется отредактировать исходное сообщение или ответить на callback уведомлением, используя узел «Telegram» с действием «Answer Callback Query» или «Edit Message Text».

    Сравнение методов формирования клавиатуры

    Метод Используемые узлы n8n Преимущества Недостатки Лучший сценарий использования
    Формирование через узел Code (JS) Code, Telegram Максимальная гибкость, возможность сложной логики, обработки ошибок, форматирования. Требует знания JavaScript, немного медленнее визуальных методов. Динамические данные из API/БД, сложная структура клавиатуры, необходимость предобработки текста.
    Использование Expression в поле Reply Markup Telegram (с выражением) Быстро, не требует дополнительных узлов, наглядно для простых случаев. Ограниченная логика, сложность отладки при ошибках в выражении. Простое преобразование уже готового массива данных, 1-2 кнопки с простым текстом.
    Сборка через Set узлы Set, Item Lists, Telegram Визуальный интерфейс, не требует написания кода. Громоздко для массивов, ограниченные возможности конкатенации и форматирования строк. Создание статических или условных (на основе простых правил) клавиатур.

    Практический пример: Список заказов с кнопками действий

    Рассмотрим полный рабочий процесс, который по команде «/orders» запрашивает из внешнего API список последних заказов пользователя и выводит их в виде Inline-кнопок, содержащих номер заказа и его статус.

    1. Узел «Telegram Trigger»: Настраивается на команду «/orders».
    2. Узел «HTTP Request»: Отправляет GET запрос к API, передавая $json.message.from.id (Telegram ID пользователя) как параметр. Ответ: массив заказов.
    3. Узел «Code»:

      const orders = $json.body.data; // Предполагаемая структура ответа API
      // Формируем клавиатуру с двумя кнопками в ряд
      const keyboard = [];
      for (let i = 0; i {
      // Обрезаем длинный текст и формируем callback_data
      const btnText = `

      ${order.number} (${order.status})`.slice(0, 64);

      const callbackData = `order_detail_${order.id}`.slice(0, 64);
      return { text: btnText, callback_data: callbackData };
      });
      keyboard.push(row);
      }
      // Добавляем общую кнопку, например, "Назад"
      keyboard.push([{ text: "« В главное меню", callback_data: "main_menu" }]);
      return { inlineKeyboard: keyboard };

    4. Узел «Telegram» (Send Message): В поле «Chat ID» — {{$json.message.chat.id}}. Текст сообщения — «Ваши последние заказы:». В «Reply Markup» — {{ { "inline_keyboard": $json.inlineKeyboard } }}.

Ответы на часто задаваемые вопросы (FAQ)

Как передать более одного значения в callback_data?

Необходимо сформировать строку с разделителем или в формате JSON. Например: "id:123|action:view" или {"id":123,"a":"v"}. Важно следить, чтобы итоговая длина после сериализации не превышала 64 байта. На стороне обработчика Callback Query используйте узел Code для разбора этой строки.

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

Да, но только для Inline-кнопок. Для этого необходимо обработать Callback Query и использовать узел «Telegram» с действием «Edit Message Text» или «Edit Message Reply Markup», отправив новую структуру reply_markup. Это полезно для отображения состояния (например, «Выбрано ✓»).

Почему клавиатура не отображается или исчезает?

Проверьте корректность синтаксиса объекта reply_markup. Убедитесь, что вы не используете одновременно параметры reply_markup и replyKeyboardRemove. Помните, что Reply Keyboard может быть скрыта пользователем вручную в клиенте Telegram.

Как создать кнопку с URL, содержащей динамические данные?

В структуре кнопки вместо callback_data используйте поле url. URL можно сформировать динамически: { text: "Открыть заказ", url: "https://example.com/order/" + $json.item.id }. Обратите внимание, что Telegram проверяет домен через BotFather.

Как ограничить количество кнопок в ряду для динамического списка?

Используйте алгоритм разбиения массива на чанки (ряды) фиксированного размера, как показано в примере с узлом Code выше. Это стандартная практика пагинации или упорядочивания интерфейса.

Обработка нажатий на кнопки Reply Keyboard

Нажатия на кнопки Reply Keyboard не генерируют Callback Query. Текст кнопки отправляется в чат как обычное сообщение пользователя. Для их обработки настройте триггер «Telegram Trigger» на событие «Text Message» и в узле «Switch» проверяйте значение $json.message.text на соответствие текстам ваших динамических кнопок.

Почему в тексте кнопки не отображаются эмодзи или переносы строк?

Эмодзи поддерживаются. Перенос строки (n) в тексте кнопки не отображается — текст кнопки всегда в одну строку. Для многострочных подписей используйте несколько кнопок или разделяйте информацию другими символами.

Можно ли загрузить клавиатуру из внешнего JSON-файла?

Да. Используйте узел «Read Binary File» для загрузки файла, затем узел «Convert to JSON», чтобы распарсить содержимое. Полученный объект можно использовать в поле «Reply Markup», убедившись, что его структура соответствует требованиям Telegram Bot API.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *