# วิธีสร้างวิดเจ็ตการสมัครรับข้อมูลแบบกำหนดเอง

## การสร้างวิดเจ็ตการสมัครรับข้อมูล

หากวิดเจ็ตเริ่มต้นไม่ตรงกับเป้าหมายและความต้องการของคุณ คุณสามารถสร้างวิดเจ็ตการสมัครรับข้อมูลแบบกำหนดเองได้โดยทำตามขั้นตอนที่อธิบายไว้ด้านล่าง

1. เพิ่ม `<div>` ที่ซ่อนอยู่ซึ่งมีข้อความแจ้งให้สมัครรับข้อมูลไปยังโปรเจกต์ของคุณ

```txt
<div class="push-notification-widget push-notification-widget_hidden" id="push-notification-widget">
  <div class="push-notification-widget__title">
    อย่าพลาดข้อมูลสำคัญ — สมัครรับการแจ้งเตือนแบบพุช!
  </div>
  <div class="push-notification-widget__control">
    <button class="push-notification-widget__button" type="button" onClick="Pushwoosh.subscribe()">
      สมัครรับข้อมูล
    </button>
  </div>
  <div class="push-notification-widget__success">
    คุณสมัครรับข้อมูลแล้ว
  </div>
</div>
```

2. กำหนดสไตล์ของวิดเจ็ต

```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>
```

3. เมื่อ 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>
```