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

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

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

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

Будь ласка, враховуйте такі обмеження платформи під час створення кнопок:

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

• Інлайн-кнопки: Максимум 8 кнопок у рядку.

• Текст кнопки: Обмежено 32 символами.

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

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

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

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

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

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

• кнопка поділу — дозволяє користувачам ділитися контентом.

• кнопка зворотного дзвінка — надсилає вашому боту тихий callback-запит.

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

• Telegram login — авторизує користувачів через їхній обліковий запис Telegram.

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

кнопка поділу

Під час створення кнопки виберіть «Поділитися (лише Telegram)» і заповніть поля (необов’язкове додаткове текстове поле):

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

Введіть URL, яким ви хочете поділитися, у полі кнопки «Посилання для поширення» .

Після вибору контакту буде надіслано вміст із полів «Посилання для поширення» та «Додатковий текст» . Використовуйте це, щоб ділитися посиланнями на пости в Telegram-каналі та іншим контентом.

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

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

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

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

1. Відкрийте чат із @BotFather.

2. Виберіть свого бота зі списку.

3. Оберіть Налаштування бота > домен і додайте домен вашого сайту.

Далі перейдіть у розділ домен кнопку:

Примітка: На кнопці буде написано Редагувати домен якщо домен уже існує, або Встановити домен якщо його потрібно додати.

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

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

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

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

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

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

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

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

Якщо вам потрібно мати можливість надсилати повідомлення від зазначеного бота, обов’язково встановіть прапорець «Запросити у користувача дозвіл на надсилання повідомлень від бота»:

Кнопка входу через Telegram

кнопка зворотного дзвінка

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

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

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

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

Важливо!

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

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

Якщо типу кнопки «Callback» вибрано, кнопка відображатиметься як callback лише якщо текст кнопки відрізняється від тексту 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:

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

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

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

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

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

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

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

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

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

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

Змінна: tg_permanent_reply_buttons

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

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

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

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

1. Видаліть tg_permanent_reply_buttons змінну з налаштувань вашого проєкту.

2. Створіть заново будь-які кнопки reply які були спочатку створені, коли змінна була активна. Кнопки, створені за правилом «постійні», зберігають цей стан і мають бути створені заново, щоб успадкувати нову автоматичну поведінку.

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

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

Для цього напишіть Botfather у Telegram.

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

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

Тепер ви можете бачити та використовувати меню у своєму чаті Telegram із ботом.

Коли ви натиснете кнопку меню, відкриється список команд, які раніше були зареєстровані в BotFather:

Далі перейдіть до Mavibot, відкрийте проєкт, до якого підключений цей telegram-бот.

Створіть Start або Тригер блоки, запишіть команди в умовах, а в «Текст повідомлення» полі — тексти, які надходитимуть у відповідь.

Приклад:

Як поєднати два типи кнопок

Створіть блок із кнопкою відповіді (клавіатура), яку вам потрібно відобразити.

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

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

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

1. Спочатку додайте всі кнопки Reply (клавіатура).

2. Потім додайте будь-які inline-кнопки.

Якщо цей порядок буде змінено, кнопки відповіді буде видалено, коли буде надіслано наступний блок повідомлення.