You can trigger this function through event as you wish. For testing purpose, you can check this by adding a button. Use below code for button in the body<\/p>\n
<button onclick="showNotification()">Show Notification!<\/button><\/pre>\n
After reading this blog, you will able to setup the desktop notification for your site. You will also be able to customize your notification by your own message, image, icon etc.<\/p>\n
Suppose you want to notify your customer outside the webpage then we can use the desktop notification as if you have enabled desktop notification for email, you don\u2019t need to check emails regularly. In every email, you got a notification.<\/p>\n
Add the below function in the script tag in the head of the HTML.<\/p>\n
function showNotification() {\r\n \/\/ Verify if the user's browser supports notifications or not\r\n if (!("Notification" in window)) {\r\n alert("Your browser does not support the desktop notification");\r\n }\r\n \/\/ Verify if notification's permissions have already been granted or not\r\n else if (Notification.permission === "granted") {\r\n \r\n \/\/ Create Notification\r\n var options = {\r\n body: 'Simple notification message line 1.\\nSecond line of notification message.', \/\/ body of the notification\r\n dir: 'ltr', \/\/ direction of message ltr: left to right. rtl : right to left.\r\n image: 'https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/09\/cropped-knowband_logo-v2.png', \/\/ Add image if required to show\r\n icon: 'https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/09\/cropped-knowband_logo-v2.png', \/\/ Add icon if required to show\r\n }\r\n \r\n var title = "Knowband Blog";\r\n var notification = new Notification(title, options);\r\n \r\n \r\n \/\/Add the notification click link\r\n notification.onclick = function (event) {\r\n event.preventDefault(); \/\/ prevent the browser from focusing the Notification's tab\r\n window.open('https:\/\/www.knowband.com\/blog\/', '_blank');\r\n notification.close();\/\/Close the notification after click\r\n }\r\n }\r\n \r\n \/\/ If no permissions, ask the user for permission\r\n else if (Notification.permission !== "denied") {\r\n Notification.requestPermission().then(function (permission) {\r\n \/\/ If the user accepts, let's create a notification\r\n if (permission === "granted") {\r\n var notification = new Notification("Hi there!");\r\n }\r\n });\r\n }\r\n}<\/pre>\nYou can trigger this function through event as you wish. For testing purpose, you can check this by adding a button. Use below code for button in the body<\/p>\n
<button onclick="showNotification()">Show Notification!<\/button><\/pre>\n
![\"Output](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/06\/Picture1-2.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"