# زر الاشتراك في إشعارات Push

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

## 1. تطبيق زر اشتراك Web SDK

<Aside type="caution">
#### Pushwoosh Web SDK

تأكد من أنك قمت بتطبيق Pushwoosh Web SDK على موقعك الإلكتروني. للقيام بذلك، يرجى اتباع [دليلنا](/ar/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration).
</Aside>

لإظهار الزر على موقعك الإلكتروني، يرجى إضافة الكود التالي إلى معلمات التهيئة الخاصة بـ Pushwoosh Web SDK:

```javascript
Pushwoosh.push(['init', {
  //...
  autoSubscribe: false,
  subscribeWidget: {
    enable: true,
  }
}]);
```

تأكد من تعطيل `autoSubscribe` عند إعداد الزر!

<Aside type="note">
لجعل الزر مرئيًا للزوار الذين يستخدمون Chrome و Mozilla، تحتاج إلى تحديد `fcm_sender_id` في ملف `manifest.json`؛ ولمتصفح Safari، حدد `safariWebsitePushID`.
</Aside>

## 2. تخصيص الزر

لجعل الزر يتناسب مع مظهر موقعك الإلكتروني وتصميمه، قم بتخصيص تصميمه! يمكنك تغيير معلمات مثل لون الجرس، وموضعه، وحدوده، وظله؛ علاوة على ذلك، من الممكن تغيير نصوص تلميحات الأدوات (tooltip).

```javascript
Pushwoosh.push(['init', {
  //...
  subscribeWidget: {
    enable: true,
    position: 'bottomLeft', //possible values: ‘bottomLeft’, ‘bottomRight’, ‘topLeft’, ‘topRight’
    bgColor: '#12AE7E',
    bellColor: 'white',
    bellStrokeColor: '#08754f',
    bellButtonBorder: '1px solid #379676',
    shadow: '0px 0px 6px rgba(0, 0, 0, 0.75)',
    size: '48px',
    indent: '20px',
    zIndex: '999999',
    tooltipText: {
      successSubscribe: 'لقد اشتركت بنجاح!',
      needSubscribe: 'احصل على إشعارات حول الأخبار الهامة!',
      blockSubscribe: 'انقر لمعرفة كيفية الحصول على الإشعارات',
      alreadySubscribed: 'أنت مشترك بالفعل'
    }
    buttonImage: 'https://url-image.jpg',
    contentImages: {
      chrome: 'https://url-image.jpg',
      mobileChrome: 'https://url-image.jpg',
      firefox: 'https://url-image.jpg',
      opera: 'https://url-image.jpg',
      safari: 'https://url-image.jpg',
      edge: 'https://url-image.jpg',
    }
  }
}]);
```

<Aside type="tip">

لزيادة معدلات الاشتراك في Push إلى أقصى حد، تأكد من أن فوائد الاشتراك واضحة للمستخدمين. غيّر نص `needSubscribe` ليشرح قيمة رسائلك، وسيشترك الناس في الإشعارات!
</Aside>