# Кнопка Web App

Існує 3 типи кнопок для доступу до вашого вебзастосунку:

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

### Кнопка Web App у вкладці кнопок

Для перших двох варіантів створіть кнопку та встановіть її функцію як **"Telegram Web App"**.

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

**Крок 1.** У **Текст** у полі введіть напис для кнопки.

**Крок 2.** Виберіть міні-застосунок, який потрібно відкрити. Це може бути сайт або міні-застосунок, створений у MaviBot.

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

Потім просто виберіть сайт зі списку або вкажіть зовнішній сайт.

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

**Крок 3.** Введіть URL вашого вебсайту.

**Крок 4.** Натисніть **"Додати"**, а потім збережіть налаштування блоку.

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

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

**Крок 5.** Виберіть тип кнопки, а потім налаштуйте його параметри.

<div data-with-frame="true"><figure><img src="/files/558ccbfaaadea370bf7a22280579181d4602c3c4" 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/fc2964eeb2851d0d03bf732fdb49ccda60c1ce3f" alt="" width="375"><figcaption></figcaption></figure></div>

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

Усі три типи кнопок відкривають пов’язаний вебзастосунок в окремому вікні.

{% hint style="info" %}
Не забудьте, що ваш вебзастосунок має бути налаштований певним чином.

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

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

1. [Як налаштувати онлайн-бронювання](/doc/uk/booking/settings/widget.md#telegram-widget)
2. [Як створити інтернет-магазин](/doc/uk/websites/online-store/settings.md#telegram-web-app)
   {% endhint %}

### Кнопка Web App у Calculator

Третій тип кнопки створюється за допомогою функції калькулятора.

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

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

* **type** — необов’язковий параметр, що визначає один із трьох типів кнопок ("default", "commands", "web\_app"),
* **text** — необов’язковий параметр; якщо **type** не вибрано, це задає текст на кнопці,
* **web\_app\_url** — необов’язковий параметр; посилання на ваш вебзастосунок (використовується лише коли **type** є "web\_app"),
* **platform\_id** — необов’язковий параметр; вказує на певний чат користувача, якщо з якоїсь причини ви хочете показувати кнопку лише конкретному користувачу.

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

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

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

<div data-with-frame="true"><figure><img src="/files/86688629aef6723e8f79136f990c19aeb3104b0b" 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/uk/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.