# Telegram buttons for chatbots

{% hint style="info" %}
We recommend that you read the article [Button](/chatbot/builder/buttons.md#how-to-create-a-button).
{% endhint %}

You can use both reply buttons (regular or keyboard buttons) and Inline buttons (buttons in the text) in Telegram.

{% hint style="info" %}
**Important: button limitations**

Please be aware of the following platform restrictions when creating buttons:

* **Reply buttons (keyboard):** maximum of **12 buttons per row**.
* **Inline buttons:** Maximum of **8 buttons per row**.
* **Button text:** Limited to **32 characters**.
* **Button color:** **cannot be customized.** Buttons use the default platform style.
  {% endhint %}

## How to create a button in block

To create any button in a chatbot, go to the block settings and click on the **"Buttons"** tab:

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

Then the settings for adding and editing the button will open. Then click **Add**:

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

A settings window will open, allowing you to define the button's label, action, and additional options.

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

The following button types are **only available for the Telegram bot**:

* **Share button** – allows users to share content.
* **Callback button** – sends a silent callback query to your bot.
* **Telegram WebApp** – opens a mini-application (e.g., a widget or website) within Telegram.
* **Telegram login** – authorizes users via their Telegram account.

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

There are also other buttons available in Telegram, such as payment, request a phone number or geolocation, and send a link.

### Share button

When creating the button, select "**Share (Telegram only)"** and fill in the fields (optional additional text field):

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

This button lets you forward the information by selecting a contact from your list.

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

Enter the URL you wish to share in the button's **"Share link"** field.

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

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

Once a contact is selected, the content from the **"Share link"** and **"Additional text"** fields will be sent. Use this to share links to Telegram channel posts and other content.

{% hint style="info" %}
Attention! It may not work correctly on some iOS devices.
{% endhint %}

### Website login button

For the login button to function, your bot must first be authorized for the target domain. This configuration is done through **@BotFather**.

**Steps to configure:**

1. Open a chat with [@BotFather](https://t.me/botfather).
2. Select your bot from the list.
3. Choose **Bot Settings** > **Domain** and add your website's domain.

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

Next, go to the **Domain** button:

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

**Note:** The button will read **Edit domain** if a domain exists, or **Set domain** if one needs to be added.

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

You will be prompted to set up the domain for your bot:

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

**Correct domain format:**

Enter your domain as `mavibot.ai` or as `yourdomain.com` if you have a website connected to MaviBot.

**Next step:**

Once your domain is verified and configured, you can proceed to create the authorization button.

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

In the **Text** field, enter the label that will appear on the button.

Then, provide the URL of the page in the **Link** field where the authorization will take place.

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

The remaining fields will be needed if a separate bot is used for authorization (you need to get permission to send messages for this bot): in particular, you will need to specify the name of the bot.

If you need to be able to send messages from the specified bot, then be sure to check the box for **"Request permission from the user to send messages from the bot"**:

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

Telegram login button

### Callback button

Callback button is a feedback button when the client sees one thing, and in the bot we get the callback we need to launch any block of the funnel.

It's quite simple to create it: in the **Buttons** field, click the **Add** button. In the form that opens, enter the text, specify the type - Callback button (Telegram) and enter the **Callback text** that should return when you click on the button:

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

Visually, the button looks like a regular inline button:

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

After clicking on the button, you will see the configured **Callback** in the client's card:

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

{% hint style="info" %}
It is important!

Telegram does not support Callback keyboard buttons.
{% endhint %}

{% hint style="info" %}
Please note!

If the **"Callback"** button type is selected, the button will display as a callback only if the text of the button differs from the text of the callback.
{% endhint %}

### Telegram Web Application button

This button allows you to open the website as a web application in Telegram.

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

When adding the button, specify its label, select the type of Telegram Web App button, and provide the link to the website that will open as a web application:

* You can specify a link through a variable:

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

Using a variable for a link is highly practical when the target page or website address changes frequently.

**How it works:**

1. Define a variable (e.g., `landing_page_url`) in your project settings.
2. Reference this variable (e.g., `#{landing_page_url}`) in all Web App buttons throughout your flows.

**Benefit:** instead of manually updating the URL in every individual button block, you only need to change the variable's value once in the project settings, and all buttons will automatically update.

**Alternative:** you can, of course, still specify a direct, static URL directly in the button settings.

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

## How to create buttons for Telegram API functions

While working directly with the Telegram Bot API can be challenging, especially for beginners, MaviBot offers a much more accessible alternative.

**Method: use generated code**

You can utilize the **pre-generated button code** from the advanced settings, eliminating the need to write API calls manually.

**Steps:**

1. Navigate to your block settings and open the **Buttons** section.
2. Use the interface to add and configure all your required buttons (text, links, functions).
3. The system will automatically generate the correct Telegram API code in the background.

This approach allows you to create complex keyboards visually while the platform handles the underlying technical implementation.

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

Click **"Advanced Settings"** to view the generated Telegram API code for your buttons.

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

Test your buttons, then copy the generated code from **Advanced Settings** into a variable like `buttons`.

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

This function sends a message via the Telegram API with the following parameters: 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):

Pass the buttons variable to the function in the reply\_markup parameter:

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

Your buttons will appear in the chat with the layout and style you defined.

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

## How to delete reply buttons

While keyboard buttons typically disappear automatically, they can sometimes remain visible.

To forcefully clear lingering reply buttons, insert the following code into the **Advanced Settings** field:

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

This empty button configuration instructs Telegram to hide the custom keyboard.

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

### Keyboard menu buttons in Telegram

{% hint style="warning" %}
We recommend using this feature only for advanced users!
{% endhint %}

### Keyboard buttons

To be able to use the keyboard buttons (reply) as a permanent Telegram menu, it is enough to assign any value to the variable tg\_permanent\_reply\_buttons (the variable is declared a constant of the project).

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

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

#### **Variable: `tg_permanent_reply_buttons`**

Setting the **`tg_permanent_reply_buttons`** variable gives you **full manual control** over the visibility of the reply keyboard (buttons below the message). All automatic hiding behavior by the platform is disabled.

**Scope:** this setting applies to **all** reply buttons created in the bot while the variable is active.

#### **Reverting to automatic behavior**

To restore the standard automatic keyboard hiding:

1. **Remove the `tg_permanent_reply_buttons`** variable from your project settings.
2. **Recreate any reply buttons** that were originally made while the variable was active. Buttons created under the "permanent" rule retain that state and must be recreated to inherit the new, automatic behavior.

## How to create a menu in Telegram

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

The one who created the Telegram bot can make such a menu.

To do this, write to [Botfather](https://t.me/BotFather) in Telegram.

Enter the /mybots command, and the list of your bots opens. Choose the one you need. A menu opens for you. Here you need to select **Edit Bot**, and then **Edit Commands**.

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

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

Enter all commands and their descriptions in a single message, using lowercase letters for command names. You will receive a confirmation when the list is updated.

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

You can now see and use the menu in your Telegram chat with the bot.

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

When you click on the menu button, a list of commands that were previously registered in BotFather will open:

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

Next, go to Mavibot, open the project to which this telegram bot is connected.

Create the **Start** or **Trigger** blocks, write commands in the conditions, and in the **"Message text"** field — the texts that will be received in response.

Example:

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

## How to combine two types of buttons

Create a block with a reply button (keyboard), which you need to visualize.

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

Create the next block (a timer of 0 seconds) with inline buttons (buttons in the text), which must be placed without removing the reply buttons. For example: \[{"type": "inline", "text": "BUTTON NAME", "line": 0, "index\_in\_line": 0}]

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

Here is the result:

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

{% hint style="success" %}
**Important:** you must follow this order when adding buttons in the same block:

1. **First,** add all Reply (keyboard) buttons.
2. **Then,** add any Inline buttons.

If this sequence is reversed, the reply buttons will be removed when the next message block is sent.
{% 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/chatbot/messengers/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.