انتقل إلى المحتوى
OmniChannels.ai
القائمة

أداة مجانية

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

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

مجانية · بلا تسجيل · داخل متصفحك

الرقم والرسالة

اكتبه كما تتصل به محليًا، أو ابدأ بـ + أو 00. لا مشكلة في المسافات والشرطات والأقواس.

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

إعدادات الزر

الموضع

تباين الأيقونة البيضاء مع هذا اللون 2.0:1، وهو أقل من 3:1 الموصى به للأيقونات. يبقى للزر اسم يقرؤه قارئ الشاشة، لكن الأخضر الأغمق أوضح.

تظهر بجانب الزر، ويستطيع الزائر إغلاقها لبقية زيارته. اتركها فارغة لإخفائها.

يقرؤها قارئ الشاشة وتظهر كتلميح عند تمرير المؤشر.

إظهار على

القيمة 0 تُظهره فورًا. مهلة قصيرة تمنع منافسته للدعوة الرئيسية في الصفحة.

معاينة مباشرة

كود التضمين الخاص بك

أدخل رقم واتساب صحيحًا لإكمال الكود.

<!-- WhatsApp chat button (generated with omnichannels.ai/tools/whatsapp-chat-button/) -->
<div id="ocwa" class="ocwa ocwa-l" hidden>
  <div id="ocwa-tip" class="ocwa-tip" dir="auto"><span>أهلًا بك 👋 كيف يمكننا مساعدتك؟</span><button type="button" class="ocwa-x" aria-label="إغلاق">&times;</button></div>
  <a class="ocwa-btn" href="https://wa.me/?text=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7%21%20%D9%84%D8%AF%D9%8A%20%D8%B3%D8%A4%D8%A7%D9%84%20%D8%B9%D9%86%20%D9%85%D9%88%D9%82%D8%B9%D9%83%D9%85%20%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A." target="_blank" rel="noopener" aria-label="تحدث معنا عبر واتساب" title="تحدث معنا عبر واتساب"><svg viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path fill="#ffffff" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></a>
</div>
<style>
.ocwa{position:fixed;bottom:20px;z-index:2147483000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,Arial,sans-serif}
.ocwa[hidden]{display:none}
.ocwa-r{right:20px}.ocwa-l{left:20px;align-items:flex-start}
.ocwa-btn{width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.24);transition:transform .2s ease}
.ocwa-btn:hover{transform:scale(1.07)}
.ocwa-btn:focus-visible{outline:3px solid #1a73e8;outline-offset:3px}
.ocwa-tip{position:relative;box-sizing:border-box;max-width:min(260px,calc(100vw - 40px));margin:0;padding-block:10px;padding-inline:14px 36px;background:#fff;color:#111b21;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);text-align:start;overflow-wrap:anywhere}
.ocwa-x{position:absolute;top:5px;inset-inline-end:5px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:#54656f;font-size:20px;line-height:26px;cursor:pointer}
.ocwa-x:hover{background:#f0f2f5}.ocwa-x:focus-visible{outline:2px solid #1a73e8}
.ocwa-in{animation:ocwa-in .35s ease-out both}
@keyframes ocwa-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ocwa-in{animation:none}.ocwa-btn{transition:none}.ocwa-btn:hover{transform:none}}
@media (max-width:767px){.ocwa{bottom:16px}.ocwa-r{right:16px}.ocwa-l{left:16px}.ocwa-nomob{display:none!important}}
@media (min-width:768px){.ocwa-nodesk{display:none!important}}
@media print{.ocwa{display:none!important}}
</style>
<script>
(function(){var w=document.getElementById("ocwa");if(!w)return;var t=document.getElementById("ocwa-tip"),k="ocwa-tip-closed";if(t){var c=false;try{c=sessionStorage.getItem(k)==="1"}catch(e){}if(c){t.parentNode.removeChild(t)}else{t.querySelector("button").addEventListener("click",function(){t.parentNode.removeChild(t);try{sessionStorage.setItem(k,"1")}catch(e){}})}}setTimeout(function(){w.hidden=false;w.className+=" ocwa-in"},3000);})();
</script>

مستقل تمامًا: نحو 4 كيلوبايت، بلا سكربتات أو خطوط أو صور خارجية، وبلا ملفات تعريف ارتباط.

طريقة التثبيت

  1. 1انسخ الكود أعلاه.
  2. 2ثبّت إضافة لإدراج كود الرأس والتذييل مثل WPCode، أو افتح المظهر ← المحرر إذا كنت تستخدم قالب مكوّنات.
  3. 3الصق الكود في قسم التذييل (نهاية body)، أو في مكوّن HTML مخصص داخل جزء قالب التذييل.
  4. 4احفظ، وامسح ذاكرة التخزين المؤقت إن وُجدت، ثم جرّب على هاتفك.

هل تتكدس المحادثات على هاتف واحد؟ أجب عن هذه المحادثات مع فريقك من صندوق الوارد الموحّد

لا يُرسل أي شيء تكتبه هنا إلى خوادمنا.

الإجابة المختصرة

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

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

  1. 1

    أدخل رقمك ورسالتك

    اختر الدولة، واكتب رقم واتساب الخاص بك، واكتب الرسالة التي سيرسلها الزوار، مثل سؤال عن طلب.

  2. 2

    صمّم الزر

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

  3. 3

    انسخ الكود

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

  4. 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 ووجّه المحادثات إلى صندوق وارد موحّد للفريق، حيث يمكن لعدة موظفين وروبوتات دردشة الرد على الرقم نفسه.

مزيد من الأدوات المجانية