# Кнопка Web App

Существует 3 типа кнопок для доступа к вашему веб-приложению:

* кнопка в тексте;
* кнопка на клавиатуре;
* кнопка меню бота.

### Кнопка Web App во вкладке кнопок

Для первых двух вариантов создайте кнопку и установите для неё функцию **"Telegram Web App"**.

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

**Шаг 1.** Во вкладке **Текст** в поле введите название кнопки.

**Шаг 2.** Выберите мини-приложение для открытия. Это может быть сайт или мини-приложение, созданное в MaviBot.

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

Затем просто выберите сайт из списка или укажите внешний сайт.

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

**Шаг 3.** Введите URL вашего сайта.

**Шаг 4.** Нажмите **"Добавить"**&#x438; затем сохраните настройки блока.

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

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

**Шаг 5.** Выберите тип кнопки, затем настройте её параметры.

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

Тип кнопки по умолчанию — кнопка на клавиатуре. Хотя клавиатурные и inline-кнопки выглядят по-разному, их основная функция одинакова.

Вот примеры, настроенные в расширенных параметрах:

Кнопка в тексте:\
`[{"line":0,"index_in_line":0,"text":"Web App","type":"inline","web_app":"здесь будет ссылка на ваше приложение"}]`

Кнопка на клавиатуре:\
`[{"line":0,"index_in_line":0,"text":"Web-App","type":"web_app","web_app":"здесь будет ссылка на ваше приложение"}]`

### Пример

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

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

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

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

{% hint style="info" %}
Не забудьте, что ваше веб-приложение должно быть настроено особым образом.

Имейте в виду, что вашему веб-приложению требуется специальная настройка. Официальные инструкции по настройке от разработчиков Telegram можно найти здесь: [**Web Apps для ботов**](https://core.telegram.org/bots/webapps#initializing-web-apps)**.**
{% endhint %}

{% hint style="info" %}
Web App можно привязать к сайту, созданному в MaviBot, например к сервису онлайн-бронирования или интернет-магазину.

1. [Как настроить онлайн-бронирование](/doc/ru/booking/settings/widget.md#telegram-widget)
2. [Как создать интернет-магазин](/doc/ru/websites/online-store/settings.md#telegram-web-app)
   {% endhint %}

### Кнопка Web App в Калькуляторе

Третий тип кнопки создаётся с помощью функции калькулятора.

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

`tg_set_chat_menu_button(type, text, web_app_url, platform_id)`где:

* **тип** — необязательный параметр, указывающий один из трёх типов кнопок ("default", "commands", "web\_app"),
* **text** — необязательный параметр; если **тип** не выбрано, это задаёт текст на кнопке,
* **web\_app\_url** — необязательный параметр; ссылка на ваше веб-приложение (используется только когда **тип** равно "web\_app"),
* **platform\_id** — необязательный параметр; указывает конкретный чат пользователя, если по какой-то причине вы хотите отображать кнопку только для определённого пользователя.

Вот пример создания кнопки для доступа к веб-приложению:\
`tg_set_chat_menu_button('web_app', 'Web app', 'здесь будет ссылка на ваше приложение')`

**Результат:**

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

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


---

# 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/ru/chatbot/builder/knopki/webapp.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.