Кнопки Telegram для чат-ботов

circle-info

Мы рекомендуем вам прочитать статью Кнопка.

В Telegram можно использовать как кнопки ответа (обычные кнопки или кнопки клавиатуры), так и Inline-кнопки (кнопки в тексте).

circle-info

Важно: ограничения на кнопки

Пожалуйста, учитывайте следующие ограничения платформы при создании кнопок:

  • Кнопки ответа (клавиатура): максимум 12 кнопок в строке.

  • Встроенные кнопки: Максимум 8 кнопок в строке.

  • Текст кнопки: Ограничено 32 символами.

  • Цвет кнопки: не может быть изменена. Кнопки используют стиль платформы по умолчанию.

Как создать кнопку в блоке

Чтобы создать любую кнопку в чат-боте, перейдите в настройки блока и нажмите на "Кнопки" :

Затем откроются настройки добавления и редактирования кнопки. Далее нажмите Добавить:

Откроется окно настроек, где вы сможете задать название кнопки, действие и дополнительные параметры.

Следующие типы кнопок доступны только для Telegram-бота:

  • кнопка «Поделиться» — позволяет пользователям делиться контентом.

  • кнопка обратного звонка — отправляет боту тихий callback-запрос.

  • Telegram WebApp — открывает мини-приложение (например, виджет или сайт) внутри Telegram.

  • Telegram login — авторизует пользователей через их аккаунт Telegram.

В Telegram также доступны другие кнопки, например для оплаты, запроса номера телефона или геолокации, а также отправки ссылки.

кнопка «Поделиться»

При создании кнопки выберите "Share (только Telegram)" и заполните поля (необязательное дополнительное текстовое поле):

Эта кнопка позволяет переслать информацию, выбрав контакт из списка.

Введите URL, которым вы хотите поделиться, в поле кнопки "Share link" .

После выбора контакта будет отправлено содержимое полей "Share link" и "Additional text" Используйте это, чтобы делиться ссылками на посты Telegram-каналов и другим контентом.

circle-info

Внимание! На некоторых устройствах iOS это может работать некорректно.

Кнопка входа на сайт

Чтобы кнопка входа работала, ваш бот сначала должен быть авторизован для целевого домена. Эта настройка выполняется через @BotFather.

Шаги по настройке:

  1. Откройте чат с @BotFatherarrow-up-right.

  2. Выберите вашего бота из списка.

  3. Выберите Bot Settings > домен и добавьте домен вашего сайта.

Далее перейдите в домен :

Примечание: На кнопке будет написано Edit domain если домен уже существует, или Set domain если его нужно добавить.

Вам будет предложено настроить домен для вашего бота:

Правильный формат домена:

Введите свой домен как mavibot.ai или как yourdomain.com если у вас есть сайт, подключённый к MaviBot.

Следующий шаг:

После проверки и настройки домена вы можете перейти к созданию кнопки авторизации.

Во вкладке Текст в поле введите текст, который будет отображаться на кнопке.

Затем укажите URL страницы в поле Ссылка на которой будет проходить авторизация.

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

Если вам нужно иметь возможность отправлять сообщения от указанного бота, обязательно отметьте галочку "Запросить у пользователя разрешение на отправку сообщений от бота":

Кнопка Telegram login

кнопка обратного звонка

Кнопка Callback — это кнопка обратной связи: клиент видит одно, а в боте мы получаем нужный callback, чтобы запустить любой блок воронки.

Создать её довольно просто: в поле Кнопки нажмите кнопку Добавить В открывшейся форме введите текст, укажите тип — Callback button (Telegram) и введите Callback text который должен вернуться при нажатии на кнопку:

Визуально кнопка выглядит как обычная inline-кнопка:

После нажатия на кнопку вы увидите настроенный Callback в карточке клиента:

circle-info

Важно!

Telegram не поддерживает callback-кнопки клавиатуры.

circle-info

Обратите внимание!

Если Если выбран тип кнопки " Callback"

Кнопка Telegram Web Application

Эта кнопка позволяет открыть сайт как веб-приложение в Telegram.

При добавлении кнопки укажите её название, выберите тип кнопки Telegram Web App и добавьте ссылку на сайт, который откроется как веб-приложение:

  • Вы можете указать ссылку через переменную:

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

Как это работает:

  1. Определите переменную (например, landing_page_url) в настройках проекта.

  2. Используйте эту переменную (например, #{landing_page_url}) во всех кнопках Web App во всех ваших сценариях.

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

Альтернатива: конечно, вы по-прежнему можете указать прямой статический URL непосредственно в настройках кнопки.

Как создавать кнопки для функций Telegram API

Хотя работа напрямую с Telegram Bot API может быть сложной, особенно для новичков, MaviBot предлагает гораздо более удобную альтернативу.

Способ: используйте сгенерированный код

Вы можете использовать предварительно сгенерированный код кнопок из расширенных настроек, избавившись от необходимости вручную писать API-вызовы.

Шаги:

  1. Перейдите в настройки вашего блока и откройте Кнопки .

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

  3. Система автоматически сгенерирует корректный код Telegram API в фоновом режиме.

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

Нажмите "Расширенные настройки" чтобы посмотреть сгенерированный код Telegram API для ваших кнопок.

Проверьте кнопки, затем скопируйте сгенерированный код из Расширенные настройки в переменную вроде buttons.

Эта функция отправляет сообщение через Telegram API со следующими параметрами: tg_send_message (platform_id, text,client_message_id, reply_markup, sparse_mode, disable_web_page_preview, protect_content, disable_notification, message_thread_id, entities):

Передайте переменную с кнопками в функцию в параметре reply_markup:

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

Как удалить кнопки ответа

Хотя кнопки клавиатуры обычно исчезают автоматически, иногда они могут оставаться видимыми.

Чтобы принудительно убрать оставшиеся кнопки ответа, вставьте следующий код в Расширенные настройки :

Эта пустая конфигурация кнопок сообщает Telegram скрыть пользовательскую клавиатуру.

Кнопки меню клавиатуры в Telegram

circle-exclamation

Кнопки клавиатуры

Чтобы можно было использовать кнопки клавиатуры (reply) как постоянное меню Telegram, достаточно присвоить любое значение переменной tg_permanent_reply_buttons (переменная объявлена как константа проекта).

Переменная: tg_permanent_reply_buttons

Установка переменной tg_permanent_reply_buttons даёт вам полный ручной контроль над видимостью клавиатуры ответа (кнопок под сообщением). Всё автоматическое скрытие со стороны платформы отключается.

Область действия: эта настройка применяется ко всем кнопкам ответа, созданным в боте, пока переменная активна.

Возврат к автоматическому поведению

Чтобы восстановить стандартное автоматическое скрытие клавиатуры:

  1. Удалите tg_permanent_reply_buttons переменную из настроек проекта.

  2. Повторно создайте любые кнопки ответа которые изначально были созданы, когда переменная была активна. Кнопки, созданные по правилу "постоянных", сохраняют это состояние и должны быть пересозданы, чтобы получить новое автоматическое поведение.

Как создать меню в Telegram

Такое меню может создать тот, кто создал Telegram-бота.

Для этого напишите в Botfatherarrow-up-right в Telegram.

Введите команду /mybots, и откроется список ваших ботов. Выберите нужного. Для вас откроется меню. Здесь нужно выбрать Edit Bot, а затем Edit Commands.

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

Теперь вы можете видеть меню и пользоваться им в своём чате Telegram с ботом.

При нажатии на кнопку меню откроется список команд, которые ранее были зарегистрированы в BotFather:

Далее перейдите в Mavibot, откройте проект, к которому подключён этот Telegram-бот.

Создайте Start или Trigger блоки, пропишите команды в условиях, и в поле "Message text" — тексты, которые будут получены в ответ.

Пример:

Как объединить два типа кнопок

Создайте блок с кнопкой ответа (клавиатурой), которую нужно визуализировать.

Создайте следующий блок (таймер 0 секунд) с inline-кнопками (кнопками в тексте), которые должны быть размещены без удаления кнопок ответа. Например: [{"type": "inline", "text": "BUTTON NAME", "line": 0, "index_in_line": 0}]

Вот результат:

circle-check

Последнее обновление