# কীভাবে একটি কাস্টম সাবস্ক্রিপশন উইজেট তৈরি করবেন

## একটি সাবস্ক্রিপশন উইজেট তৈরি করা

যদি ডিফল্ট উইজেটটি আপনার লক্ষ্য এবং পছন্দের সাথে না মেলে, তাহলে আপনি নিচে বর্ণিত ধাপগুলো অনুসরণ করে আপনার কাস্টম সাবস্ক্রিপশন উইজেট তৈরি করতে পারেন।

১. আপনার প্রজেক্টে সাবস্ক্রাইব করার জন্য প্রম্পট সহ একটি লুকানো `<div>` যোগ করুন।

```txt
<div class="push-notification-widget push-notification-widget_hidden" id="push-notification-widget">
  <div class="push-notification-widget__title">
    Don't miss anything important — subscribe to push notifications!
  </div>
  <div class="push-notification-widget__control">
    <button class="push-notification-widget__button" type="button" onClick="Pushwoosh.subscribe()">
      Subscribe
    </button>
  </div>
  <div class="push-notification-widget__success">
    You're subscribed
  </div>
</div>
```

২. এর স্টাইলগুলো নির্দিষ্ট করুন।

```txt
<style>
  .push-notification-widget_hidden {
    display: none;
  }

  .push-notification-widget__success {
    display: none;
  }

  .push-notification-widget_subscribed .push-notification-widget__title {
    display: none;
  }

  .push-notification-widget_subscribed .push-notification-widget__control {
    display: none;
  }

  .push-notification-widget_subscribed .push-notification-widget__success {
    display: block;
  }
</style>
```

৩. Pushwoosh WebSDK ইনিশিয়ালাইজ হয়ে গেলে, একজন ব্যবহারকারী ইতিমধ্যে সাবস্ক্রাইব করেছেন কিনা বা অনুমতির অনুরোধ ব্লক করেছেন কিনা তা পরীক্ষা করুন। যদি না করে থাকেন, তাহলে উইজেটটি প্রদর্শন করুন।

<Aside type="caution">
নিশ্চিত করুন যে WebSDK সম্পূর্ণরূপে ইনিশিয়ালাইজ হওয়ার পরেই উইজেটটি প্রদর্শন করা হচ্ছে। অন্যথায়, উইজেটটি সঠিকভাবে কাজ করবে না।
</Aside>

```txt
<script>
  var $subscriptionWidget = document.getElementById('push-notification-widget');
  var Pushwoosh = Pushwoosh || [];
  // show a success message if a device subscribes to push notifications
  Pushwoosh.push(['onSubscribe', () => {
    $subscriptionWidget.classList.add('push-notification-widget_subscribed');
  }]);
  Pushwoosh.push(() => {
    /* now WebSDK is ready and you can use public methods. */
    // create an array for Promise.all
    var actions = [];
    // check device's permission on push notifications
    var permission = Pushwoosh.driver.getPermission();
    // check whether a device is registered in Pushwoosh and can receive push notifications
    var isSubscribed = Pushwoosh.isSubscribed();
    actions.push(permission);
    actions.push(isSubscribed);
    // wait for all actions resolved
    Promise.all(actions)
      .then((result) => {
        var permission = result[0];
        var isSubscribed = result[1];
        // if push notifications are not blocked on a device (can show native permission prompt)
        // and if the device is not subscribed to push notifications (including manual unsubscribe)
        // show notification widget
        if (permission !== 'denied' && !isSubscribed) {
          $subscriptionWidget.classList.remove('push-notification-widget_hidden');
        }
      });
  });
</script>
```