دليل إضافة زر WhatsApp إلى الموقع (HTML وPHP وWordPress)

زر التواصل عبر WhatsApp حل عملي لتمكين زوارك من الوصول إليك فوراً. نشرح في هذا الدليل إضافة الزر إلى بنى مختلفة من HTML إلى WordPress مع أمثلة برمجية.

إضافة زر WhatsApp إلى موقع HTML أو PHP

إذا كان موقعك يعتمد مباشرة على HTML أو PHP فاتبع الخطوات التالية.

أنشئ رابط WhatsApp أساسياً

<a href="https://wa.me/905xxxxxxxxx" target="_blank">
  WhatsApp ile Bize Ulaşın
</a>

ملاحظة:905xxxxxxxxx يُستبدل برقمك مع رمز الدولة. استخدم «90» لتركيا دون علامة الجمع أو مسافات أو أقواس.

أضف زر WhatsApp ثابتاً مع أيقونة

<a href="https://wa.me/905xxxxxxxxx" target="_blank"
  style="position: fixed; bottom: 20px; right: 20px;
  background-color: #25D366; color: white; border-radius: 50px;
  padding: 12px 20px; text-decoration: none; font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
  📱 WhatsApp
</a>

يثبت المثال الزر أسفل يمين الشاشة. يمكنك تعديل اللون والمسافات والظل والموقع بما يناسب تصميمك.

ضع الكود في نهاية الصفحة

يمكن إضافة الكود إلى ملف footer.php أو مباشرة قبل وسم الإغلاق </body> . إضافته إلى footer مشترك تُظهر الزر في كل الصفحات.

إضافة زر WhatsApp إلى WordPress

يمكن لمستخدمي WordPress دمج WhatsApp بإضافة أو بكود يدوي.

الإضافة عبر ملحق

Click to Chat

• افتح لوحة WordPress.
• الإضافات ← أضف جديداً هو القسم المطلوب.
• ابحث عن «Click to Chat» وثبّته.
• فعّل الإضافة.
• اضبط رقم الهاتف وتصميم الزر في الإعدادات.

إضافات بديلة

• WP Social Chat — كان يُعرف باسم WhatsApp Chat
• Join.chat

إضافة الكود يدوياً إلى WordPress

<a href="https://wa.me/905xxxxxxxxx" target="_blank"
  style="position: fixed; bottom: 20px; right: 20px;
  background-color: #25D366; color: white; border-radius: 50px;
  padding: 12px 20px; text-decoration: none; font-weight: bold;">
  📞 Bize WhatsApp'tan Yazın
</a>

يمكن وضع الكود في ملف footer.php بالقالب أو لصقه في كتلة HTML مخصصة في Elementor أو Gutenberg.

قد يختفي الكود عند تحديث القالب إذا عُدّل الملف مباشرة. للاستخدام الدائم اختر قالباً ابناً أو أداة إدراج أكواد أو إضافة مناسبة.

إضافة زر WhatsApp إلى Shopify

• من لوحة Shopify افتح Online Store → Themes → Customize .
• افتح قسم الكود المخصص أو Custom Liquid في خيارات القالب.
• أضف كود الزر واحفظ.

إضافة زر WhatsApp إلى Wix

• في Wix Editor استخدم Add → Button .
• ضع https://wa.me/905xxxxxxxxx في رابط الزر.
• اختر فتح الرابط في تبويب جديد وافحص عرض الهاتف.

إضافة زر WhatsApp إلى Squarespace

Settings → Advanced → Code Injection يتيح إدراج HTML في footer. قد تحتاج باقتك في Squarespace إلى دعم حقن الأكواد.

تحديد رسالة WhatsApp مسبقاً

لإظهار رسالة جاهزة عند الضغط استخدم المعامل ?text= . يجب ترميز المسافات والأحرف التركية بما يلائم URL.

<a href="https://wa.me/905xxxxxxxxx?text=Merhaba,%20web%20sitenizden%20ulaşıyorum."
  target="_blank">
  WhatsApp ile İletişime Geç
</a>

افحص بعد إضافة الزر

• تحقق من الرقم ورمز الدولة.
• اختبر فتح WhatsApp Web على الحاسوب وتطبيق WhatsApp على الهاتف.
• تأكد من أن الزر لا يغطي القائمة أو إشعار ملفات الارتباط أو عناصر ثابتة أخرى.
• افحص التباين والنص الوصفي المتاح للرابط.
• قس النقرات عبر Google Analytics أو مدير الوسوم.

بعد الزر: مسار التواصل وجمع الطلبات

فتح WhatsApp لا يعني إرسال رسالة أو وصول طلب فعلي. قيّم أولاً صفحة الخدمة التي بدأ منها التواصل ثم توقيت رد الفريق وطريقته. اطلب المعلومات الضرورية فقط في الرسالة الأولى، ولا تنقل البيانات الشخصية إلى أحداث التحليل أو معاملات URL.

• النقرة: الضغط على روابط WhatsApp والهاتف والبريد تفاعلات منفصلة.
• تسليم الطلب: عند وجود نموذج، يجب تأكيد الإرسال الناجح برد الخادم أو النظام المستقبِل.
• الطلب الحقيقي: تُقيّم المحادثة التي يصل فيها الفريق إلى الشخص ويوضح نطاق الخدمة بشكل منفصل عبر سجلات العمل.

لتنظيم زر التواصل وصفحة الهاتف وخطوات الطلب معاً، اطلع على خدمتنا لتصميم المواقع وتجربة التواصل . ونتناول توجيه الزائر الإعلاني إلى الصفحة المناسبة في دليل Google Ads وصفحات الهبوط .

الخلاصة

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