# زر Web App

هناك 3 أنواع من الأزرار للوصول إلى تطبيق الويب الخاص بك:

* زر في النص؛
* زر في لوحة المفاتيح؛
* زر قائمة البوت.

### زر Web App في تبويب الأزرار

بالنسبة للخيارين الأولين، أنشئ زرًا واضبط وظيفته على **"Telegram Web App"**.

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

**الخطوة 1.** في **نص** في الحقل، أدخل تسمية الزر.

**الخطوة 2.** اختر التطبيق المصغّر لفتحه. يمكن أن يكون هذا موقعًا إلكترونيًا أو تطبيقًا مصغّرًا تم إنشاؤه في MaviBot.

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

ثم، ببساطة اختر موقعًا من القائمة أو حدِّد موقعًا خارجيًا.

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

**الخطوة 3.** أدخل عنوان URL لموقعك الإلكتروني.

**الخطوة 4.** انقر **"إضافة"**، ثم احفظ إعدادات الكتلة.

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

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

**الخطوة 5.** اختر نوع الزر، ثم اضبط إعداداته الخاصة.

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

نوع الزر الافتراضي هو زر لوحة المفاتيح. وعلى الرغم من أن أزرار لوحة المفاتيح والأزرار المضمنة تبدو مختلفة، فإن وظيفتها الأساسية متطابقة.

فيما يلي أمثلة تم إعدادها في الإعدادات المتقدمة:

زر في النص:\
`[{"line":0,"index_in_line":0,"text":"Web App","type":"inline","web_app":"سيكون الرابط إلى تطبيقك هنا"}]`

زر في لوحة المفاتيح:\
`[{"line":0,"index_in_line":0,"text":"Web-App","type":"web_app","web_app":"سيكون الرابط إلى تطبيقك هنا"}]`

### مثال

وبالتالي، ستحصل على زر بجوار حقل إدخال الرسالة سيكون مرئيًا دائمًا.

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

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

تفتح جميع أنواع الأزرار الثلاثة تطبيق الويب المرتبط في نافذة منفصلة.

{% hint style="info" %}
لا تنسَ أن تطبيق الويب الخاص بك يحتاج إلى أن يكون مُهيّأً بطريقة معينة.

يرجى العلم أن تطبيق الويب الخاص بك يتطلب إعدادًا خاصًا. يمكنك العثور على إرشادات الإعداد الرسمية من مطوري Telegram هنا: [**تطبيقات الويب للروبوتات**](https://core.telegram.org/bots/webapps#initializing-web-apps)**.**
{% endhint %}

{% hint style="info" %}
يمكن ربط Web App بموقع تم إنشاؤه في MaviBot، مثل خدمة حجز عبر الإنترنت أو متجر تجارة إلكترونية.

1. [كيفية إعداد الحجز عبر الإنترنت](/doc/ar/booking/settings/widget.md#telegram-widget)
2. [كيفية إنشاء متجر إلكتروني](/doc/ar/websites/online-store/settings.md#telegram-web-app)
   {% endhint %}

### زر Web App في الحاسبة

يتم إنشاء نوع الزر الثالث باستخدام وظيفة الحاسبة.

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

`tg_set_chat_menu_button(type, text, web_app_url, platform_id)`، حيث:

* **النوع** — معلمة اختيارية تحدد أحد أنواع الأزرار الثلاثة ("default"، "commands"، "web\_app")،
* **text** — معلمة اختيارية؛ إذا **النوع** لم يتم تحديده، فهذا يضبط النص على الزر،
* **web\_app\_url** — معلمة اختيارية؛ الرابط إلى تطبيق الويب الخاص بك (تُستخدم فقط عندما **النوع** هي "web\_app")،
* **platform\_id** — معلمة اختيارية؛ تحدد دردشة مستخدم معيّن إذا كنت، لسبب ما، تريد عرض الزر لمستخدم محدد فقط.

فيما يلي مثال على إنشاء زر للوصول إلى تطبيق ويب:\
`tg_set_chat_menu_button('web_app', 'تطبيق ويب', 'سيكون الرابط إلى تطبيقك هنا')`

**النتيجة:**

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

<div data-with-frame="true"><figure><img src="/files/84b83288ecedb06399384582a393fcf62ffac104" 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/ar/chatbot/builder/alazrar/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.