Skip to content
Pushwoosh Logo Developer Documentation

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

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!

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