
# أداة WhatsApp

## دمج أداة WhatsApp

أضف زر دردشة WhatsApp عائم إلى موقعك الإلكتروني باستخدام هذا الدليل البسيط.

> **من الجيد معرفة ذلك.** أداة WhatsApp هي مجرد زر "انقر للدردشة" — يؤدي النقر عليه إلى فتح تطبيق WhatsApp لزائرك حتى يتمكن من مراسلتك هناك. لا تقوم هذه الأداة بجلب الرسائل إلى صندوق وارد الدردشات (Chats) الخاص بك أو تشغيل الذكاء الاصطناعي من تلقاء نفسها. للحصول على تجربة دردشة ذكاء اصطناعي مضمنة داخل صفحة موقعك الإلكتروني، استخدم [أداة الدردشة](chat-widget.md) المنفصلة بدلاً من ذلك.
>
> **هل تريد فقط رابطاً عادياً أو زر خاص بك؟** إذا كنت لا ترغب في استخدام الأداة العائمة وتفضل ربط زر خاص بك (أو جزء من نص) مباشرة بدردشة WhatsApp، انتقل إلى [هل تفضل رابطاً أو زراً عادياً؟ (wa.me)](#prefer-a-plain-link-or-button-wa-me) أدناه. للحصول على ما يعادل ذلك للرسائل القصيرة (SMS)، راجع [إضافة رابط "انقر للمراسلة" (SMS)](../messaging-channels/sms.md#adding-a-click-to-text-sms-link-to-your-website).

### التثبيت

1. افتح ملف HTML الخاص بموقعك الإلكتروني في محرر نصوص.
2. حدد موقع الوسم `</body>` (عادةً ما يكون في نهاية ملف HTML الخاص بك).
3. الصق البرنامج النصي التالي مباشرة قبل الوسم `</body>`:

{% code overflow="wrap" %}
```html
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER"></script>
```
{% endcode %}

1. في الكود أعلاه، استبدل:
   * `NUMBER` برقم WhatsApp الخاص بك
   * على سبيل المثال: للرقم 15551234567+، استخدم ببساطة: 15551234567

### إضافة رسالة مخصصة

إذا كنت تريد ظهور رسالة مملوءة مسبقاً عندما ينقر شخص ما على الزر:

1. استخدم هذا الكود بدلاً منه:

{% code overflow="wrap" %}
```html
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER/Your message here"></script>
```
{% endcode %}

1. مثال برقم حقيقي ورسالة:

{% code overflow="wrap" %}
```html
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I'm interested in your services"></script>
```
{% endcode %}

### ما الذي ستحصل عليه

بعد التثبيت، سترى تلقائياً:

* زر WhatsApp أخضر في أسفل يمين موقعك الإلكتروني
* يظل الزر مرئياً أثناء التمرير
* يعمل الزر بسلاسة على الأجهزة المحمولة
* تظهر رسوم متحركة خفيفة عند تمرير المؤشر فوق الزر

### معلومات إضافية

* يمكن كتابة رقم هاتفك مع أو بدون:
  * علامة الجمع (+)
  * المسافات
  * الشرطات (-)
  * سيتم معالجة هذه العناصر تلقائياً بشكل صحيح
* يمكن أن تحتوي الرسالة على مسافات بشكل طبيعي
* لا حاجة إلى ملفات أو عمليات تثبيت إضافية
* يتكيف الزر تلقائياً مع شاشات الهواتف المحمولة

### مثال كامل لصفحة ويب

{% code overflow="wrap" %}
```html
<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content here -->

    <!-- WhatsApp Widget (place this just before </body>) -->
    <script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I have a question"></script>
</body>
</html>
```
{% endcode %}

## هل تفضل رابطاً أو زراً بسيطاً؟ (wa.me)

تمنحك الأداة أعلاه زراً عائماً جاهزاً للاستخدام. ولكن إذا كان لديك بالفعل زر خاص بك (أو رابط في قائمة، أو صورة، أو نص) وتريد فقط أن يفتح محادثة WhatsApp مع رقمك، فأنت لا تحتاج إلى الأداة على الإطلاق — ما عليك سوى ربطه بعنوان URL `wa.me`.

التنسيق هو:

{% code overflow="wrap" %}
```
https://wa.me/NUMBER
```
{% endcode %}

استبدل `NUMBER` برقمك الكامل بالتنسيق الدولي — **أرقام فقط، بدون علامة جمع أو مسافات أو شرطات**. على سبيل المثال، بالنسبة للرقم +31 6 5801 5937، ستستخدم:

{% code overflow="wrap" %}
```
https://wa.me/31658015937
```
{% endcode %}

### التعبئة المسبقة للرسالة

لجعل الرسالة مكتوبة مسبقاً عند فتح المحادثة، أضف `?text=` متبوعاً برسالتك:

{% code overflow="wrap" %}
```
https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question
```
{% endcode %}

يجب كتابة المسافات في الرسالة كـ `%20` (هذه هي الطريقة التي تتعامل بها الروابط مع المسافات).

### وضعه على زر

اربط أي زر بعنوان URL هذا — تماماً بنفس الطريقة التي تربط بها زراً بأي عنوان ويب آخر. في لغة HTML الخام، يبدو الأمر هكذا:

{% code overflow="wrap" %}
```html
<a href="https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question">Chat on WhatsApp</a>
```
{% endcode %}

في منشئ مواقع الويب (Wix، Squarespace، WordPress، Webflow، إلخ)، أضف زراً كالمعتاد والصق عنوان URL `wa.me` في حقل "الرابط" / "URL" الخاص به.

> **هل تريد رابطاً قصيراً واحداً يتنقل بين عدة أرقام، ويتذكر الزوار العائدين، ويتتبع النقرات؟** استخدم الروابط القصيرة (ضمن **الإعدادات ← القنوات**) بدلاً من رابط `wa.me` خام.
