# أداة الحجز عبر الإنترنت للموقع

ستساعد الأداة العملاء على حجز خدماتك عبر تيليجرام وعلى موقعك الإلكتروني.

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

يمكن دمج الأداة سواءً في موقع إلكتروني تم إنشاؤه باستخدام MaviBot أو في صفحة هبوط أُنشئت باستخدام أدوات بناء أخرى.

## كيفية إنشاء أداة

{% hint style="info" %}
أولاً، تحتاج إلى إنشاء فرع وإعداد الخدمات عبر إسنادها إلى الموظفين. وقد شرحنا كيفية القيام بذلك في المقال "إعدادات خدمة الحجز".
{% endhint %}

للبدء، انتقل إلى قسم "الأدوات" الذي يمكنك العثور عليه في القائمة العلوية.

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

إذا لم يتم إنشاء أي أدوات في المشروع بعد، فسترى أربعة أزرار في وسط الشاشة ضمن قسم "الأدوات".

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

انقر على زر "أداة الحجز عبر الإنترنت"، وستنتقل إلى إعدادات الأداة.

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

### معلومات أساسية

<figure><img src="/files/8500805d911e2b46b111f2352db9ac086ce0a264" alt=""><figcaption></figcaption></figure>

في هذه العلامة، تحتاج إلى إدخال اسم الأداة (الذي سيظهر على الموقع) ونطاق الموقع الذي تريد أن تظهر فيه أداة الحجز عبر الإنترنت (إذا لم يكن الموقع مبنيًا باستخدام MaviBot). إذا كان الموقع مبنيًا باستخدام أداة بناء MaviBot، فلن تحتاج إلى تحديد النطاق.
&#x20;بعد ذلك، اختر الفرع الذي ستُعرض خدماته وموظفوه في الأداة:

<figure><img src="/files/f26f4f3273286e8149eaf167db9c19319f446575" alt=""><figcaption></figcaption></figure>

يمكنك الآن الانتقال إلى تخصيص الأداة.

<figure><img src="/files/325c746c7feb27c2f1f8356cdbcd0fb7d6ab5654" alt=""><figcaption></figcaption></figure>

### إعدادات المظهر

سيتم عرض الشعار واسم الأداة في الترويسة:

<figure><img src="/files/585e0c8d79d865815311a44306805e24d24c5b64" alt="" width="563"><figcaption></figcaption></figure>

بعد ذلك، يمكنك إدخال عنوان وعنوان فرعي في الأداة، وسيظهران فوق أزرار اختيار الخدمة أو المتخصص:

<figure><img src="/files/c84aba98e0bd18bc00620357336e99a11f6ddc73" alt="" width="563"><figcaption></figcaption></figure>

**نظام ألوان الأداة**

يمكنك اختيار نظام ألوان الأداة وفقًا لتفضيلاتك:

1. خلفية الأداة:

<figure><img src="/files/6d37f09afb4785416fd10e01215c377f37c03164" alt="" width="349"><figcaption></figcaption></figure>

2. سيعرض المظهر الرئيسي لعلامتك التجارية في الأداة الأزرار والأسعار والأيقونات بنظام الألوان المحدد:

<figure><img src="/files/a9753a76e327791b9881baaab22f291adb1d1456" alt="" width="349"><figcaption></figcaption></figure>

3. لون النص: يغيّر لون نص الزر أو النص الرئيسي وفقًا للخيار المحدد.

<figure><img src="/files/bd00ddeceae2948aa81a6ff6059378e0bff19d83" alt="" width="311"><figcaption></figcaption></figure>

4. نص الزر:

<figure><img src="/files/22f4197ff965ab9dc8e015777ca165d178b8ed59" alt="" width="375"><figcaption></figcaption></figure>

افتراضيًا، تعرض الأزرار النص **"اختيار الخدمات"** و **"اختيار المتخصص**،" ولكن يمكنك تخصيص النص كما تريد:

<figure><img src="/files/81741d6c5e8d112dd71aa5c925729f2b3018a038" alt="" width="375"><figcaption></figcaption></figure>

الآن احفظ إعداداتك:

<figure><img src="/files/19ef0b0030b783a21b12edde904cc81f9b65e98f" alt=""><figcaption></figcaption></figure>

### كيفية تضمين الأداة في موقعك الإلكتروني

انتقل إلى وضع تحرير الموقع:

<figure><img src="/files/3ed0fac777133e81cc1a1251e6223bd48b587ec4" alt=""><figcaption></figcaption></figure>

بعد ذلك، ابحث عن **"الحجز عبر الإنترنت"** ضمن القائمة وأضفه:

<figure><img src="/files/c89e83dc721fe7e1d0517d7a61ac41fdb4ea5868" alt="" width="351"><figcaption></figcaption></figure>

في إعدادات المحتوى، اختر أي أداة تريد عرضها على الموقع (إذا كان لديك عدة أدوات للحجز عبر الإنترنت):

<figure><img src="/files/609909c01d18d6ec7f07e71d299269419d94447f" alt=""><figcaption></figcaption></figure>

إذا لزم الأمر، يمكنك تعديل إعدادات الخلفية والعرض لقسم الأداة. للقيام بذلك، مرر المؤشر فوق القسم وانقر على زر **"الإعدادات"** :

<figure><img src="/files/44d33cbf56afb4b9031017f665b412a0b5cf347f" alt="" width="563"><figcaption></figcaption></figure>

اضبط الخلفية المطلوبة وإعدادات العرض:

<figure><img src="/files/e22c044fdd1d5048195d42a39924defe6b794367" alt=""><figcaption></figcaption></figure>

احفظ إعدادات الموقع.
\
الآن يمكن لعملائك حجز الخدمات على مدار الساعة ببساطة من خلال زيارة موقعك الإلكتروني:

<figure><img src="/files/4f45e499b902b18d7a5c56e9d4e13cf2859e523e" alt=""><figcaption></figcaption></figure>

**كيفية تضمين الأداة في موقع إلكتروني آخر**

بعد حفظ الأداة، حدّث الصفحة لترى الكتلة التالية التي تحتوي على سكربت الأداة وحقلًا لإدخال اسم القسم:

<figure><img src="/files/d2184ce13b9a39b89112e4392ea788119cc31d2d" alt="" width="375"><figcaption></figcaption></figure>

إذا كنت بحاجة إلى تضمين الشيفرة في موقعك الإلكتروني، فانسخ السكربت والصقه في صفحة الهبوط الخاصة بك. <br>

إذا كنت تستخدم الأداة على مواقعك الخاصة غير المبنية باستخدام MaviBot، فتأكد من إدخال فئة العنصر في الحقل المخصص:

<figure><img src="/files/bb191e8164380f495a93b29fd2732d99bde4a808" alt=""><figcaption></figcaption></figure>

## أداة تيليجرام

الآن بعد أن عرفت كيفية إنشاء أداة وتضمينها في موقعك الإلكتروني، يمكنك إنشاء **زر Web App في تيليجرام** يفتح موقعك كتطبيق داخل المراسِل.

{% hint style="info" %}
بدلاً من موقع كامل، يمكنك إنشاء صفحة هبوط تحتوي على قسم واحد يضم أداة الحجز عبر الإنترنت ومشاركتها مع عملائك كزر تيليجرام باستخدام زر Web App.
{% endhint %}

تحتاج إلى استخدام الدالة `quiz_link(mini_landing_page_id, display_my_domain)`، ولكن فقط `mini_landing_page_id` المعامل مطلوب.<br>

بعد ذلك، أنشئ كتلة حيث تقوم، في الحاسبة، بتعيين متغير (في هذا المثال، يُسمى المتغير `booker_link`) يستخدم الدالة `quiz_link(mini_landing_page_id)`، مع تمرير معرّف صفحة الموقع كمعامل:

**الخطوة 1. إنشاء الكتلة باستخدام الدالة**<br>

أنشئ كتلة في الباني، وفي الحاسبة، عرّف متغيرًا باستخدام الدالة كما يلي: booker\_link = quiz\_link('YOUR\_SITE\_ID')

<figure><img src="/files/91e78dcbafafdc3a38cca2c7bef20cbc8bac448a" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
ملاحظة!

لا تنسَ حفظ إعدادات الكتلة.
{% endhint %}

**الخطوة 2. اعثر على معرّف صفحة الموقع المطلوب.** <br>

للعثور على معرّف صفحة الموقع، انتقل إلى القسم المقابل:

<figure><img src="/files/a401de7805ce933a35cb6cf6908ceedab08fb816" alt=""><figcaption></figcaption></figure>

انقر على بطاقة الموقع المطلوب للانتقال إلى إعدادات صفحة ذلك الموقع:

<figure><img src="/files/82879a0ee2f43ec48ca9c2dcf1dbdbb6d949b440" alt=""><figcaption></figcaption></figure>

ثم مرر المؤشر فوق الصف الذي يحتوي على الصفحة التي أنشأت فيها **"الحجز عبر الإنترنت"** القسم:

<figure><img src="/files/44fbf03c98d36784c30955ca655e92f0dd3abf37" alt=""><figcaption></figcaption></figure>

انسخ المعرف والصقه في الكتلة داخل منشئ المسار:

<figure><img src="/files/521cb66a41546b79af7fb39024b4c2927bad6328" alt=""><figcaption></figcaption></figure>

**الخطوة 3. أضف زرًا إلى الكتلة في الباني.** <br>

بعد ذلك، وسّع علامة تبويب إعدادات "الأزرار" (انقر على "الأزرار") ثم انقر على **"+ إضافة زر"**:

<figure><img src="/files/7b4b821b459dafbb0f165720ddf4c77c62eb5b0a" alt=""><figcaption></figcaption></figure>

بعد النقر، ستفتح إعدادات الزر لإضافة زر جديد:

<figure><img src="/files/3cb92e748c341781a79774d8ab473afc87397113" alt=""><figcaption></figcaption></figure>

هنا تحتاج إلى:

* تعيين اسم الزر: يمكن أن يكون أي اسم تريده.
* تعيين وظيفة الزر: يجب أن يكون زر Telegram Web App.

<figure><img src="/files/53f36488060deb82c8b3ed676ef2d78161b9e577" alt=""><figcaption></figcaption></figure>

* حدّد الرابط الذي سيتم فتحه عند النقر على الزر:

الرابط مخزّن بالفعل في متغير باستخدام الحاسبة و `quiz_link` الدالة، لذا في حقل URL، أدخل المتغير المعيّن `booker_link` باستخدام الاستبدال — أي قم بإدراج المتغير داخل `#{}`، والذي يحتوي على رابط موقعك وأداتك.

<figure><img src="/files/222e9fffbab720bc1f92457adb794e144b451b86" alt=""><figcaption></figcaption></figure>

بعد ذلك، انقر على زر **"إضافة"** لحفظ إعدادات الزر وإضافته إلى الكتلة. تأكد من النقر على **"حفظ"** بعد ذلك لضمان عدم فقدان إعدادات الكتلة.

<figure><img src="/files/6ac2c2c7aa99ca955c8a6628ba2d5f2c1f0354d5" alt="" width="563"><figcaption></figcaption></figure>

تبدو الكتلة المكتملة الإعداد هكذا:

<figure><img src="/files/470ca3c674b6d7b114eafd39384adc2f92a9fb89" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**نصيحة مفيدة!**\
ليس من الضروري إنشاء كتلة شرطية (مثل فحص الشرط الأساسي أو بدء المحادثة) خصيصًا لزر Web App. يمكنك إنشاء الزر وإضافة `quiz_link` الدالة في أي كتلة من مسارك—سواء كانت كتلة حالة، أو كتلة غير حالة، إلخ. (انظر المثال "كتلة حالة الحوار مع زر Telegram Web App").
{% endhint %}

<figure><img src="/files/d9ae5b8f50c50df7d8a40efbd3d1672c44e7104d" alt=""><figcaption><p>مثال: "كتلة حالة الحوار" مع زر Telegram Web App</p></figcaption></figure>

سيصبح زر Web App مع أداة الحجز عبر الإنترنت متاحًا بعد ذلك داخل البوت:

<figure><img src="/files/fd7d122ed523eb450f6f4ef0f643fbe862ce47a1" alt="" width="375"><figcaption></figcaption></figure>

## رد الحجز

بعد أن يحجز العميل موعدًا، سيتم إرسال إشعار ردّ بشأن الحجز في الحوار، ويبدو هكذا:

<figure><img src="/files/9ec8c0aa4b9928fe13d24127a38026ecb71a2d7d" alt="" width="464"><figcaption></figcaption></figure>

<mark style="color:orange;">**new\_order\_in\_calendar**</mark> - الجزء غير القابل للتغيير من الردّ&#x20;

&#x20;<mark style="color:yellow;">**\[489046159]**</mark> - order\_id  معرّف الحجز

<mark style="color:red;">**إضافة Appointment\_date\_and\_time**</mark>

<mark style="color:purple;">**на 30 минут**</mark> - مدة الخدمة&#x20;

<mark style="color:red;">**Объекту: Тест 30**</mark> - إلى أي كائن/عنصر محدد تمت إضافة الحجز

مظهر رسالة الردّ:

*new\_order\_in\_calendar: \[489046159] تمت إضافة موعد من 2025-06-01 14:00 إلى 2025-06-01 14:30 لمدة 30 دقيقة. الكائن: Test 30*

يمكنك إعداد ردّ فعل على الردّ عبر تحديد قيمته في شرط الكتلة:

<figure><img src="/files/0f389ff31199180db9fd9e7547f7d26c3e96022d" alt=""><figcaption></figcaption></figure>

في الكتلة، يمكنك تحديد رسالة الرد المطلوبة لإرسالها إلى العميل.


---

# 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/booking/settings/widget.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.