# Botão Web App

Há 3 tipos de botões para acessar sua aplicação web:

* botão no texto;
* botão no teclado;
* botão do menu do bot.

### Botão Web App na aba de botões

Para as duas primeiras opções, crie um botão e defina sua função como **"Telegram Web App"**.

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

**Passo 1.** Na **Texto** campo, insira o rótulo do botão.

**Passo 2.** Selecione o mini-app para abrir. Isso pode ser um site ou um mini-app criado no MaviBot.

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

Depois, basta selecionar um site da lista ou especificar um site externo.

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

**Passo 3.** Insira a URL do seu site.

**Etapa 4.** Clique **"Adicionar"**, e então salve as configurações do bloco.

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

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

**Etapa 5.** Selecione o tipo de botão e depois configure suas definições específicas.

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

O tipo padrão de botão é o botão de teclado. Embora botões de teclado e inline apareçam de forma diferente, sua função principal é idêntica.

Aqui estão exemplos configurados nas configurações avançadas:

Botão no texto:\
`[{"line":0,"index_in_line":0,"text":"Web App","type":"inline","web_app":"aqui estará o link para seu app"}]`

Botão no teclado:\
`[{"line":0,"index_in_line":0,"text":"Web-App","type":"web_app","web_app":"aqui estará o link para seu app"}]`

### Exemplo

Como resultado, você terá um botão ao lado do campo de entrada da mensagem que estará sempre visível.

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

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

Todos os três tipos de botão abrem a aplicação web vinculada em uma janela separada.

{% hint style="info" %}
Não se esqueça de que sua aplicação web precisa ser configurada de uma maneira específica.

Por favor, esteja ciente de que sua aplicação web requer uma configuração específica. Você pode encontrar as diretrizes oficiais de configuração dos desenvolvedores do Telegram aqui: [**Web Apps para bots**](https://core.telegram.org/bots/webapps#initializing-web-apps)**.**
{% endhint %}

{% hint style="info" %}
O Web App pode ser vinculado a um site criado no MaviBot, como um serviço de agendamento online ou uma loja de e-commerce.

1. [Como configurar agendamento online](/doc/pt/booking/settings/widget.md#telegram-widget)
2. [Como criar uma loja online](/doc/pt/websites/online-store/settings.md#telegram-web-app)
   {% endhint %}

### Botão Web App na Calculadora

O terceiro tipo de botão é criado usando uma função de calculadora.

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

`tg_set_chat_menu_button(type, text, web_app_url, platform_id)`, em que:

* **type** — um parâmetro opcional que especifica um dos três tipos de botão ("default", "commands", "web\_app"),
* **text** — um parâmetro opcional; se **type** não estiver selecionado, isso define o texto do botão,
* **web\_app\_url** — um parâmetro opcional; o link para sua aplicação web (usado apenas quando **type** é "web\_app"),
* **platform\_id** — um parâmetro opcional; especifica um chat de usuário específico se, por algum motivo, você quiser exibir o botão apenas para um usuário específico.

Aqui está um exemplo de criação de um botão para acessar uma aplicação web:\
`tg_set_chat_menu_button('web_app', 'Web app', 'aqui estará o link para seu app')`

**Resultado:**

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

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