أداة صندوق الوارد للويب

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

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

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

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

دمج الأداة

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

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

المشغّل (Trigger)

لعرض الأداة، يجب عليك تحديد عنصر مشغّل (trigger element) للأداة. يمكن أن يكون أي عنصر 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,            // نصف قطر حواف الأداة (بالبكسل)
    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);