تضمين شامل بسطر واحد
زر WhatsApp لـ HTML & Custom Websites
يمكنك إضافة زر WhatsApp عائم إلى موقعك على HTML & Custom Websites. واختيار رسالة ترحيب ليتمكن الزوار من مراسلة رقم نشاطك التجاري.
إعداد في 1 دقيقة الموضع: index.html (before </body>) or root layout component
التثبيت خطوة بخطوة على HTML & Custom Websites
هذه هي الخطوات لإضافة رمز تثبيت WAButton إلى موقعك على HTML & Custom Websites.
- 1
نسخ مقتطف التضمين
يُنسخ مقتطف السكربت الخاص بك من لوحة تحكم أداة WAButton أو من شاشة البدء.
نصيحة: يجب الإبقاء على الخاصية «async» مفعّلة ليُحمَّل السكربت في المتصفح بشكل غير متزامن لا يعيق الصفحة.
- 2
اللصق قبل الوسم الختامي </body>
يُلصق الرمز مباشرة قبل </body> في ملف HTML الجذري أو في مكوّن التخطيط الجذري. مثال على الملف الجذري: index.html. وأمثلة على مكوّن التخطيط: layout.tsx أو App.vue أو base.blade.php.
نصيحة: وضع السكربت مباشرة قبل </body> يتيح تحميل محتوى صفحتك أولًا.
<script src="https://widget.wabutton.app/v1.js" data-widget-id="YOUR_WIDGET_ID" async></script> - 3
الفتح في المتصفح
يُحفظ الملف ويُحدَّث المتصفح. سيظهر زر WhatsApp العائم فورًا في الزاوية السفلية.
لماذا يختار أصحاب المتاجر والوكالات WAButton لـ HTML & Custom Websites
وسم سكربت واحد شامل
مُحمِّل غير متزامن واحد صغير جدًا يعمل بالطريقة نفسها في صفحات HTML الثابتة وأطر SSR و SPA.
أنماط محصورة
كل نمط محصور في أسماء أصناف تبدأ بالبادئة «wabutton-»، فلا يغيّر تنسيق أصناف Tailwind أو Bootstrap أو CSS المخصصة لديك.
سكربت مكتفٍ بذاته
مبني باستخدام Preact ومضمّن داخل السكربت نفسه، فلا تحتاج صفحتك إلى jQuery ولا React ولا خطوط أيقونات.
يدرك التنقل في تطبيقات SPA
يحافظ تلقائيًا على حالة الأداة عبر انتقالات المسارات في المتصفح (React Router و Next.js و Vue Router).
الأسئلة الشائعة
هل يعمل WAButton مع تطبيقات الصفحة الواحدة (SPA) مثل React أو Next.js أو Vue؟
- نعم! يبدأ WAButton العمل على الكائن «window» ويبقى قائمًا عبر التنقل بموجّه المسارات في المتصفح دون الحاجة إلى إعادة التشغيل عند كل تغيير للمسار.
هل سيُبطئ WAButton نتيجة Google Lighthouse أو PageSpeed Insights لموقعي؟
- WAButton سكربت غير متزامن حجمه أقل من 40KB (بعد ضغط gzip) يُقدَّم من شبكة Cloudflare الطرفية، فلا يعيق العرض الأول للصفحة. ولا تُحمَّل لوحة الدردشة إلا عندما يفتحها الزائر. يعتمد التأثير على نتيجة موقعك على الموقع نفسه، لذا يُستحسن تشغيل PageSpeed Insights قبل الإضافة وبعدها.
أدوات مجانية ذات صلة
إنشاء روابط WhatsApp ورموز QR ورسائل لنشاطك التجاري.
المزيد من أدلة التثبيت
إضافة WhatsApp إلى موقعك الإلكتروني.
وسيلة تتيح للزوار السؤال عن منتجاتك أو أسعارك أو مواعيدك المتاحة. والرد يكون من WhatsApp المعتاد لديك.
خطة مجانية متاحة. دون بطاقة ائتمان.