# Botón Web App

Hay 3 tipos de botones para acceder a tu aplicación web:

* botón en el texto;
* botón en el teclado;
* botón del menú del bot.

### Botón Web App en la pestaña de botones

Para las dos primeras opciones, crea un botón y establece su función en **"Telegram Web App"**.

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

**Paso 1.** En la **Texto** campo, introduce la etiqueta del botón.

**Paso 2.** Selecciona la mini-app que se abrirá. Puede ser un sitio web o una mini-app creada en MaviBot.

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

Luego, simplemente selecciona un sitio de la lista o especifica un sitio externo.

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

**Paso 3.** Introduce la URL de tu sitio web.

**Paso 4.** Haz clic en **"Añadir"**&#x79; luego guarda la configuración del bloque.

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

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

**Paso 5.** Selecciona el tipo de botón y luego configura sus ajustes específicos.

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

El tipo de botón predeterminado es el botón del teclado. Aunque los botones del teclado y los botones inline se ven diferente, su función principal es idéntica.

Aquí tienes ejemplos configurados en la configuración avanzada:

Botón en el texto:\
`[{"line":0,"index_in_line":0,"text":"Web App","type":"inline","web_app":"aquí estará el enlace a tu app"}]`

Botón en el teclado:\
`[{"line":0,"index_in_line":0,"text":"Web-App","type":"web_app","web_app":"aquí estará el enlace a tu app"}]`

### Ejemplo

Como resultado, obtendrás un botón junto al campo de entrada del mensaje que siempre estará visible.

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

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

Los tres tipos de botones abren la aplicación web vinculada en una ventana separada.

{% hint style="info" %}
No olvides que tu aplicación web necesita estar configurada de una manera específica.

Ten en cuenta que tu aplicación web requiere una configuración específica. Puedes encontrar aquí las pautas oficiales de configuración de los desarrolladores de Telegram: [**Aplicaciones web para bots**](https://core.telegram.org/bots/webapps#initializing-web-apps)**.**
{% endhint %}

{% hint style="info" %}
La Web App puede vincularse a un sitio creado en MaviBot, como un servicio de reservas en línea o una tienda de comercio electrónico.

1. [Cómo configurar reservas en línea](/doc/es/booking/settings/widget.md#telegram-widget)
2. [Cómo crear una tienda en línea](/doc/es/websites/online-store/settings.md#telegram-web-app)
   {% endhint %}

### Botón Web App en la Calculadora

El tercer tipo de botón se crea usando una función de calculadora.

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

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

* **tipo** — un parámetro opcional que especifica uno de los tres tipos de botón ("default", "commands", "web\_app"),
* **text** — un parámetro opcional; si **tipo** no está seleccionado, esto establece el texto del botón,
* **web\_app\_url** — un parámetro opcional; el enlace a tu aplicación web (se usa solo cuando **tipo** es "web\_app"),
* **platform\_id** — un parámetro opcional; especifica un chat de usuario concreto si, por alguna razón, quieres mostrar el botón solo a un usuario específico.

Aquí tienes un ejemplo de cómo crear un botón para acceder a una aplicación web:\
`tg_set_chat_menu_button('web_app', 'Web app', 'aquí estará el enlace a tu app')`

**Resultado:**

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

<div data-with-frame="true"><figure><img src="/files/708bf3b46b625b6673dad49ac937a5bfcb89d525" 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/es/chatbot/builder/botones/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.