في هذا الشرح التعليمي، سنشرح لكم ميزة جديدة طورناها، وهي ميزة كان الكثير منكم يطلبها: زر يفتح نافذة منبثقة تحتوي على نموذج واتساب على موقعك. سواء كنت تستخدم HTML عاديًا أو نظام إدارة محتوى مثل ووردبريس مع Elementor، سيوضح لك هذا الدليل كيفية إعداده خطوة بخطوة. هيا بنا!
شاهد هذا الفيديو: https://youtu.be/J7NE3SRZoRE
ما ستحصل عليه
بنهاية هذا الدليل، سيكون لديك زر على موقعك الإلكتروني، وعند النقر عليه، تفتح نافذة منبثقة تحتوي على نموذج واتساب قابل للتخصيص. تعمل هذه النافذة المنبثقة بواسطة أداة، وسنوضح لك كيفية تهيئتها لتناسب احتياجاتك، سواء كنت تريد لافتة، أو مؤقتًا تنازليًا، أو مجرد نموذج بسيط.
لقطة شاشة
الخطوة 1: إعداد الأداة كنافذة منبثقة
إنشاء أو الوصول إلى الأداة: ابدأ بإعداد الأداة التي ستستخدمها. قد تكون أداة واتساب موجودة مسبقًا أو أداة جديدة تُنشئها في لوحة التحكم.
تفعيل وضع النافذة المنبثقة: انتقل إلى قسم “التصميم” في إعدادات الأداة. ابحث عن خيار “نافذة الأداة المنبثقة” وقم بتفعيله. يُحوّل هذا الإعداد الأداة إلى نافذة منبثقة يمكن تشغيلها بضغطة زر.
تخصيص الأداة: أضف عناصر مثل لافتة (اختياري) أو نموذجًا. على سبيل المثال:
أضف لافتة للزوار الجدد أو العائدين لجذب الانتباه.
أضف نموذج واتساب ليملأه المستخدمون.
عدّل الإعدادات مثل الموقع (مثلًا، الجانب الأيمن من الصفحة) ومستوى الرؤية.
نصيحة: إذا كنت لا ترغب في اللافتة، يمكنك تعطيلها لاحقًا. سنتناول خيارات التخصيص لاحقًا.
لقطة شاشة
الخطوة ٢: أضف رمز الزر إلى موقعك الإلكتروني
احصل على رمز الزر: يعتمد الزر على شفرة HTML بسيطة تُفعّل نافذة الأداة. ستجد هذا الرمز في مقالتنا المرفقة (الرابط أدناه). يبدو كالتالي: html اتصل بنا
هذا رمز عام يعمل مع أي أداة على صفحتك – لا حاجة لأي تعديلات مخصصة!
أدخل الرمز:
لمواقع HTML: الصق الرمز في المكان الذي تريد ظهور الزر فيه (مثلاً، في الرأس، أو التذييل، أو في منتصف الصفحة).
لـ WordPress (Elementor): أضف كتلة HTML في Elementor، ثم الصق رمز الزر بداخلها.
شكل الزر: خصص مظهر الزر (اللون، الحجم، النص) باستخدام CSS أو أدوات التصميم في مُنشئ الصفحات.
لقطة شاشة
الخطوة 3: اختبار النافذة المنبثقة
التحقق من الوظيفة: حمّل صفحة الويب، وانقر على الزر، وتأكد من ظهور النافذة المنبثقة. يجب أن تعرض الأداة المُعدّة (مثل نموذج واتساب أو لافتة).
ضبط الإعدادات: إذا لم تعمل النافذة المنبثقة بالشكل المتوقع، فعدّل إعدادات الأداة:
عطّل اللافتة إذا لم تكن ضرورية (انتقل إلى إعدادات الأداة وأوقفها).
فعّل فتح النموذج مباشرةً (في إعدادات الأداة، فعّل ميزة “فتح أول وكيل باستخدام النموذج”).
أزل مؤقتات العد التنازلي أو الميزات الأخرى (من “التصميم” > “العد التنازلي”، عطّلها حسب الحاجة).
الخطوة 4: تخصيص النافذة المنبثقة (اختياري)
تتميز النافذة المنبثقة للأداة بمرونة عالية. إليك بعض الخيارات لاستكشافها:
اللافتات: استخدم قوالب جاهزة (مثل “الجمعة السوداء” أو “عيد الميلاد”) أو حمّل لافتاتك الخاصة. يمكن أن تكون اللافتات أفقية أو مربعة – اختر ما يناسب تصميمك.
سلوك النموذج: حدد ما إذا كان النموذج سيُفتح فورًا أم بعد تفاعل المستخدم مع النافذة المنبثقة.
تحديد الموضع: أبقِ الأداة مخفية (مثلاً، أيقونة صغيرة في الزاوية) أو اجعلها أكثر بروزًا.
الفتح التلقائي: هل تريد تحميل النافذة المنبثقة عند تحميل الصفحة؟ في إعدادات الأداة، فعّل خيار “فتح الأداة عند تحميل الصفحة” ضمن الخيارات المتقدمة.
الخطوة 5: حالات الاستخدام والأمثلة
أزرار متعددة: أضف رمز الزر في مواضع مختلفة (في الرأس، في منتصف الصفحة، في التذييل) لعرض نفس النافذة المنبثقة.
نموذج مُدمج + نافذة منبثقة: أدرج نموذج واتساب مباشرةً في الصفحة (عبر الرمز المختصر أو إعدادات الأداة) مع إبقاء زر النافذة المنبثقة منفصلاً. يمكن استخدامهما معًا!
أدوات ووردبريس: استخدم الزر كمُشغّل لأداة قياسية (ليست في وضع النافذة المنبثقة) لفتحها عند الطلب.
الخطوة 6: الاختبار عبر منصات متعددة
هذا الحل فعال عالميًا:
مواقع HTML: أضف الرمز مباشرةً.
ووردبريس، ويكس، شوبيفاي، إلخ: أدرج الرمز أينما تسمح منصتك بـ HTML مخصص.
الجوال: تأكد من أن الزر والنافذة المنبثقة يبدوان جيدًا على الشاشات الصغيرة – يجب أن يظل التمرير سلسًا.
أهمية هذا
على عكس الإضافات الشائعة مثل Contact Form 7، يمنحك هذا النهج:
نظام إدارة علاقات عملاء مدمج لتتبع العملاء المحتملين.
محرر قابل للتخصيص للنماذج والنوافذ المنبثقة.
مرونة في التصميم بدون إضافات إضافية.
خيارات غير محدودة للتجربة – بدون ترقيات للخطط أو تكاليف خفية.
سواء كنت تدير حملة إعلانية، أو تروّج لعرض، أو تجذب عملاء محتملين، يتيح لك هذا المزيج من الزر والنافذة المنبثقة وضع عبارات الحث على اتخاذ إجراء في المكان الذي تحتاجه بالضبط.
نصائح أخيرة
التجربة: اختبر إعدادات مختلفة (النافذة المنبثقة مقابل الزر مقابل الفتح التلقائي) لمعرفة ما يناسب جمهورك.
المصادر: اطلع على الكود الكامل وصفحة المثال في المقالة المرفقة أدناه.
الملاحظات: أخبرنا كيف يناسبك – نحن هنا لمساعدتك!