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

إن دمج [صندوق رسائل الويب](/ar/developer/guides/message-inbox/web-message-inbox/) في موقعك الإلكتروني يزيد من التحويلات بشكل كبير. **ويدجت صندوق الوارد للويب** الجاهز للاستخدام مشترك بشكل افتراضي في جميع الطرق اللازمة للتواصل مع المستخدمين. ما عليك سوى دمج الويدجت في موقعك الإلكتروني وتخصيص مظهره ليتناسب مع علامتك التجارية.

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

لدمج صندوق الرسائل للمواقع الإلكترونية، يرجى اتباع [الدليل](/ar/developer/guides/message-inbox/web-message-inbox/).

## دمج الويدجت

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

```txt title="مثال"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);
```

### المشغّل (Trigger)

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

<img src="/web-push-notifications-web-inbox-widget-1.webp" alt=""/>

### تحديد الموضع

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

```txt title="مثال"
Pushwoosh.push(['init', {

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

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

```txt title="مثال"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

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

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

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

### تخصيص النصوص

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

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

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

<img src="/web-push-notifications-web-inbox-widget-2.webp" alt=""/>

### تخصيص المظهر

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

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

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

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

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

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

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

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

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

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

```txt title="مثال"
Pushwoosh.pwinboxWidget.toggle(open?: boolean);
```