# ปุ่มสมัครสมาชิก Push

เพิ่มผู้สมัครรับข้อมูล push และปรับปรุงประสบการณ์ผู้ใช้ให้ดียิ่งขึ้น! ตั้งค่าปุ่มสมัครสมาชิกที่กำหนดเองบนเว็บไซต์ของคุณเพื่อเพิ่มอัตราการเลือกรับ แทนที่จะแสดงกล่องโต้ตอบมาตรฐานให้ผู้เยี่ยมชมใหม่โดยอัตโนมัติ ให้คุณอธิบายคุณค่าของข้อความของคุณและกระตุ้นให้สมัครรับการแจ้งเตือนแบบ push เมื่อผู้ใช้พึงพอใจ\
ใน **สอง** ขั้นตอนง่ายๆ คุณก็จะมีปุ่มสมัครสมาชิก push ที่กำหนดเองพร้อมใช้งาน!

## 1. ใช้งานปุ่มสมัครสมาชิก Web SDK

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

ตรวจสอบให้แน่ใจว่าคุณได้ใช้งาน Pushwoosh Web SDK บนเว็บไซต์ของคุณแล้ว หากต้องการดำเนินการ โปรดปฏิบัติตาม [คู่มือ](/th/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: 'You are successfully subscribed!',
      needSubscribe: 'Get notifications about important news!',
      blockSubscribe: 'Click to see how to get notifications',
      alreadySubscribed: 'You are already subscribed'
    }
    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>