زر واتساب للموقع الإلكتروني: كود أو إضافة أو Widget

SendSeven Team, Editorial Team

إضافة زر واتساب إلى الموقع الإلكتروني: كود HTML للنسخ، ورابط wa.me الصحيح مع الحروف العربية، وطرق WordPress وShopify وWix، وسلوك الزر على الكمبيوتر، وحماية البيانات، والقياس، وما يحدث بعد النقر. مع عرض مباشر.

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

ما هو زر واتساب للموقع الإلكتروني؟

زر واتساب هو زر أو رابط على موقعكم يفتح مباشرة محادثة واتساب مع رقم شركتكم. تقنيًا تقف خلفه ميزة Click-to-Chat من واتساب: رابط على wa.me يحمل رقمكم، ونصًا يظهر جاهزًا في حقل الكتابة إن رغبتم. على الهاتف يفتح الرابط تطبيق واتساب، وعلى الكمبيوتر WhatsApp Web أو تطبيق سطح المكتب.

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

عرض مباشر

جرّبوا بأنفسكم: هذه الأزرار تفتح محادثة حقيقية

كل زر هنا هو رابط wa.me عادي يقود إلى فريق الدعم لدينا. على الهاتف يُفتح تطبيق واتساب، وعلى الكمبيوتر WhatsApp Web أو تطبيق سطح المكتب.

1. الكلاسيكي بأخضر واتساب

اسألوا عبر واتساب

يلفت النظر فورًا، فالجميع يعرف هذا اللون.

2. بلون علامتكم التجارية

ابدأوا الدردشة على واتساب

يحمل الزر لونكم، ويبقى شعار واتساب دون تغيير.

3. عائم في الزاوية السفلية

www.your-website.com

لديكم أسئلة؟ راسلونا

يبقى ظاهرًا أثناء التمرير، في كل صفحة.

4. رمز QR للكمبيوتر

تجلسون أمام الكمبيوتر؟ امسحوا الرمز بكاميرا هاتفكم، فتُفتح المحادثة مباشرة في تطبيق واتساب لديكم.

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

كيف أبني رابط wa.me بشكل صحيح؟

يتكوّن الرابط من https://wa.me/، ثم رقمكم الدولي الكامل من دون علامة الزائد ومن دون صفر في البداية ومن دون مسافات أو رموز خاصة، واختياريًا ?text= مع الرسالة المرمّزة بصيغة URL. هكذا يصفه واتساب في المساعدة الرسمية لـ Click-to-Chat.

يتحوّل الرقم +49 (0) 821 7898-8853 إلى 4982178988853: رمز الدولة 49، ويسقط الصفر من رمز المنطقة، وكذلك الأقواس والشرطات والمسافات. ويصبح الرابط الجاهز https://wa.me/4982178988853.

يجب أن تكون الرسالة المعبّأة مسبقًا مرمّزة بصيغة URL. تبقى الحروف اللاتينية والأرقام والواصلة والنقطة والشرطة السفلية والتيلدا كما هي، ويتحوّل كل ما عداها إلى رمز بنسبة مئوية. والحروف العربية بالذات يسهل الخطأ فيها، لأنها في UTF-8 تتكوّن من بايتين:

مثال من عرضنا المباشر: كلمة «لديّ» تصبح %D9%84%D8%AF%D9%8A%D9%91. وهكذا يبدو الرابط الكامل إلى فريق الدعم لدينا:

https://wa.me/4982178988853?text=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7%20SendSeven%D8%8C%20%D9%84%D8%AF%D9%8A%D9%91%20%D8%A3%D8%B3%D8%A6%D9%84%D8%A9%20%D8%A3%D8%AE%D8%B1%D9%89%20%D8%AD%D9%88%D9%84%20%D8%A3%D8%B2%D8%B1%D8%A7%D8%B1%20%D9%88%D8%A7%D8%AA%D8%B3%D8%A7%D8%A8%20%D9%84%D9%85%D9%88%D9%82%D8%B9%D9%8A.

أكثر الأخطاء شيوعًا: علامة زائد في بداية الرقم أو صفر بعد رمز الدولة (wa.me/+49… أو wa.me/490170…)، ومسافات غير مرمّزة، وعلامة & أو علامة # في النص تقطع بقية الرسالة. وإن غاب الرقم تمامًا، يفتح واتساب قائمة اختيار جهات الاتصال فقط. وإن كنتم لا تريدون ترميز أي شيء يدويًا، فإن مولّد روابط واتساب المجاني لدينا ينشئ الرابط مع رمز QR.

ما الطرق المتاحة لإضافة زر واتساب؟

هناك ثلاث طرق: رابط wa.me ككود HTML خاص بكم، أو إضافة جاهزة لنظام موقعكم، أو Widget للدردشة يربط واتساب بقنوات أخرى وبصندوق وارد واحد. الكود هو الأخف، والإضافة لا تتطلب معرفة بالبرمجة، ويستحق الـ Widget العناء متى صار أكثر من شخص يردّ.

لزر واحد في صفحة التواصل يكفي كود HTML. وتستحق الإضافة العناء إذا أردتم عرض الزر في كل الصفحات من دون معرفة بالبرمجة. أما الـ Widget فهو الطريق الصحيح حين يُراد أن تصل الطلبات من عدة قنوات إلى فريق واحد.

كيف يبدو كود HTML لزر واتساب؟

أبسط زر واتساب هو رابط HTML عادي إلى wa.me مع target="_blank" كي تبقى صفحتكم مفتوحة في المتصفح. في المثال يظهر رقم فريق الدعم لدينا. استبدلوه برقمكم وعدّلوا النص:

<a href="https://wa.me/4982178988853?text=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7%D8%8C%20%D9%84%D8%AF%D9%8A%D9%91%20%D8%B3%D8%A4%D8%A7%D9%84%20%D8%AD%D9%88%D9%84%20%D8%B9%D8%B1%D8%B6%D9%83%D9%85."
   target="_blank" rel="noopener">
  اسألوا عبر واتساب
</a>

للزر العائم الذي يظهر في الزاوية السفلية من كل صفحة تحتاجون إلى قليل من CSS. ويوضع الكود مرة واحدة قبل وسم </body> الختامي في قالبكم:

<a href="https://wa.me/4982178988853?text=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7%D8%8C%20%D9%84%D8%AF%D9%8A%D9%91%20%D8%B3%D8%A4%D8%A7%D9%84."
   class="wa-float" target="_blank" rel="noopener"
   aria-label="ابدأ الدردشة على واتساب">
  <img src="/images/whatsapp-icon.svg" alt="" width="28" height="28">
</a>

<style>
  .wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  }
</style>

ثلاثة تفاصيل تهمّ. أولًا aria-label: الزر الذي يعرض شعارًا فقط يحتاج إلى اسم لقارئات الشاشة. ثانيًا الحجم: 56 بكسل يسهل الضغط عليه على الهاتف، وما دون 44 بكسل يصبح ضيقًا. وهذا أيضًا الحد الأدنى الذي توصي به Apple وWCAG لمساحات اللمس. ثالثًا الأيقونة: نزّلوا شعار واتساب من موارد العلامة التجارية الرسمية لواتساب، ولا تعدّلوه، ولا حتى لونه، وضعوه على خادمكم الخاص. فالأيقونة المحمّلة من خادم خارجي ترسل عنوان IP لزوّاركم مع كل زيارة للصفحة.

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

في كل الأنظمة الشائعة المبدأ نفسه: الزر المفرد يدخل الصفحة ككتلة HTML، والزر العائم يوضع مرة واحدة في الـ footer قبل </body>. تختلف القوائم في تسميتها فقط.

WordPress

• زر داخل صفحة: في محرر الكتل أضيفوا كتلة «HTML مخصص» وانسخوا فيها كود الرابط.
• زر عائم في كل الصفحات: الأكثر أمانًا عبر إضافة لكود الـ header والـ footer مثل WPCode. تضعون الكود هناك في منطقة الـ footer. ومن يعدّل footer.php مباشرة في قالب كلاسيكي فعليه استخدام قالب فرعي (Child Theme)، وإلا اختفى الكود عند تحديث القالب التالي. أما القوالب القائمة على الكتل (Block Themes) فلا تحتوي على footer.php، وفيها يكون WPCode الطريق الأسهل.
• إضافات واتساب الجاهزة: يوجد منها الكثير في دليل الإضافات. تحققوا قبل التثبيت مما إذا كانت الإضافة تحمّل ملفات من خوادم خارجية، ومتى كان آخر تحديث لها، وهل تعمل بانسجام مع شريط الكوكيز لديكم.

Shopify

• زر عائم في المتجر كله: ضمن المتجر الإلكتروني (Online Store) > القوالب (Themes) انقروا في القالب الحالي على قائمة النقاط الثلاث ثم على «تعديل الكود». افتحوا الملف layout/theme.liquid وضعوا الكود مباشرة قبل </body>. وكرّروا القالب (Duplicate) قبل ذلك من القائمة نفسها.
• زر في صفحة أو في صفحة منتج: في قوالب Online Store 2.0 مثل Dawn أضيفوا في محرر القالب قسم «Liquid مخصص» وضعوا فيه كود الرابط.

Wix وWebflow

• Wix: للزر داخل صفحة استخدموا في المحرر عنصر تضمين كود HTML. يعرض Wix الكود المضمّن داخل إطار مستقل. لذلك فإن الزر العائم على الموقع كله مكانه «Settings > Development & integrations > Custom code». وهذا القسم لا يُستخدم إلا مع موقع منشور ونطاق مربوط، وبالتالي مع باقة Premium.
• Webflow: على مستوى الموقع كله تضعون الكود في إعدادات الموقع («Site settings») تحت «Custom code» في حقل «Footer code»، ويتطلب ذلك خطة موقع مدفوعة. وللزر المفرد تستخدمون عنصر «Code Embed».

إضافة Widget للدردشة مع واتساب

يُدمج أي Widget مثل Widget SendSeven بالطريقة نفسها: تضيفون مقتطف سكربت مرة واحدة قبل </body>. في WordPress يتم ذلك عبر الـ footer أو WPCode، وفي Shopify عبر theme.liquid، وفي Wix وWebflow عبر قسم الكود المخصص كما هو موضح أعلاه. وتشرح كل الإعدادات بالتفصيل إرشادات Widget الموقع لدينا.

ماذا يحدث إذا نقر أحدهم على الزر من الكمبيوتر؟

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

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

الحل هو رمز QR: يمسحه الزائر بهاتفه ويصل مباشرة إلى المحادثة في تطبيقه. في العرض المباشر أعلاه ترونه على الكمبيوتر كالشكل الرابع. وبـ HTML وحده تبنونه بقاعدة CSS تُظهر رمز QR على الشاشات الكبيرة فقط. أما Widget SendSeven فيتولى الانتقال بنفسه: حين ينقر أحدهم على واتساب من الكمبيوتر يعرض الـ Widget رمز QR ويقدّم WhatsApp Web طريقًا ثانيًا. وعلى الهاتف يُفتح التطبيق مباشرة. هذه الميزة مفعّلة في الـ Widgets الجديدة، أما الـ Widgets القائمة فتحتفظ بسلوكها السابق. وتسري أيضًا على Telegram وMessenger وInstagram وSMS. وأين تستخدمون رموز QR خارج الموقع تبيّنه مقالتنا عن ستة أماكن لرمز QR الخاص بواتساب.

هل زر واتساب على الموقع متوافق مع اللائحة العامة لحماية البيانات (GDPR)؟

نعم، يمكن دمج رابط wa.me مستضاف ذاتيًا بما يتوافق مع GDPR: فهو لا ينقل أي بيانات إلى واتساب عند تحميل صفحتكم، فالنقر وحده هو الذي يقود الزائر إلى هناك. أما الإضافات والـ Widgets التي تحمّل سكربتات أو خطوطًا أو أيقونات من خوادم خارجية، وسؤال أين تُعالَج المحادثة بعد ذلك، فتحتاج إلى نظرة أدقّ.

• قبل النقر: الزر المستضاف ذاتيًا بأيقونته الخاصة لا يحمّل شيئًا من أطراف ثالثة. أما الإضافات التي تجلب ملفات من خوادم خارجية فتنقل عندئذ عنوان IP، ولذلك يجب أن تدخل في مراجعتكم، وعند الاقتضاء في شريط الكوكيز.
• سياسة الخصوصية: تتضمن عادةً إشارة إلى واتساب كوسيلة تواصل وإلى البيانات التي تتلقونها في المحادثة. والأفضل توضيح الصياغة الدقيقة مع مسؤول حماية البيانات لديكم.
• بعد النقر: إذا جرت المحادثة عبر تطبيق WhatsApp Business على هاتف العمل، فيمكن للتطبيق الوصول إلى دفتر العناوين إذا منحتموه الإذن، وبالتالي إلى أرقام جهات اتصال لم توافق قط. أما عبر WhatsApp Business Platform ومزوّد لديه عقد معالجة بيانات (DPA) فيبقى دفتر العناوين خارج الصورة، ويعمل فريقكم في واجهة واحدة بأدوار وصلاحيات.

هذا القسم لا يغني عن الاستشارة القانونية. تفاصيل الموافقة ومدد التخزين واختيار المزوّد تجدونها في دليل WhatsApp Business وحماية البيانات.

كيف أقيس النقرات على زر واتساب؟

أسهل طريقة لقياس النقرات على الزر في Google Analytics 4 هي عبر Google Tag Manager: يستجيب مشغّل (Trigger) للروابط التي يحتوي عنوانها على wa.me ويرسل حدثًا مخصصًا. وفي الاتحاد الأوروبي يتطلب هذا القياس في الغالب موافقة عبر شريط الكوكيز، ولذلك لا تُطلَق العلامة (Tag) إلا بعد الموافقة.

1. فعّلوا في Tag Manager متغيرات النقر المدمجة، ومنها Click URL.
2. أنشئوا مشغّلًا من النوع «نقرة - الروابط فقط» يعمل حين يحتوي Click URL على wa.me.
3. اربطوه بعلامة حدث GA4، باسم whatsapp_click مثلًا، ومرّروا الصفحة كمعامل.
4. اربطوا العلامة بالموافقة الصادرة من شريط الكوكيز لديكم، كي لا تُطلَق من دون موافقة.

في Wix تدمجون Tag Manager عبر تكاملات التسويق، لا عبر الكود المخصص. ما يحدث بعد ذلك في المحادثة لا يراه Google Analytics. فواتساب لا يمرّر معاملات UTM ولا صفحة المصدر. وثمة حيلة بسيطة توضّح الصورة: امنحوا كل زر رسالته المعبّأة الخاصة، مثل «لديّ سؤال عن الأسعار» في صفحة الأسعار. عندها ترون في المحادثة من أين جاء الطلب. وفي Widget SendSeven تعرض إحصاءات الـ Widget إضافةً إلى ذلك النقرات لكل قناة، مثل عدد المرات التي اختار فيها الزوار واتساب، إلى جانب مرات الظهور والتفاعلات. وكيف تتتبعون محادثات واتساب حتى الإيرادات حين تدخل الإعلانات على الخط يوضحه دليل إعلانات Click-to-WhatsApp ورابط wa.me.

ماذا يحدث بعد النقر داخل شركتكم؟

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

صندوق وارد واحد لفريقكم

في صندوق الوارد المشترك للفريق من SendSeven تصل محادثات واتساب إلى جانب البريد الإلكتروني وSMS وInstagram وMessenger والدردشة المباشرة وTelegram. يوزّع فريقكم المحادثات، ويرى من يردّ الآن، ويكتب ملاحظات داخلية لا يراها العميل. وكيف يبدو ذلك في العمل اليومي تصفه مقالتنا عن WhatsApp Business مع عدة مستخدمين.

الرد في المساء وفي عطلة نهاية الأسبوع

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

Widget واحد لواتساب وقنوات أخرى

لا يرغب كل زائر في استخدام واتساب. في Widget SendSeven تحدّدون القنوات التي تظهر: واتساب وحده أو واتساب إلى جانب الدردشة المباشرة والبريد الإلكتروني وTelegram وقنوات أخرى. وإذا أوقفتم الدردشة المباشرة، يعرض الـ Widget الجديد القنوات كقائمة بشعاراتها. ومع الاختيار السريع المتاح لـ Widgets الفقاعة (Bubble) تفرد الفقاعة الدائرية القنوات عند النقر. ويصبح واتساب عندئذ على بُعد نقرتين. وللفقاعة 15 أيقونة للاختيار، منها شعار واتساب.

وإن كنتم تحتاجون أزرارًا مفردة فقط، لتدوينة أو صفحة هبوط أو توقيع البريد الإلكتروني، فستجدون في قسم Widgets تحت «الترويج» روابط جاهزة ورموز QR بصيغة PNG أو SVG، إضافةً إلى مقتطفات HTML لأزرار القنوات والشارات وتواقيع البريد الإلكتروني. وتحدّدون الرسالة المعبّأة هناك بأنفسكم. وهكذا تبنون زر واتساب بمقتطف جاهز من دون أن ترمّزوا الرابط بأنفسكم. وتجدون المزيد عن القناة في صفحتنا واتساب للشركات.

كم يكلّف زر واتساب؟

الزر نفسه لا يكلّف شيئًا: رابط wa.me مجاني، سواء استخدمتم تطبيق WhatsApp Business أو الـ API. تنشأ التكاليف فقط من الردود عبر WhatsApp Business Platform ومن البرنامج الذي يعمل به فريقكم.

• الرسائل الواردة مجانية دائمًا.
• إذا كتب العميل أولًا، تُفتح نافذة الـ24 ساعة لردودكم.
• منذ 1 أكتوبر 2026 تحتسب Meta رسوم رسائل الخدمة أيضًا، أي ردودكم داخل نافذة الـ24 ساعة. وتبقى أول 1000 رسالة لكل رقم هاتف وشهر مجانية، ومن الرسالة 1001 فصاعدًا تُطبَّق تعرفة Utility، وهي في ألمانيا 0,0456 € لكل رسالة مُسلَّمة. التفاصيل في نظرتنا العامة على أسعار واتساب 2026 وفي نظرة Meta العامة على الأسعار.
• مع تطبيق WhatsApp Business لا تنشأ تكاليف رسائل. في المقابل لا يردّ إلا من يستخدم الهاتف والأجهزة المرتبطة به.

في SendSeven تتضمّن باقة Basic بسعر 49 € شهريًا Widgets المواقع، وتتضمّن باقة Professional بسعر 79 € شهريًا وكلاء الذكاء الاصطناعي وFlow Builder. ويُحتسب استخدام الذكاء الاصطناعي عبر أرصدة الذكاء الاصطناعي. جميع الأسعار صافية دون ضريبة القيمة المضافة، وتجدون الملخص في صفحة الأسعار. يمكنكم تجربة SendSeven مجانًا لمدة 14 يومًا، مع 100 رسالة تجريبية ومن دون بطاقة ائتمان.

هل لديكم سؤال آخر عن الزر؟ استخدموا العرض المباشر أعلاه، فيصل سؤالكم مباشرة إلى فريق الدعم لدينا.

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