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!
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.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',
}
}
}]);
All done!
Last modified 1yr ago