شرح Webhooks للمبتدئين: كيف تربط النماذج بواتساب بدون كود

تاريخ النش ر: 15 فبراير 2026 | القراءة: 6 دقائق

ما هو الـ Webhook؟

تخيل أن لديك جرس باب في موقعك الإلكتروني. عندما يضغط عميل على "إرسال" في نموذج الاتصال، يُدق الجرس تلقائياً في تطبيق واتساب الخاص بك! هذا تماماً ما يفعله الـ Webhook.

التعريف البسيط: Webhook هو رابط خاص (URL) يستقبل بيانات تلقائياً عندما يحدث حدث معين (مثل: تعبئة نموذج، عملية شراء، إلخ).

كيف يعمل الـ Webhook؟

  1. الحدث: عميل يملأ نموذج "اطلب عرض سعر" على موقعك
  2. الإشعار: الموقع يُرسل البيانات إلى رابط Webhook
  3. المعالجة: نظام خلفي (مثل n8n) يستقبل البيانات
  4. الإجراء: يُرسل رسالة واتساب لك تلقائياً بتفاصيل الطلب

مثال مصري واقعي

مصنع ملابس في العاشر من رمضان لديه موقع للطلبات:

1. تاجر يملأ نموذج "طلب جملة"
2. الموقع يُرسل البيانات لـ Webhook (n8n)
3. n8n يُرسل رسالة WhatsApp لمدير المبيعات
4. n8n يحفظ الطلب في Google Sheets
5. n8n يُنشئ مهمة في Trello
كل ذلك في أقل من ثانيتين!

لماذا Webhooks أفضل من البريد الإلكتروني؟

البريد الإلكتروني Webhook + واتساب
قد يصل بعد دقائق فوري (ثواني) ✅
قد يذهب للـ Spam يصل 100% ✅
معدل فتح 20% معدل فتح 98% ✅
صعب الأتمتة أتمتة كاملة ✅

كيف تنشئ Webhook بدون برمجة؟

الخطوة 1: إنشاء حساب n8n

n8n هي منصة أتمتة مجانية (Self-Hosted أو €20/شهر Cloud)

  • اذهب إلى n8n.io
  • سجل حساب مجاني
  • أو ثبتها على Hostinger VPS الخاص بك

الخطوة 2: إنشاء Workflow

  1. اضغط "New Workflow"
  2. أضف "Webhook Node"
  3. اختر "GET" أو "POST"
  4. انسخ رابط الـ Webhook (مثل: https://your-n8n.com/webhook/abc123)

الخطوة 3: ربط الـ Webhook بالنموذج

في موقعك، أضف هذا الكود البسيط في نموذج HTML:

<form id="contactForm">
    <input type="text" name="name" placeholder="الاسم">
    <input type="tel" name="phone" placeholder="رقم الهاتف">
    <button type="submit">إرسال</button>
</form>

<script>
document.getElementById('contactForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = {
        name: e.target.name.value,
        phone: e.target.phone.value
    };
    
    await fetch('https://your-n8n.com/webhook/abc123', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    });
    
    alert('تم الإرسال!');
});
</script>

الخطوة 4: إضافة إجراءات (Actions)

في n8n، أضف Nodes بعد Webhook:

  • WhatsApp Node: لإرسال رسالة
  • Google Sheets Node: لحفظ البيانات
  • Email Node: لإشعار الفريق

أمثلة عملية

مثال 1: نموذج "اطلب استشارة"

Webhook → تنسيق الرسالة → WhatsApp → Google Sheets
النتيجة: تصلك رسالة واتساب فوراً + حفظ بيانات العميل

مثال 2: طلب منتج من متجر

Webhook → حساب المبلغ → إرسال فاتورة PDF → WhatsApp → إشعار للمخزن
النتيجة: النظام كامل يعمل تلقائياً

مثال 3: تتبع الطلبات

Webhook → التحقق من رقم الطلب → استعلام من Database → WhatsApp بحالة الطلب
النتيجة: العميل يعرف حالة طلبه فوراً

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

❓ هل Webhooks آمنة؟

نعم، إذا استخدمتها صح! استخدم HTTPS دائماً، ولا تنشر رابط Webhook علناً. قم بإضافة Secret Token للتحقق.

❓ كم تكلف Webhooks؟

مجانية! n8n مفتوح المصدر. ستدفع فقط لـ VPS (من $5/شهر) أو n8n Cloud (€20/شهر).

❓ هل يمكن استخدام Webhooks مع Shopify؟

بالتأكيد! Shopify يدعم Webhooks مدمجة. يمكنك ربطها بـ n8n لأتمتة المخزون والشحن.

❓ ماذا لو كان الموقع على WordPress؟

سهل جداً! استخدم إضافة Contact Form 7 أو WPForms، كلاهما يدعم Webhooks.

❓ كيف أختبر الـ Webhook قبل النشر؟

استخدم أداة API Tester الخاصة بنا! أرسل طلب POST تجريبي وتأكد من أن n8n يستقبله.

نصائح ذهبية

  • ✅ استخدم Try-Catch للتعامل مع الأخطاء
  • ✅ احتفظ بـ Logs لكل Webhook للتصحيح
  • ✅ ضع Rate Limiting لمنع الإساءة
  • ✅ اختبر الـ Webhook قبل النشر الحقيقي
  • ✅ استخدم Timeout معقول (5-10 ثواني)

هل تريد مساعدة في إعداد Webhooks لموقعك؟
تواصل معنا الآن