# Telegram WebApp

## Виджет Telegram

Теперь, когда вы знаете, как создать виджет и встроить его на свой сайт, вы можете создать **кнопку Web App в Telegram** которая открывает ваш сайт как приложение внутри мессенджера.

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

**Шаг 1. Создание блока**

Создайте блок в конструкторе чат-бота.

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

{% hint style="success" %}
Примечание!

Не забудьте сохранить настройки блока.
{% endhint %}

**Шаг 2. Создайте кнопку WebApp**

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

Далее, в открывшемся модальном окне, введите текст кнопки и выберите тип «WebApp».

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

Затем выберите сайт, который вы создали в MaviBot.

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

Если ваш сайт не был создан в MaviBot, выберите вкладку «Указать внешнюю ссылку» и введите URL своего сайта.

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

После этого кнопка Web App с виджетом онлайн-бронирования станет доступна в боте.


---

# 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/booking/telegram-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.