---
title: "زر واتساب للموقع"
description: "أنشئ زر واتساب للموقع عائمًا: اختر اللون والموضع ورسالة الترحيب والتأخير، وعاين الزر مباشرة، وانسخ كودًا خفيفًا. مجانًا."
canonical: "https://omnichannels.ai/ar/tools/whatsapp-chat-button/"
language: "ar"
updated: "2026-10-10"
publisher: "BroadNet Technologies"
brand: "OmniChannels.ai"
---

# زر واتساب للموقع

Canonical: https://omnichannels.ai/ar/tools/whatsapp-chat-button/
Language: ar
Publisher: OmniChannels.ai by BroadNet Technologies

زر واتساب للموقع هو زر عائم صغير على صفحات الموقع يفتح محادثة واتساب مع النشاط التجاري عند النقر عليه. وهو رابط إلى https://wa.me/ مع رقم النشاط ورسالة جاهزة اختيارية، مصمّم كأيقونة في إحدى زوايا الصفحة. يبدأ الزوار المحادثة من هواتفهم أو من WhatsApp Web، دون نماذج أو حاجة إلى حفظ الرقم.

## كيفية إضافة زر واتساب إلى موقعك
1. **أدخل رقمك ورسالتك:** اختر الدولة، واكتب رقم واتساب الخاص بك، واكتب الرسالة التي سيرسلها الزوار، مثل سؤال عن طلب.
2. **صمّم الزر:** اختر الزاوية واللون وفقاعة الترحيب والأجهزة ومدة التأخير. تعرض المعاينة المباشرة الزر على صفحة نموذجية على سطح المكتب والجوال.
3. **انسخ الكود:** انسخ المقتطف. حجمه بضعة كيلوبايتات من HTML وCSS وJavaScript، دون طلبات خارجية أو ملفات تعريف ارتباط أو تتبّع.
4. **الصقه قبل </body>:** اتبع خطوات WordPress أو Shopify أو Wix أو HTML العادي، ثم انشر الموقع واختبر الزر على هاتف وكمبيوتر.

## ماذا يفعل الكود المُنشأ

يضيف المقتطف رابطًا واحدًا ثابت الموضع في الزاوية السفلية من صفحاتك. هذا الرابط هو رابط دردشة بنقرة واحدة قياسي بالصيغة التي يوثّقها واتساب في صفحة المساعدة (faq.whatsapp.com/5913398998672934): https://wa.me/ مع رقمك الدولي الكامل، و?text= مع رسالة مرمّزة للرابط إن أردت. يفتح تطبيق واتساب على الهواتف، وWhatsApp Web أو تطبيق سطح المكتب على أجهزة الكمبيوتر.
كل شيء مضمّن: رمز واتساب مسار SVG، والأنماط محصورة تحت بادئة فئة واحدة، والسكربت بضعة أسطر تتولى التأخير وفقاعة الترحيب القابلة للإغلاق. لا توجد سكربتات أو خطوط أو صور خارجية ولا ملفات تعريف ارتباط، لذلك لا يُبطئ الزر صفحتك ولا يضيف أداة تتبّع تابعة لطرف ثالث.

## سهل الوصول وجاهز للغات من اليمين إلى اليسار

غالبًا ما تكون الأزرار العائمة أيقونات فقط، ما يترك مستخدمي قارئات الشاشة في حيرة. يحمل الرابط المُنشأ وسم aria-label تتحكم فيه («تحدث معنا عبر واتساب» افتراضيًا)، وإطار تركيز مرئيًا لمستخدمي لوحة المفاتيح، وأيقونة زخرفية مخفية عن التقنيات المساعدة. ولفقاعة الترحيب زر إغلاق حقيقي بتسمية خاصة به.
الزوار الذين يضبطون أجهزتهم على تقليل الحركة يرون الزر دون حركة الانزلاق أو التكبير عند التمرير. وتستخدم فقاعة الترحيب اتجاه نص تلقائيًا وخصائص CSS منطقية، فيظهر النص العربي وغيره من النصوص من اليمين إلى اليسار بشكل صحيح، ويمكنك وضع الزر في الأسفل يسارًا للمواقع العربية.
- رابط يمكن الوصول إليه بلوحة المفاتيح مع اسم واضح للتقنيات المساعدة.
- يحترم إعداد prefers-reduced-motion.
- مخفي عند الطباعة، ويمكن إظهاره حسب نوع الجهاز.
- يُحفظ إغلاق فقاعة الترحيب طوال الزيارة، دون ملفات تعريف ارتباط.

## اختيار اللون والموضع والتوقيت

الأسفل يمينًا هو المتعارف عليه في المواقع ذات الاتجاه من اليسار إلى اليمين، والأسفل يسارًا يناسب غالبًا المواقع العربية، لكن تأكد أن الزر لا يغطي شريط ملفات تعريف الارتباط أو زر روبوت الدردشة أو شريط الدفع على الجوال. أخضر واتساب (#25D366) معروف فورًا؛ ومع أيقونة بيضاء يبلغ تباينه نحو 2:1، فإن كانت سهولة الوصول أولويتك، فإن أخضر أغمق مثل #128C7E يعطي نحو 4:1.
يتيح التأخير لبضع ثوانٍ للزوار قراءة الصفحة قبل ظهور الزر، ويُعد إظهاره على الجوال فقط خيارًا منطقيًا عندما يرد فريقك من الهواتف. واجعل رسالة الترحيب سطرًا واحدًا قصيرًا ومحددًا، مثل "لديك أسئلة عن التوصيل؟ راسلنا."

## زر Chat on WhatsApp الرسمي وقواعد العلامة التجارية

ينشر واتساب أيضًا زر "Chat on WhatsApp" بعلامته التجارية باللونين الأخضر والأبيض وبثلاثة أحجام، ويطلب من الشركات استخدامه دون تعديل. ووفقًا لمركز مساعدة واتساب، فهو متاح حاليًا بالإنجليزية فقط. أما زر الأيقونة العائم من هذه الأداة فهو نمط مختلف ومدمج؛ وأيًّا كان ما تستخدمه، لا تعدّل شعار واتساب نفسه ولا توحِ بأن واتساب يؤيد نشاطك التجاري.

## عندما لا يعود هاتف واحد كافيًا

قد يضاعف زر الموقع المحادثات الواردة بسرعة. على تطبيق WhatsApp Business، تبقى المحادثات على عدد محدود من الأجهزة المرتبطة. أما على منصة واتساب للأعمال (API)، فيمكن لرابط wa.me نفسه أن يغذّي صندوق وارد موحّدًا للفريق، حيث تُسند المحادثات إلى الموظفين، أو تجيب عنها روبوتات الدردشة أو وكلاء الذكاء الاصطناعي أولًا، وتُتابع بقوالب معتمدة بعد إغلاق نافذة خدمة العملاء البالغة 24 ساعة.
خطّط لمن يرد، وفي أي ساعات، وبأي سرعة. واذكر ساعات الرد في رسالة الترحيب إن لم تكن تغطي المحادثات على مدار الساعة.

## أسئلة حول زر واتساب للموقع

### كيف أضيف زر واتساب إلى موقعي؟

أنشئ الكود أعلاه برقمك ورسالتك، وانسخه، والصقه مباشرة قبل وسم الإغلاق </body> في موقعك، أو في منطقة كود التذييل في أداة بناء موقعك. سيظهر بعدها في كل الصفحات.

### هل أداة زر واتساب للموقع مجانية؟

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

### هل يُبطئ زر واتساب موقعي؟

لا. المقتطف بضعة كيلوبايتات من HTML وCSS وJavaScript المضمّنة، ولا يُجري أي طلبات شبكة حتى ينقر عليه الزائر، بخلاف الأدوات التي تحمّل سكربتات وخطوطًا وأدوات تتبّع خارجية.

### كيف أضيف زر واتساب في WordPress؟

استخدم إضافة لكود الترويسة والتذييل مثل WPCode والصق المقتطف في قسم التذييل، أو أضفه إلى كتلة Custom HTML في قالب التذييل إن كنت تستخدم قالبًا بالكتل. امسح ذاكرة التخزين المؤقت واختبر الزر.

### كيف أضيف زر واتساب إلى Shopify؟

في لوحة إدارة Shopify افتح Online Store ثم Themes ثم Edit code في القالب المنشور. افتح layout/theme.liquid والصق المقتطف مباشرة قبل </body>، ثم احفظ وتحقق من متجرك على الجوال.

### هل يمكنني إظهار زر واتساب على الجوال فقط؟

نعم. ألغِ تحديد Desktop في المولّد فيُخفى الزر على الشاشات التي يبلغ عرضها 768 بكسل فأكثر. ويمكنك أيضًا إلغاء تحديد Mobile لإظهاره على سطح المكتب فقط.

### هل يمكن لعدة موظفين الرد على محادثات زر الموقع؟

ليس بشكل جيد من هاتف واحد. اربط الرقم بواجهة WhatsApp Business API ووجّه المحادثات إلى صندوق وارد موحّد للفريق، حيث يمكن لعدة موظفين وروبوتات دردشة الرد على الرقم نفسه.