Your AI Connector Docs

أداة WhatsApp

دمج أداة WhatsApp

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

من الجيد معرفة ذلك. أداة WhatsApp هي مجرد زر “انقر للدردشة” — يؤدي النقر عليه إلى فتح تطبيق WhatsApp لزائرك حتى يتمكن من مراسلتك هناك. لا تقوم هذه الأداة بجلب الرسائل إلى صندوق وارد الدردشات (Chats) الخاص بك أو تشغيل الذكاء الاصطناعي من تلقاء نفسها. للحصول على تجربة دردشة ذكاء اصطناعي مضمنة داخل صفحة موقعك الإلكتروني، استخدم أداة الدردشة المنفصلة بدلاً من ذلك.

هل تريد فقط رابطاً عادياً أو زر خاص بك؟ إذا كنت لا ترغب في استخدام الأداة العائمة وتفضل ربط زر خاص بك (أو جزء من نص) مباشرة بدردشة WhatsApp، انتقل إلى هل تفضل رابطاً أو زراً عادياً؟ (wa.me) أدناه. للحصول على ما يعادل ذلك للرسائل القصيرة (SMS)، راجع إضافة رابط “انقر للمراسلة” (SMS).

التثبيت

  1. افتح ملف HTML الخاص بموقعك الإلكتروني في محرر نصوص.
  2. حدد موقع الوسم </body> (عادةً ما يكون في نهاية ملف HTML الخاص بك).
  3. الصق البرنامج النصي التالي مباشرة قبل الوسم </body>:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER"></script>
  1. في الكود أعلاه، استبدل:
    • NUMBER برقم WhatsApp الخاص بك
    • على سبيل المثال: للرقم 15551234567+، استخدم ببساطة: 15551234567

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

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

  1. استخدم هذا الكود بدلاً منه:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER/Your message here"></script>
  1. مثال برقم حقيقي ورسالة:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I'm interested in your services"></script>

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

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

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

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

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

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

<!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>

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

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

التنسيق هو:

https://wa.me/NUMBER

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

https://wa.me/31658015937

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

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

https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question

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

وضعه على زر

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

<a href="https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question">Chat on WhatsApp</a>

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

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