How to customize Web SDK push subscription bell button?

Question: How to customize the Web SDK push subscription bell button?

Answer: You can change the bell's color, position, size, border and shadow, replace the bell image, and edit the tooltip texts.

Important: the subscription button is shown only when automatic subscription is disabled. Set autoSubscribe: false together with subscribeWidget.enable: true, otherwise the SDK asks for the permission on page load and the widget is not rendered.

Pushwoosh.push(['init', {
  // ...
  autoSubscribe: false,
  subscribeWidget: {
    enable: true,
    position: 'bottomLeft', // '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://example.com/your-bell.png',
    contentImages: {
      chrome: 'https://example.com/chrome.png',
      mobileChrome: 'https://example.com/mobile-chrome.png',
      firefox: 'https://example.com/firefox.png',
      opera: 'https://example.com/opera.png',
      safari: 'https://example.com/safari.png',
      edge: 'https://example.com/edge.png'
    }
  }
}]);

buttonImage replaces the default bell icon; contentImages replaces the browser-specific illustrations shown in the "how to unblock notifications" dialog.

Full reference: Push subscription button.