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

كيفية إنشاء زر واتساب عائم لموقعك

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

خطوات استخدام المولد

1. اكتب رقم واتساب بصيغة دولية دون علامة +.
2. أضف رسالة افتتاحية قصيرة وواضحة.
3. اكتب نصًا بجانب الأيقونة أو اترك الحقل فارغًا لأيقونة فقط.
4. اختر مكان الزر ولونه وحجمه والمسافات المناسبة.
5. حدد ما إذا كان سيظهر على الهاتف أو الكمبيوتر أو كليهما.
6. راجع المعاينة، ثم اضغط «توليد الكود».
7. انسخ الكود كاملًا وألصقه قبل وسم </body>.

ما الذي يمكنك تخصيصه؟

طريقة تركيب الكود

موقع HTML ثابت

افتح ملف الصفحة، ثم ألصق الكود الناتج قبل وسم الإغلاق </body> مباشرة واحفظ الملف.

<!-- محتوى الصفحة -->

<!-- ألصق كود الزر هنا -->
</body>
</html>

WordPress

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

Blogger وصفحات الهبوط

أضف الكود في قالب المدونة قبل </body> أو داخل قسم HTML مخصص إذا كانت المنصة تسمح بذلك.

فهم الكود الناتج

أين يفضل وضع الزر؟

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

حدود الأداة

• الأداة تولد كود HTML وCSS فقط ولا تعدل موقعك تلقائيًا.
• لا تتحقق من أن الرقم نشط أو مسجل في واتساب.
• لا تضمن توافق الكود مع كل قالب أو منشئ صفحات.
• قد تحتاج إلى تعديل قيمة z-index عند وجود عناصر عائمة أخرى.
• نجاح المعاينة لا يغني عن الاختبار داخل الموقع الحقيقي.

أخطاء شائعة وحلولها

الزر لا يظهر

تأكد من لصق الكود كاملًا، وأن خيار الظهور على جهازك مفعل، وأنه لا توجد قاعدة CSS أخرى تخفي العنصر.

الزر يظهر خلف عنصر آخر

ارفع قيمة z-index في الكود الناتج بعد التأكد من عدم تغطيته لقوائم أو نوافذ مهمة.

الزر يغطي محتوى الهاتف

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

الرابط يفتح رقمًا خاطئًا

راجع الرقم بصيغة دولية دون + أو مسافات، ثم ولّد الكود من جديد.

النص لا يظهر بجانب الأيقونة

تأكد من تعبئة حقل النص ثم توليد الكود مجددًا. عند ترك الحقل فارغًا يظهر الزر كأيقونة دائرية فقط.

نصائح للأداء وتجربة المستخدم

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

الخصوصية والاستخدام المسؤول

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

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