How to Collect Web Push Subscribers Using Button or Link Click?

Push notifications are the best way to repeat users and re-engage your subscribers. The standard way to collect subscribers to send web push notifications is to show the opt-in on the website. You can also optimize your push subscriber rate using different strategies. Using the explicit opt-in user can decide to click on Allow or Block to enable web push notifications for your site. Now, what if you wish to collect subscribers without using any opt-in on your website? Or what if you wish to emphasize any other CTA button or Link and collect subscribers using that? With PushEngage you can do so in 5 simple steps. You can collect subscribers using the Button or a Link. So, when a user comes and clicks on the Button/Link where the code is added he will get then get the opt-in and can subscribe to the push notifications.

Steps to Enable subscription on Button click or Link –

• Navigate to Settings > Installation Settings. select HTTP or HTTPS tab depending on your website and copy the Async version of code mentioned in the PushEngage Dashboard –
• Copy the second line of the code(async version) and add it to the header section of your website

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>

Note – Copy the code from your dashboard correctly as the code is unique for each site.

• Then add the code mentioned below right after the installation code –

<script> window._peq = window._peq || [];</script>

The code should look like this –

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];</script>

• Add the onclick event code on the Subscribe button/ URL.

To collect subscribers on link –

<button onclick="subscribeOnButton()">Subscribe</button>

To collect subscribers on link –

<a onclick="subscribeOnButton();" href="javascript:void(0)">Subscribe</a>

• Add the Javascript function mentioned below. It should defined at the bottom of the page

If you want only subscription on button click

<script>
function subscribeOnButton() {
window._peq.push(['subscribe']);
}
</script>

If you want to collect subscription with callback 

function subscribeOnButton(){
window._peq.push(['subscribe',{}.pe,function(res){
if(res.statuscode==1)
{
// Code to return response
console.log(res);
}
}]);
}

If you want to collect subscription on button and segment those subscribers

function subscribeOnButton(){
window._peq.push(['subscribe','segment_name',function(res){
if(res.statuscode==1)
{
// Code to return response
console.log(res);
}
}]);
}

That would be it and you can start collecting subscribers on button click and link.