# Web App button

There are 3 types of buttons to access your web application:

* button in the text;
* button in the keyboard;
* bot menu button.

### Web App button in button tab

For the first two options, create a button and set its function to **"Telegram Web App"**.

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

**Step 1.** In the **Text** field, enter the label for the button.

**Step 2.** Select the mini-app to open. This can be a bsite or a mini-app created in MaviBot.

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

Then, simply select a site from the list or specify an external site.

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

**Step 3.** Enter the URL for your website.

**Step 4.** Click **"Add"**, and then save the block settings.

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

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

**Step 5.** Select the button type, then configure its specific settings.

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

The default button type is the keyboard button. While keyboard and inline buttons appear differently, their core function is identical.

Here are examples configured in the advanced settings:

Button in text:\
`[{"line":0,"index_in_line":0,"text":"Web App","type":"inline","web_app":"here will be the link to your app"}]`

Button in keyboard:\
`[{"line":0,"index_in_line":0,"text":"Web-App","type":"web_app","web_app":"here will be the link to your app"}]`

### Example

As a result, you will get a button next to the message input field that will always be visible.

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

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

All three button types open the linked web application in a separate window.

{% hint style="info" %}
Don’t forget that your web application needs to be configured in a specific way.

Please be aware that your web application requires specific configuration. You can find the official setup guidelines from Telegram developers here: [**Web Apps for bots**](https://core.telegram.org/bots/webapps#initializing-web-apps)**.**
{% endhint %}

{% hint style="info" %}
The Web App can be linked to a site built in MaviBot, such as an online booking service or an e-commerce store.

1. [How to set up online booking](/booking/widget.md#telegram-widget)
2. [How to create an online Store](/websites/online-store/settings.md#telegram-web-app)
   {% endhint %}

### Web App button in the Calculator

The third button type is created using a calculator function.

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

`tg_set_chat_menu_button(type, text, web_app_url, platform_id)`, where:

* **type** — an optional parameter specifying one of the three button types ("default", "commands", "web\_app"),
* **text** — an optional parameter; if **type** is not selected, this sets the text on the button,
* **web\_app\_url** — an optional parameter; the link to your web application (used only when **type** is "web\_app"),
* **platform\_id** — an optional parameter; specifies a particular user chat if, for some reason, you want to display the button only to a specific user.

Here is an example of creating a button to access a web application:\
`tg_set_chat_menu_button('web_app', 'Web app', 'here will be the link to your app')`

**Result:**

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

<div data-with-frame="true"><figure><img src="/files/bLIn8yIz3T00uPOin9m4" 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/chatbot/builder/buttons/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.