Guide to Display Browser Push Notification to Increase User Interactions in PHP Website

0
Shares
Guide to Display Browser Push Notification to Increase User Interactions in PHP Website
1.4 (28.57%) 28 votes

Nowadays, there are so many ways for businesses to reach out to their online audience. Though, businesses still need to make sure that they’re using the right methods. Aside from same-old email marketing and social media marketing, another good way to reach out to customers is through browser push notification.

A browser push notification is still a great way for sending a message to a target audience in either a web application or website. In fact, keeping your users notified even when they’re on another tab can benefit your business sales.

Today, we’ll implement browser push notification in PHP website to send custom PHP push notification to increase user interactions.

Let’s Get Started

Create a file with webnotification.html for the output view.

Now, first generate notification pop up through notification button.

<div id="container">
<h1>Space-O Browser notification demo</h1>

<h4>Generate Notification with tap on Notification</h4>
<a href="#" id="notificationlabel" class="button">Notification</a>
</div>

Next, set CSS for Notification window.

<style type="text/css">
.hover{background-color: #cc0000}
#container{ margin:0px auto; width: 800px}
.button {
font-weight: bold;
padding: 7px 9px;
background-color: #5fcf80;
color: #fff !important;
font-size: 12px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 0px rgba(0,0,0,0.15);
border-width: 1px 1px 3px !important;
border-style: solid;
border-color: #3ac162;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
border-radius: 3px;
box-sizing: border-box;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
}
.authorBlock{border-top:1px solid #cc0000;}
</style>

Adding Script

<script type="text/javascript">

Define array for text of notification.

var blogs = [
["Space-O","www.spaceotechnologies.com"],
["Space-O","www.spaceotechnologies.com"],
["Space-O","www.spaceotechnologies.com"],
["Space-O","www.spaceotechnologies.com"],
["Space-O","www.spaceotechnologies.com"]
];

To get random text from array, create following function.

setTimeout(function(){
var x = Math.floor((Math.random() * 5) + 1);
var title=blogs[x][0];
var desc='Most popular blogs.';
var url=blogs[x][1];
notifyBrowser(title,desc,url);
}, 200000);

Use AddEventListener to create notification on current screen.

document.addEventListener('DOMContentLoaded', function ()
{

if (Notification.permission !== "granted")
{
Notification.requestPermission();
}

document.querySelector("#notificationlabel").addEventListener("click", function(e)
{
var x = Math.floor((Math.random() * 5) + 1);
var title=blogs[x][0];
var desc='Most popular blogs.';
var url=blogs[x][1];
notifyBrowser(title,desc,url);
e.preventDefault();
});

});

function notifyBrowser(title,desc,url)
{
if (!Notification) {
console.log('Desktop notifications not available in your browser..');
return;
}
if (Notification.permission !== "granted")
{
Notification.requestPermission();
}
else {
var notification = new Notification(title, {
icon:'http://www.freelogovectors.net/wp-content/uploads/2015/06/gold-fish-icon.png',
body: desc,
});

Remove the notification from notification center once clicked.

notification.onclick = function () {
window.open(url);
};

Callback function when the notification is closed.

notification.onclose = function () {
console.log('Closed notification popup');
};

That’s It!

notiifcation_screen

While push notifications started from the mobile industry, but this technology has become a widespread in desktop apps as well.

Although, it’s possible to do further modifications, but the implementation part might look tricky. Therefore, to implement this feature, hire PHP developer, and display the contents that interests them to improve user interactions in your business website.

 
0
Shares
 

Would You Like to Develop Your Business Website? We Can Help!

Get your free consultation now