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

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

يؤدي تعيين inboxWidget.enable: true إلى تسجيل جهاز الزائر لتسليم رسائل صندوق الوارد حتى لو لم يمنح الزائر إذن إشعارات الدفع، لذلك يمكنه الوصول إلى الزوار الذين لم يشتركوا أبدًا في إشعارات الدفع.

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

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

دمج الويدجت

عند تهيئة 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، لذلك يحتاج إلى تحديد واضح للفئة (class) أو المعرّف (id) أو العنصر.

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

تخصيص النصوص

لتخصيص نص الويدجت، أضف المعلمتين 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,            // نصف قطر إطار الويدجت (px)
    widgetWidth: 350,           // عرض الويدجت (px)
    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 للأيقونة
  }
}]);

تخصيص تخطيطات الخلايا

يعرض الويدجت الرسالة كواحد من أربعة تخطيطات للخلايا — classic، banner، captioned، أو carousel — وهي نفس التخطيطات التي تظهر في معاينة الحملة في لوحة التحكم. التخطيط الذي لا يمكن عرضه بما تحمله الرسالة يتحول إلى classic: يتطلب banner صورة رئيسية، ويتطلب captioned صورة رئيسية بالإضافة إلى عنوان ونص، ويتطلب carousel شريحة واحدة على الأقل بالإضافة إلى عنوان ونص.

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

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    unreadDotColor: '#ff4c00',    // نقطة غير مقروءة على الصورة الرمزية الكلاسيكية
    avatarBgColor: '#e6e6e6',     // خلفية الصورة الرمزية الكلاسيكية
    avatarTextColor: '#333333',   // لون الحرف الأول في الصورة الرمزية الكلاسيكية
    avatarSize: 52,               // حجم الصورة الرمزية الكلاسيكية (px)
    mediaRadius: 8,               // نصف قطر زاوية وسائط banner/captioned/carousel (px)
    slideCaptionColor: '#ffffff', // لون نص تعليق شريحة carousel
    slideScrimColor: '#000000',  // خلفية تعتيم تعليق شريحة carousel
    pagerDotActiveColor: '#ff4c00', // نقطة الصفحة النشطة في carousel
    pagerDotColor: '#c4c4c4'      // نقاط الصفحة غير النشطة في carousel
  }
}]);

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

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

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

فتح الويدجت يقوم بتحديثه من الخادم، مرة واحدة كل 30 ثانية على الأكثر — رسالة صندوق الوارد للتطبيق المستقلة تستخدم قناة بدون إشعارات دفع، لذلك لا يوجد شيء آخر يعلن عن وصول رسالة جديدة بين عمليات تحميل الصفحة.