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

{% hint style="info" %}
Ми рекомендуємо вам прочитати статтю [Кнопка](/doc/uk/chatbot/builder/knopki.md#how-to-create-a-button).
{% endhint %}

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

{% hint style="info" %}
**Важливо: обмеження кнопок**

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

* **Кнопки відповіді (клавіатура):** максимум **12 кнопок у рядку**.
* **Інлайн-кнопки:** Максимум **8 кнопок у рядку**.
* **Текст кнопки:** Обмежено **32 символами**.
* **Колір кнопки:** **не може бути налаштовано.** Кнопки використовують стиль платформи за замовчуванням.
  {% endhint %}

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

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

<div data-with-frame="true"><figure><img src="/files/4f6a4436ee22893e12cc4dce8dd35c46b64fd59d" alt=""><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/da2023f110eb2b6b18c91a1999a62a8c3245250f" alt=""><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/bd1b646b06361be340531c0428c6444a1f104902" alt="" width="563"><figcaption></figcaption></figure></div>

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

* **кнопка поділу** — дозволяє користувачам ділитися контентом.
* **кнопка зворотного дзвінка** — надсилає вашому боту тихий callback-запит.
* **Telegram WebApp** — відкриває міні-застосунок (наприклад, віджет або сайт) у Telegram.
* **Telegram login** — авторизує користувачів через їхній обліковий запис Telegram.

<div data-with-frame="true"><figure><img src="/files/5aef1e755df7baf02ceae10a2ee02beb77ddf04c" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

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

<div data-with-frame="true"><figure><img src="/files/905804277f067afadb07a5f63b000003fbd9ead4" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/b6516ee6046de79fa297c1fba76d64b279040f45" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/c398932ff873ddc442652355d4da880a49392600" alt="" width="563"><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/24952b4ae5404ef15946286167e05a974777fc3b" alt="" width="563"><figcaption></figcaption></figure></div>

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

{% hint style="info" %}
Увага! На деяких пристроях iOS це може працювати некоректно.
{% endhint %}

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

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

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

1. Відкрийте чат із [@BotFather](https://t.me/botfather).
2. Виберіть свого бота зі списку.
3. Оберіть **Налаштування бота** > **домен** і додайте домен вашого сайту.

<div data-with-frame="true"><figure><img src="/files/4d3a1dfa682aed12d4d15f33e03fab5da9a67584" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/0b367942fd78a0a0274724139c89cd88c2e50558" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/874588def8fbfeda813c5d669394f3ca88f9dc99" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/81179ae7d5ea15c087941fd02f91016579595535" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

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

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

<div data-with-frame="true"><figure><img src="/files/cb341bf904d54914450dce9f947bb296cc998a65" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

<div data-with-frame="true"><figure><img src="/files/32ac3c4e4055a7261d27b535df995ccce0c3ef88" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

<div data-with-frame="true"><figure><img src="/files/23af422b4e4e0528a7d7d7fb64f3b8af0ccead7b" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

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

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

<div data-with-frame="true"><figure><img src="/files/bd72f77eb32eef236a41ef2eca7b3734c77bb7ac" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/0542b60d5f625b27c2a1921e1423f334db0273db" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/a8c54fdd339c7970d51a7eacc84f6d0ecd638a9e" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
Важливо!

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

{% hint style="info" %}
Зверніть увагу!

Якщо **типу кнопки «Callback»** вибрано, кнопка відображатиметься як callback лише якщо текст кнопки відрізняється від тексту callback.
{% endhint %}

### Кнопка Telegram Web Application

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

<div data-with-frame="true"><figure><img src="/files/c0a52df4747d4b44c958c1f595d95b13a5f59228" alt="" width="375"><figcaption></figcaption></figure></div>

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

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

<div data-with-frame="true"><figure><img src="/files/94b008abae5fcca34bc34a5b5c3b575e03c42a3e" alt="" width="563"><figcaption></figcaption></figure></div>

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

**Як це працює:**

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

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

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

<div data-with-frame="true"><figure><img src="/files/939a09e47318b4bda0e1549bcf02f10af1c259b6" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

**Спосіб: використовуйте згенерований код**

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

**Кроки:**

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

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

<div data-with-frame="true"><figure><img src="/files/2ee2f6111beed0368b4483084ec039cbab28ee87" alt="" width="563"><figcaption></figcaption></figure></div>

Натисніть **«Розширені налаштування»** щоб переглянути згенерований код Telegram API для ваших кнопок.

<div data-with-frame="true"><figure><img src="/files/c0c69d4a44e84bab5df061555c5a7b63b39e7a4b" alt="" width="375"><figcaption></figcaption></figure></div>

Перевірте свої кнопки, потім скопіюйте згенерований код із **Розширені налаштування** у змінну, таку як `buttons`.

<div data-with-frame="true"><figure><img src="/files/1b49d655fce5b28d237f506bed0d44fbbbb65be2" alt="" width="375"><figcaption></figcaption></figure></div>

Ця функція надсилає повідомлення через 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:

<div data-with-frame="true"><figure><img src="/files/0b27bb226fef8801589d73cc984afaa5c35a009f" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/670d3baee4570f867d20f8672fd059e8bdddaa9c" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

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

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

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

<div data-with-frame="true"><figure><img src="/files/e0047784e97580343599d5eb2f3ed3f183b736fe" alt="" width="563"><figcaption></figcaption></figure></div>

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

{% hint style="warning" %}
Ми рекомендуємо використовувати цю функцію лише досвідченим користувачам!
{% endhint %}

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

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

<div data-with-frame="true"><figure><img src="/files/c156cde29ab351ef074453e1d5a6b0a7cd7852c8" alt="" width="370"><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/22322d2c920f463973879ee87c4e6e1cdc8279f8" alt="" width="563"><figcaption></figcaption></figure></div>

#### **Змінна: `tg_permanent_reply_buttons`**

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

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

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

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

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

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

<div data-with-frame="true"><figure><img src="/files/165603d86117c0b516950c18b3c710bba68c2847" alt="" width="563"><figcaption></figcaption></figure></div>

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

Для цього напишіть [Botfather](https://t.me/BotFather) у Telegram.

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

<div data-with-frame="true"><figure><img src="/files/59ed47a2ce372a66eb5712bf75c439a57e1bb0bd" alt="" width="563"><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/0727f371f6bce6e49c7cfd18f50d74d2ce00d300" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/98d6c12e255abef5f4fac481828a323d25900c49" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/c017406c5707e97667c9a3bcbe874ef8418d577d" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/2f1b75d4c53ae3a44e324e56cfb56dcec9c4ff72" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

Приклад:

<div data-with-frame="true"><figure><img src="/files/89acef5da3f638036db01b9cfae9a12edbccab23" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

<div data-with-frame="true"><figure><img src="/files/afa291343f80c8d6aa65c29e75cec2f574017261" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/727f5a9064538fda3db00ea6f48de1a9b5534dc8" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/e3eb4e8b78b50d78647251f493e12af06f8e32cb" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**Важливо:** потрібно дотримуватися такого порядку під час додавання кнопок в одному блоці:

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/uk/chatbot/mesendzheri/telegram/buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.