كيفية إضافة زر دردشة WhatsApp إلى WordPress (3 طرق مجانية، 2026)

موقع ووردبريس الخاص بك مباشر والزيارات تتدفق — وماذا بعد؟ معظم الزوار يصلون، يقرؤون، ويغادرون بدون طريقة سهلة لطرح سؤال. زر الدردشة على واتساب يحل هذه المشكلة في فترة بعد الظهر: نقرة واحدة تفتح الدردشة برقمك في التطبيق الذي يستخدمه عملاؤك بالفعل. تُظهر هذه المقالة ثلاث طرق مجانية لإضافة زر في عام 2026 — رابط wa.me عادي (مع جزء عائم اختياري)، إضافة ويدجيت للدردشة، أو منشئ الصفحات الخاص بك — وأين يتوقف كل واحد منهم، حتى تعرف متى تنتقل إلى واجهة برمجة تطبيقات واتساب للأعمال بدلاً من ذلك. The Tech Pad هي منصة واتساب للأعمال على واجهة برمجة التطبيقات السحابية الرسمية من ميتا مع 26 موصل ووردبريس مجاني، وصندوق بريد مشترك للفريق، وتتولى المسؤولية تمامًا حيث تنتهي أزرار الدردشة. الشهر الأول مجاني عند البدء، وكل عمل تجاري تحيله ويقوم بالتسجيل وربط رقم واتساب يعطيك شهرًا مجانيًا إضافيًا — حتى 5 أشهر مجانية أكثر — ليصبح المجموع 6 أشهر مجانية.

ما يفعله زر الدردشة على واتساب بالفعل

زر الدردشة هو رابط. خلف الفقاعة الخضراء يوجد عنوان URL بأحد الشكلين: https://wa.me/<countrycode><number> أو https://api.whatsapp.com/send?phone=<number>. عندما ينقر الزائر عليه، يفتح جهازه واتساب — التطبيق على الهاتف المحمول، أو web.whatsapp.com على متصفح سطح المكتب بدون التطبيق — مع بدء محادثة برقمك بالفعل.

هذه هي الحيلة كلها، وهي مهمة بسبب ما يفعله الزر لا يفعل: لا يرسل أي شيء من موقعك. يكتب الزائر الرسالة الأولى، لذا فهي دائمًا واردة، دائمًا مختارة طواعية، ومجانية. المحادثة تبقى في تطبيق واتساب الخاص بالعميل، وليس على خادمك. لا واجهة برمجة تطبيقات، لا موافقة، لا رسوم لكل رسالة.

ثلاث طرق لإضافة زر: مقارنة

جميع الطرق الثلاثة أدناه مجانية للبدء. الاختلافات تكمن في مقدار التحكم الذي تريده في مكان الزر، الاستهداف، والتتبع.

الطريقة 1: رابط wa.me بدون إضافة

التنسيق هو wa.me/<countrycode><number>?text=<urlencoded-message>لرقم هندي، يبدو كالتالي:

https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question

استخدم رمز الدولة بدون + أو فراغات — 91 لهند، 1 للولايات المتحدة. معامل text يعبيء رسالة الزائر الأولى مسبقًا؛ يجب ترميز الفراغات في الرابط (%20) وكذلك علامات الترقيم (%2C لفاصلة). إذا كنت تبني الرابط في JavaScript، encodeURIComponent() يتولى هذا عنك.

يمكنك وضع هذا الرابط في أي مكان يقبل WordPress الرابط.

• كتلة زر في محرر غوتنبرغ، مرتبطة برابط wa.me.
• عنصر قائمة التنقل — أضفه كرابط مخصص.
• الويدجت في التذييل أو الشريط الجانبي — ويدجت نص أو ويدجت HTML مخصص.
• زر عائم ثابت — الصق المقتطف أدناه في المخصص → CSS إضافي بالإضافة إلى ويدجت HTML مخصص في التذييل. إنه يثبت زرًا في الزاوية السفلى اليمنى مع z-index آمن وهدف نقر 48px، وهو الحد الأدنى للحجم المريح لإبهام الهاتف المحمول.

<a class="wa-float" href="https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question" target="_blank" rel="noopener">Chat on WhatsApp</a>

<style>
.wa-float {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  background: #25D366; color: #ffffff; padding: 12px 20px;
  border-radius: 40px; min-height: 48px; display: inline-flex;
  align-items: center; text-decoration: none; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.wa-float:hover { background: #1fb457; }
</style>

اختبر الرابط النهائي على هاتف حقيقي قبل النشر، وعلى جهاز كمبيوتر مكتبي أيضًا — بدون تثبيت تطبيق واتساب، يرجع wa.me إلى web.whatsapp.com، وهو يعمل طالما بقي النص المعبأ مسبقًا. قد تحتوي الرسائل المعبأة مسبقًا على سطر واحد فقط؛ حيث يتم اقتطاع النص الطويل جدًا على بعض الأجهزة.

الطريقة 2: إضافة ويدجيت المحادثة

إذا كنت تريد زرًا عائمًا مع استهداف الجهاز، والجدولة، أو عدة وكلاء دون كتابة CSS، فالإضافة هي الاختصار الصادق. جميع هذه الإضافات لها نسخ مجانية:

• Joinchat (Creame) — خفيفة ومركزة فقط على WhatsApp؛ خيار افتراضي قوي.
• Click to Chat (HoliThemes) — مجانية وبسيطة؛ رقم، موقع، وبعض الأنماط.
• Chaty (Premio) — تدعم العديد من القنوات، وليس WhatsApp فقط؛ مستوى مجاني بالإضافة إلى خطط مدفوعة.
• WP Chat App (NinjaTeam) — زر عائم بالإضافة إلى دعم عدة وكلاء ورسائل مُعبأة مسبقًا؛ مجانية ومدفوعة.
• Buttonizer — مشغل أزرار عام يمكنه استضافة زر WhatsApp الخاص بك إلى جانب أزرار أخرى.
• أزرار Elementor العائمة — ويدجيت أصلي في Elementor Pro إذا كنت قد أنشأت موقعك بالفعل به.

قم بالتثبيت، أدخل رقمك بالصيغة الدولية، اختر الموقع واللون، وتم الأمر. الطبقات المدفوعة تضيف الاستهداف حسب الجهاز والصفحة، جدولة الدردشة، وتحليلات النقرات. لا يمكن لأي من هذه الإضافات إرسال الرسائل من موقعك — هذا ليس الغرض منها، وليس خطأ؛ إنها الحدود بين الويدجيت وواجهة برمجة التطبيقات.

الطريقة 3: Elementor أو كتلة Gutenberg

إذا كنت تستخدم Elementor Pro، فإن عنصر واجهة الأزرار العائمة يضع زر WhatsApp بشكل أصلي، دون الحاجة إلى أي ملحق إضافي. في Gutenberg العادي، كتلة الزر مع رابط wa.me تقوم بنفس الوظيفة — قم بإقرانها مع CSS العائم من الطريقة 1 إذا كنت تريد أن يكون ثابتًا. شيفرة قصيرة أو نمط كتلة في قالبك functions.php هو نفس الرابط أدناه؛ السؤال الوحيد هو أين تريد الحفاظ عليه.

أين تتوقف أزرار الدردشة عن العمل

زر الدردشة يعمل باتجاه واحد فقط. لا يمكنه إرسال تأكيد للطلب عند إتمام العميل الشراء، أو تذكير قبل موعد محدد، أو رسالة استعادة للسلة بعد ساعتين من تركها — لأنه لا يتم إرسال أي شيء من موقعك. لا يوجد تعامل مع نافذة الخدمة البالغة 24 ساعة من ميتا، ولا موافقة على القوالب، ولا صندوق وارد مشترك: كل استفسار يصل إلى الهاتف الوحيد الذي رقمه موجود في الرابط، لذا يعني رد وكيل ثانٍ استخدام رقم ثانٍ.

هذه هي وظيفة واجهة برمجة تطبيقات واتساب للأعمال. يجب أن تستخدم الرسائل التي يبدأها النشاط التجاري خارج نافذة 24 ساعة قوالب معتمدة من ميتا (فئات التسويق، أو الفائدة، أو المصادقة)، وتقوم الواجهة البرمجية بإرسالها من منصة مثل The Tech Pad، التي تدفع بشكل تلقائي إدخالات النماذج والحجوزات والطلبات إلى واتساب باستخدام موصلات ووردبريس المجانية الخاصة بها بينما يرد فريقك من صندوق وارد مشترك واحد على [/features/inbox/](/features/inbox/). لا يوجد رسوم اشتراك شهرية للخدمة الوصلة؛ أنت تدفع رسوم المحادثة لكل رسالة وفقاً لشركة ميتا — حوالي ₹0.10–0.30 للرسائل الخدمية في الهند، بينما التسويق يكون حوالي 2–3 أضعاف ذلك — لذا تحقق من قائمة أسعار ميتا الحالية. إذا كنت تقرر بين الزر وواجهة برمجة التطبيقات، فإن [هذا المقارنة](/blog/whatsapp-business-app-vs-api-2026/) توضح الحد الفاصل.

خطوة بخطوة: أضف ونسق واختبر الزر الخاص بك

1. اكتب رقمك بالصيغة الدولية بدون + أو مسافات — على سبيل المثال 919876543210 للهند.
2. قم ببناء واختبار الرابط الخام على هاتفك أولاً: https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question. يجب أن يفتح WhatsApp مع الرسالة المعبأة مسبقًا.
3. أضف الزر حيث ينظر الزوار: كتلة زر بالقرب من العنوان الرئيسي، عنصر قائمة التنقل، و/أو ودجة التذييل.
4. لإصدار ثابت، الصق HTML العائم في ودجة HTML مخصصة وCSS في CSS إضافية، ثم تحقق منه على واجهة الهاتف المحمول.
5. إذا اخترت إضافة بدلاً من ذلك، قم بتثبيتها، أدخل نفس الرقم، اختر الموقع والألوان، واحفظ.
6. تتبع النقرات في GA4: أعطِ الرابط معرفًا (على سبيل المثال id="wa-float") وأضف مستمع حدث صغير، أو استخدم تحليلات الإضافة المدمجة الخاصة بك.

document.getElementById('wa-float').addEventListener('click', function () {
  gtag('event', 'whatsapp_click');
});

1. اختبر الصفحة المنشورة على هاتف حقيقي وعلى سطح المكتب، وتأكد من وصول النص المملوء مسبقًا بوضوح — لا %20 ظاهر في مربع الدردشة.

الرسائل المملوءة مسبقًا للإرسال بعد النقر

الرابط wa.me text المعامل يملأ الرسالة الأولى للزائر مسبقًا. المتابعات التي ترسلها لاحقًا — مثل الإقرارات، والمتابعات الخاصة بالاقتباسات — تعمل كنماذج عبر واجهة برمجة التطبيقات، باستخدام {{1}}, {{2}} متغيرات النمط بحيث يناسب قالب واحد معتمد كل عميل.

مرحبًا {{1}}، شكرًا لتواصلك معنا عبر واتساب. استفسارك حول {{2}} في فريقنا — توقع الرد خلال ساعة عمل واحدة.

مرحبًا {{1}}، هذا هو العرض الذي ناقشناه لـ {{2}}. هل ستساعدك مكالمة قصيرة هذا الأسبوع في اتخاذ القرار؟

الأسئلة الشائعة

هل أحتاج إلى إضافة لإضافة زر واتساب إلى ووردبريس؟ لا. رابط wa.me العادي يعمل في أي مكان يقبل ووردبريس فيه رابطًا — سواء كان كتلة زر، عنصر قائمة، ويدجت، أو قالب قالب. الإضافة تكون مفيدة فقط عندما تريد زرًا عائمًا مع استهداف الجهاز، جدولة أو عدة وكلاء دون الحاجة إلى التلاعب بالكود.

هل زر الدردشة على واتساب مجاني؟ نعم. روابط النقر للدردشة مجانية وغير محدودة لأن المحادثة تتم في تطبيق واتساب الخاص بالعميل نفسه، وإصدارات الإضافة المجانية تغطي الأساسيات. أنت تدفع فقط رسوم كل رسالة من ميتا عندما تبدأ في إرسال الرسائل التي تبدأها الشركة من خلال واجهة واتساب للأعمال.

هل سيؤدي زر النقر للدردشة إلى حظر رقمي؟ لا — العميل هو من يبدأ الدردشة، وهذا بالضبط هو السلوك الذي تريده شركة ميتا. الحظر يحدث نتيجة الإرسال العشوائي غير المرغوب فيه، والذي يُرسَل عادةً عبر أدوات غير رسمية. الزر الذي يدعو الأشخاص لمراسلتك هو واحدة من أكثر الطرق أمانًا لبناء جمهور تم الاشتراك فيه.

ما الفرق بين زر الدردشة وواجهة برمجة تطبيقات واتساب للأعمال؟ زر الدردشة يفتح محادثة؛ لا يمكنه إرسال أي شيء بمفرده. ترسل واجهة برمجة التطبيقات رسائل تلقائية — تأكيدات الطلبات، تذكيرات الحجز، استعادة السلة — إلى العديد من العملاء دفعة واحدة باستخدام قوالب معتمدة، وتمنح فريقك بأكمله صندوق وارد مشترك للردود.

الدعوة النهائية للإجراء

زر الدردشة يجعل الزوار يتحدثون؛ يحافظ API على استمرارية المحادثة دون الحاجة لنسخ ولصق أي شيء. يعمل The Tech Pad على واجهة WhatsApp Cloud API الرسمية ويمنحك صندوق بريد مشترك للفريق، مساعد AI، مركز القوالب، الحملات، والتحليلات — بالإضافة إلى 26 موصلات WordPress مجانية (القائمة الكاملة على [/plugins/](/plugins/)، والأسعار على [/pricing](/pricing)). شهرُك الأول مجاني عند البدء، وكل عمل تجاري تحيله ويسجل ويقوم بربط رقم WhatsApp يمنحك شهرًا مجانيًا واحدًا — حتى 5 أشهر مجانية إضافية — أي ما مجموعه 6 أشهر مجانية. قم بإعداد الزر الخاص بك اليوم، وأضف طبقة API يوم يصبح إشعار الطلب الأول مهمة يدوية — ابدأ من [/wa/](/wa/).