Hi Guys, I’m Anand, the main developer & founder of Engagespot. One of the reasons why I built Engagespot is to help other developers implement web push notifications easier and without much complexities involved in the backend development.

In this article, I’ll explain how you can setup a user specific web push notification for your web application using Engagespot. This is a detailed explanation of the Quora answer written here.

What you need?

I’ll assume you have an Engagespot account and an API Key for your account

Add Engagespot Javascript SDK Code to Your Website

You need to add this code to all pages (or the one common head include file), where you want the web push notification prompt and the notification bell icon to appear.

<script>
window.Engagespot={},q=function(e){return function(){(window.engageq=window.engageq||[]).push({f:e,a:arguments})}},f=[“captureEvent”,”subscribe”,”init”,”showPrompt”,”identifyUser”,”clearUser”];for(k in f)Engagespot[f[k]]=q(f[k]);var s=document.createElement(“script”);s.type=”text/javascript”,
s.async=!0,s.src=”https://cdn.engagespot.co/EngagespotSDK.2.0.js”;var x=document.getElementsByTagName(“script”)[0];x.parentNode.insertBefore(s,x);
Engagespot.init(‘YOUR_SITE_KEY’);
</script>

Now that you have added the initialization script. All users who visits these pages will see the bell icon, and also the web push notification prompt if you have enabled off-site notifications during Engagespot setup.

Now, what we need to do is, we need to map this web push notification user to a real user account within your system. So that you can use your user’s id or email or some unique values to identify this web push notification subscriber.

For that, Just below the Engagespot.init() function, above the </script> add the following line.

(You need to add the below code only where the user lands after logging in). Because, that’s where you will have his unique id, right?

Engagespot.identifyUser(‘XYZ’);

Where as XYZ is the unqiue id of your user in your system. I recommend to use the numeric UID of your user. (String IDs are also fine).

If you’ve done this, then you have succesfully completed mapped your actual user with the web push subscription of this user’s browser.

Like this, if he logs in from different browsers, we will map all those browsers to your user’s id. (We do the mapping internally so that you don’t have to worry about that). So, whenever you send a push notification to user XYZ, he will get it in all his browsers from where he has logged in.

But don’t we have to Un-Map this user from a browser when he logs out? Otherwise, he will continue to receive all notifications in that browser. (What I mean, is the native browser push notifications).

That’s simple. Just add the following Javascript code on the logout confirmation page. So when he lands on that page, we will simply un-map him from this browser.

Engagespot.clearUser();

Whoa! You have completed the complex user-browser mapping with just two lines of code. Engagespot takes care of all the complexities associated with this mapping process.

Now let’s proceed to use Engagespot REST APIs to send a push notification to a specific user from your application backend programatically.

Using Engagespot REST API to send notification to a specific user

You can read our API Guide at https://engagespot.co/guides

Here, we need to use the campaigns API. You have to send a POST Request with JSON BODY to the campaigns API URL that is

https://api.engagespot.co/campaigns

You need to pass the notification title, message, icon, link URL as mentioned in the API Guide. Along with that, you need to pass the send_to parameter with value as identifiers and pass another JSON array named identifiers with the ID of the users whom you want to deliver this notification to. In this case, XYZ

Here is one sample PHP Curl Script to send a web push notification to one specific user using Engagespot API.


$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => “https://api.engagespot.co/2/campaigns”,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_CUSTOMREQUEST => “POST”,
CURLOPT_POSTFIELDS => ‘{“campaign_name”:”Task”,
“notification”:{“title”:”Welcome to Engagespot”,
“message”:”Send push notifications to speicific users with our API”,”icon”:”https://engagespot.co/webpushicon.png”,
“url”:”https://engagespot.co/guides”},”send_to”:”identifiers”,”identifiers”:[“XYZ”]}’,

CURLOPT_HTTPHEADER => array(
“api-key: Your API Key”,
“content-type: application/json”
),
));

curl_close($curl);
$response = curl_exec($curl);
$err = curl_error($curl);

if ($err) {
echo “cURL Error #:” . $err;
} else {
echo $response;
}

The same API call can be called using any programming languages such as Python, NodeJS, Java etc

When you call the API, the notification will be delivered only to the user with id XYZ. If he is currently online on your web app, he will receive it inside your bell icon with a notification sound (if you’ve enabled sound during the push notification setup).

On the other hand, if your user’s browser is closed, he will receive it as a normal, native browser push notification on which he can click and open the link that you have mentioned on the notification JSON body.

Great! You have successfully implemented user specific web push notifications using Engagespot REST API. Feel free to comment if you have any doubts. I’ll be glad to help you.

Click to create a Free Engagespot Account, and Implement User Specific Push Notification on Your Web App Today.

If you’ve already tried our free plan, have a look at our premium push notification pricing packages. We have lot of features that you’ll love.