# Web App butonu

Web uygulamanıza erişmek için 3 tür düğme vardır:

* metin içindeki düğme;
* klavyedeki düğme;
* bot menü düğmesi.

### Düğmeler sekmesindeki Web App düğmesi

İlk iki seçenek için bir düğme oluşturun ve işlevini **"Telegram Web App"**.

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

**Adım 1.** içinde **Metin** alanına ayarlayın ve düğme etiketi için metni girin.

**Adım 2.** Açılacak mini uygulamayı seçin. Bu bir site veya MaviBot'ta oluşturulmuş bir mini uygulama olabilir.

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

Ardından, listeden bir site seçin veya harici bir site belirtin.

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

**Adım 3.** Web sitenizin URL'sini girin.

**4. Adım.** Tıklayın **"Ekle"**&#x76;e ardından blok ayarlarını kaydedin.

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

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

**5. Adım.** Düğme türünü seçin, ardından ona özgü ayarlarını yapılandırın.

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

Varsayılan düğme türü klavye düğmesidir. Klavye ve satır içi düğmeler farklı görünse de, temel işlevleri aynıdır.

İşte gelişmiş ayarlarda yapılandırılmış örnekler:

Metin içindeki düğme:\
`[{"line":0,"index_in_line":0,"text":"Web App","type":"inline","web_app":"burada uygulamanızın bağlantısı olacak"}]`

Klavyedeki düğme:\
`[{"line":0,"index_in_line":0,"text":"Web-App","type":"web_app","web_app":"burada uygulamanızın bağlantısı olacak"}]`

### Örnek

Sonuç olarak, mesaj giriş alanının yanında her zaman görünür olacak bir düğme elde edeceksiniz.

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

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

Üç düğme türünün tamamı, bağlantılı web uygulamasını ayrı bir pencerede açar.

{% hint style="info" %}
Web uygulamanızın belirli bir şekilde yapılandırılması gerektiğini unutmayın.

Lütfen web uygulamanızın belirli bir yapılandırma gerektirdiğini unutmayın. Resmî kurulum yönergelerini Telegram geliştiricilerinden burada bulabilirsiniz: [**Botlar için Web Apps**](https://core.telegram.org/bots/webapps#initializing-web-apps)**.**
{% endhint %}

{% hint style="info" %}
Web App, MaviBot'ta oluşturulmuş bir siteye, örneğin çevrimiçi rezervasyon hizmeti veya bir e-ticaret mağazasına bağlanabilir.

1. [Çevrimiçi rezervasyon nasıl kurulur](/doc/tr/booking/settings/widget.md#telegram-widget)
2. [Çevrimiçi mağaza nasıl oluşturulur](/doc/tr/websites/online-store/settings.md#telegram-web-app)
   {% endhint %}

### Hesaplayıcıdaki Web App düğmesi

Üçüncü düğme türü bir hesaplayıcı işlevi kullanılarak oluşturulur.

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

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

* **tür** — üç düğme türünden birini ("default", "commands", "web\_app") belirten isteğe bağlı bir parametre,
* **text** — isteğe bağlı bir parametre; eğer **tür** seçilmemişse, bu düğmedeki metni belirler,
* **web\_app\_url** — isteğe bağlı bir parametre; web uygulamanızın bağlantısı (yalnızca **tür** "web\_app" olduğunda kullanılır),
* **platform\_id** — isteğe bağlı bir parametre; eğer herhangi bir nedenle düğmeyi yalnızca belirli bir kullanıcıya göstermek istiyorsanız, belirli bir kullanıcı sohbetini belirtir.

İşte bir web uygulamasına erişmek için bir düğme oluşturma örneği:\
`tg_set_chat_menu_button('web_app', 'Web app', 'burada uygulamanızın bağlantısı olacak')`

**Sonuç:**

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

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