Рекомендуємо прочитати статтю Button.

У Telegram можна використовувати як кнопки відповіді (звичайні або клавіатурні кнопки), так і Inline-кнопки (кнопки в тексті).

Важливо: обмеження кнопок

Зверніть увагу на наступні обмеження платформи під час створення кнопок:

  • Кнопки відповіді (клавіатура): максимум 12 кнопок у рядку.
  • Inline-кнопки: максимум 8 кнопок у рядку.
  • Текст кнопки: обмежено 32 символами.
  • Колір кнопки: не можна налаштувати. Кнопки використовують стандартний стиль платформи.

Як створити кнопку в блоці

Щоб створити будь-яку кнопку в чат-боті, перейдіть до налаштувань блоку та натисніть на вкладку "Buttons":

Після цього відкриються налаштування для додавання та редагування кнопки. Потім натисніть Add:

Відкриється вікно налаштувань, яке дозволяє визначити мітку кнопки, дію та додаткові параметри.

Наступні типи кнопок доступні лише для бота Telegram:

  • Share button – дозволяє користувачам ділитися вмістом.
  • Callback button – надсилає безшумний зворотний запит вашому боту.
  • Telegram WebApp – відкриває міні-додаток (наприклад, віджет або веб-сайт) у Telegram.
  • Telegram login – авторизує користувачів через їхній обліковий запис Telegram.

У Telegram також доступні інші кнопки, такі як оплата, запит номера телефону або геолокації та надсилання посилання.

Кнопка поділитися

Під час створення кнопки виберіть "Share (Telegram only)" та заповніть поля (необов'язкове поле додаткового тексту):

Ця кнопка дозволяє переслати інформацію, вибравши контакт зі списку.

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

Після вибору контакту буде надіслано вміст із полів "Share link" та "Additional text". Використовуйте це, щоб ділитися посиланнями на публікації в каналах Telegram та іншим вмістом.

Увага! На деяких пристроях iOS це може працювати неправильно.

Кнопка входу на веб-сайт

Щоб кнопка входу працювала, ваш бот спочатку має бути авторизований для цільового домену. Це налаштування виконується через @BotFather.

Кроки для налаштування:

  1. Відкрийте чат з @BotFather.
  2. Виберіть свого бота зі списку.
  3. Виберіть Bot Settings > Domain і додайте домен вашого веб-сайту.

Далі натисніть кнопку Domain:

Примітка: Кнопка матиме напис Edit domain, якщо домен існує, або Set domain, якщо його потрібно додати.

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

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

Введіть свій домен як mavibot.ai або як yourdomain.com, якщо у вас є веб-сайт, підключений до MaviBot.

Наступний крок:

Після підтвердження та налаштування домену ви можете перейти до створення кнопки авторизації.

У полі Text введіть мітку, яка відображатиметься на кнопці.

Потім вкажіть URL сторінки в полі Link, де відбуватиметься авторизація.

Інші поля знадобляться, якщо для авторизації використовується окремий бот (потрібно отримати дозвіл на надсилання повідомлень для цього бота): зокрема, потрібно вказати ім'я бота.

Якщо вам потрібна можливість надсилати повідомлення від вказаного бота, обов'язково поставте прапорець "Request permission from the user to send messages from the bot":

Кнопка входу Telegram

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

Кнопка зворотного виклику — це кнопка зворотного зв'язку, коли клієнт бачить одне, а в боті ми отримуємо необхідний зворотний виклик для запуску будь-якого блоку воронки.

Створити її досить просто: у полі Buttons натисніть кнопку Add. У формі, що відкриється, введіть текст, вкажіть тип — Callback button (Telegram) та введіть Callback text, який має повертатися після натискання кнопки:

Візуально кнопка виглядає як звичайна inline-кнопка:

Після натискання кнопки ви побачите налаштований Callback у картці клієнта:

Це важливо!

Telegram не підтримує клавіатурні кнопки зворотного виклику.

Зверніть увагу!

Якщо вибрано тип кнопки "Callback", кнопка відображатиметься як зворотний виклик лише в тому випадку, якщо текст кнопки відрізняється від тексту зворотного виклику.

Кнопка веб-додатку Telegram

Ця кнопка дозволяє відкрити веб-сайт як веб-додаток у Telegram.

Під час додавання кнопки вкажіть її мітку, виберіть тип кнопки Telegram Web App та надайте посилання на веб-сайт, який відкриється як веб-додаток:

  • Ви можете вказати посилання через змінну:

Використання змінної для посилання є дуже практичним, коли цільова сторінка або адреса веб-сайту часто змінюється.

Як це працює:

  1. Визначте змінну (наприклад, landing_page_url) у налаштуваннях вашого проекту.
  2. Посилайтеся на цю змінну (наприклад, #{landing_page_url}) у всіх кнопках Web App у ваших потоках.

Перевага: замість ручного оновлення URL у кожному окремому блоці кнопок вам потрібно лише один раз змінити значення змінної в налаштуваннях проекту, і всі кнопки автоматично оновляться.

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

Як створити кнопки для функцій Telegram API

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

Метод: використання згенерованого коду

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

Кроки:

  1. Перейдіть до налаштувань вашого блоку та відкрийте розділ Buttons.
  2. Використовуйте інтерфейс для додавання та налаштування всіх необхідних кнопок (текст, посилання, функції).
  3. Система автоматично згенерує правильний код Telegram API у фоновому режимі.

Цей підхід дозволяє візуально створювати складні клавіатури, поки платформа займається технічною реалізацією.

Натисніть "Advanced Settings", щоб переглянути згенерований код Telegram API для ваших кнопок.

Протестуйте свої кнопки, потім скопіюйте згенерований код з Advanced Settings у змінну, наприклад 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):

Передайте змінну buttons у функцію в параметрі reply_markup:

Ваші кнопки з'являться в чаті з макетом і стилем, які ви визначили.

Як видалити кнопки відповіді

Хоча клавіатурні кнопки зазвичай зникають автоматично, іноді вони можуть залишатися видимими.

Щоб примусово очистити кнопки відповіді, що залишилися, вставте наступний код у поле Advanced Settings:

[{"buttons":[],"one_time":true,"index_in_line":0,"line":0}]

Ця порожня конфігурація кнопок вказує Telegram приховати спеціальну клавіатуру.

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

Рекомендуємо використовувати цю функцію лише досвідченим користувачам!

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

Щоб мати можливість використовувати клавіатурні кнопки (відповіді) як постійне меню Telegram, достатньо присвоїти будь-яке значення змінній tg_permanent_reply_buttons (змінна оголошується як константа проекту).

Змінна: tg_permanent_reply_buttons

Встановлення змінної tg_permanent_reply_buttons надає вам повний ручний контроль над видимістю клавіатури відповіді (кнопки під повідомленням). Усі автоматичні дії з приховування платформою вимикаються.

Область застосування: це налаштування застосовується до всіх кнопок відповіді, створених у боті, поки змінна активна.

Повернення до автоматичної поведінки

Щоб відновити стандартне автоматичне приховування клавіатури:

  1. Видаліть змінну tg_permanent_reply_buttons з налаштувань вашого проекту.
  2. Перестворіть будь-які кнопки відповіді, які були створені, коли змінна була активною. Кнопки, створені за правилом "постійності", зберігають цей стан, і їх потрібно перестворити, щоб успадкувати нову автоматичну поведінку.

Як створити меню в Telegram

Той, хто створив бота Telegram, може зробити таке меню.

Для цього напишіть Botfather у 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}]

Ось результат:

Важливо: ви повинні дотримуватися такого порядку під час додавання кнопок в одному блоці:

  1. Спочатку додайте всі кнопки відповіді (клавіатури).
  2. Потім додайте будь-які Inline-кнопки.

Якщо цю послідовність порушити, кнопки відповіді будуть видалені під час надсилання наступного блоку повідомлення.