Push Subscription Button

How to implement a Push Subscription Button on your website

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

Pushwoosh Web SDK

Make sure you've implemented Pushwoosh Web SDK on your website. To do so, please follow our guide.

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

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

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

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.

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.

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',
    }
  }
}]);

Best Practice

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!

All done!