# Push subscription button

Get more push subscribers and improve user experience! Set up a custom subscription button on your website to increase opt-in rate. Instead of automatically showing newcomers the standard dialog, explain the value of your messages and prompt to subscribe for push notifications when users are happy.\
In **two** easy steps, you'll have a custom push subscription button ready and working!

## 1. Implement Web SDK subscription button

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

Make sure you've implemented Pushwoosh Web SDK on your website. To do so, please follow our [guide](/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration).
</Aside>

To show the button on your website, please add the following code into initialization parameters of Pushwoosh Web SDK:

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

Make sure to disable the `autoSubscribe` when setting up the button!

<Aside type="note">
To make the button visible for visitors using Chrome and Mozilla, you need to specify the `fcm_sender_id` in `manifest.json` file; for Safari, specify `safariWebsitePushID`.
</Aside>

## 2. Customize the button

To make the button match your website's look and feel, customize its design! You can change such parameters as the bell's color, position, border, and shadow; moreover, it's possible to change the tooltip texts.

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

To maximize the push opt-in rates, make sure the benefits of subscribing are obvious to users. Change `needSubscribe` text so it would explain the value of your messages, and people will subscribe for notifications!
</Aside>