ويدجت صندوق الوارد للويب

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

المتطلبات الأساسية

لدمج صندوق الرسائل للمواقع الإلكترونية، يرجى اتباع الدليل.

دمج الويدجت

عند تهيئة Pushwoosh WebSDK، أضف المعلمة inboxWidget:

مثال

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);

المشغّل (Trigger)

لعرض الويدجت، يجب عليك تحديد عنصر مشغّل للويدجت. يمكن أن يكون أي عنصر DOM في الصفحة هو المشغّل. حدد معرّفه (ID) كـ “pwInbox” أو عيّن أي معرّف مخصص للمعلَمة triggerId عند تهيئة الـ SDK. عند تهيئة WebSDK، تظهر شارة الرسائل غير المقروءة على عنصر المشغّل. بمجرد النقر على عنصر المشغّل، يظهر الويدجت على الصفحة.

تحديد الموضع

بشكل افتراضي، يتم وضع الويدجت في الاتجاه المعاكس من حدود الشاشة الأقرب إلى عنصر المشغّل. يمكنك تعيين موضع الويدجت من خلال معلمات التكوين:

مثال

Pushwoosh.push(['init', {

  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    position: 'top'
  }
}]);

بشكل افتراضي، يجب وضع inboxWidget قبل وسم الإغلاق </body>. اعرض الويدجت في أي مكان على الصفحة كما هو موضح في المثال أدناه:

مثال

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

    enable: true,
    triggerId: 'pwInbox',
    appendTo: '.widget-parent-element-class'
  }
}]);

يتم البحث عن عنصر أبوي بواسطة querySelector، لذا فهو يحتاج إلى تحديد واضح للفئة أو المعرّف أو العنصر.

تخصيص الويدجت

تخصيص النصوص

لتخصيص نص الويدجت، أضف المعلمتين emptyInboxTitle و emptyInboxText:

مثال

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // عنوان الويدجت
    emptyInboxTitle: 'You\'re all caught up',       // عنوان ويدجت صندوق الوارد الفارغ
    emptyInboxText: 'There are no new messages. Stay tuned!'    // نص ويدجت صندوق الوارد الفارغ
  }
}]);

تبدو النتيجة كالتالي:

تخصيص المظهر

لتخصيص مظهر الويدجت، استخدم المعلمات التالية:

مثال

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // خلفية الويدجت
    borderColor: 'transparent', // لون حدود الويدجت
    borderRadius: 4,            // نصف قطر حدود الويدجت (بكسل)
    widgetWidth: 350,           // عرض الويدجت (بكسل)
    zIndex: 100                 // z-index
  }
}]);

يمكن تخصيص شارة عدد الرسائل غير المقروءة على النحو التالي:

مثال

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // لون الشارة
    badgeTextColor: '#ffffff'   // لون نص الشارة
  }
}]);

لتخصيص خصائص النص، أضف الكود التالي:

مثال

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // لون النص
    fontFamily: 'Helvetica, Arial, sans-serif', // الخط
    messageTitleColor: '#7a7a7a',               // لون عنوان الرسائل
    timeTextColor: '#c4c4c4',                   // لون نص الطابع الزمني
    emptyInboxTitleColor: '#333333',            // لون عنوان صندوق الوارد الفارغ
    emptyInboxTextColor: '#7a7a7a'              // لون نص صندوق الوارد الفارغ
  }
}]);

أخيرًا، يمكنك تحديد أيقونة صندوق الوارد الفارغ:

مثال

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // مسار URL للأيقونة
  }
}]);

واجهة برمجة التطبيقات (API)

لفتح أو إغلاق الويدجت، استخدم طريقة API التالية:

مثال

Pushwoosh.pwinboxWidget.toggle(open?: boolean);