# Bouton Web App

Il existe 3 types de boutons pour accéder à votre application web :

* bouton dans le texte ;
* bouton dans le clavier ;
* bouton du menu du bot.

### Bouton Web App dans l’onglet des boutons

Pour les deux premières options, créez un bouton et définissez sa fonction sur **« Telegram Web App »**.

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

**Étape 1.** Dans l’onglet **Texte** champ, saisissez le libellé du bouton.

**Étape 2.** Sélectionnez la mini-application à ouvrir. Il peut s’agir d’un site ou d’une mini-application créée dans MaviBot.

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

Ensuite, sélectionnez simplement un site dans la liste ou indiquez un site externe.

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

**Étape 3.** Saisissez l’URL de votre site web.

**Étape 4.** Cliquez **"Ajouter"**, puis enregistrez les paramètres du bloc.

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

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

**Étape 5.** Sélectionnez le type de bouton, puis configurez ses paramètres spécifiques.

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

Le type de bouton par défaut est le bouton du clavier. Bien que les boutons du clavier et les boutons inline apparaissent différemment, leur fonction principale est identique.

Voici des exemples configurés dans les paramètres avancés :

Bouton dans le texte :\
`[{"line":0,"index_in_line":0,"text":"Web App","type":"inline","web_app":"le lien vers votre application se trouvera ici"}]`

Bouton dans le clavier :\
`[{"line":0,"index_in_line":0,"text":"Web-App","type":"web_app","web_app":"le lien vers votre application se trouvera ici"}]`

### Exemple

Ainsi, vous obtiendrez un bouton à côté du champ de saisie du message, qui sera toujours visible.

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

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

Les trois types de boutons ouvrent l’application web liée dans une fenêtre séparée.

{% hint style="info" %}
N’oubliez pas que votre application web doit être configurée d’une manière spécifique.

Veuillez noter que votre application web nécessite une configuration spécifique. Vous pouvez trouver ici les instructions officielles de configuration des développeurs Telegram : [**Applications web pour les bots**](https://core.telegram.org/bots/webapps#initializing-web-apps)**.**
{% endhint %}

{% hint style="info" %}
La Web App peut être liée à un site créé dans MaviBot, comme un service de réservation en ligne ou une boutique en ligne.

1. [Comment configurer une réservation en ligne](/doc/fr/booking/settings/widget.md#telegram-widget)
2. [Comment créer une boutique en ligne](/doc/fr/websites/online-store/settings.md#telegram-web-app)
   {% endhint %}

### Bouton Web App dans la calculatrice

Le troisième type de bouton est créé à l’aide d’une fonction de calculatrice.

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

`tg_set_chat_menu_button(type, text, web_app_url, platform_id)`, où :

* **type** — un paramètre facultatif qui spécifie l’un des trois types de bouton (« default », « commands », « web\_app »),
* **text** — un paramètre facultatif ; si **type** n’est pas sélectionné, cela définit le texte du bouton,
* **web\_app\_url** — un paramètre facultatif ; le lien vers votre application web (utilisé uniquement lorsque **type** est « web\_app »),
* **platform\_id** — un paramètre facultatif ; spécifie un chat utilisateur particulier si, pour une raison quelconque, vous souhaitez afficher le bouton uniquement à un utilisateur spécifique.

Voici un exemple de création d’un bouton pour accéder à une application web :\
`tg_set_chat_menu_button('web_app', 'Web app', 'le lien vers votre application se trouvera ici')`

**Résultat :**

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

<div data-with-frame="true"><figure><img src="/files/48fb34fc6be276d6ab380db58db5eef16b905ee8" 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/fr/chatbot/builder/boutons/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.