Browser notifications

Adam Ilowite

Published: 12/19/2022

Adam Ilowite

Updated: 1/6/2023

Browser notifications

Browser notifications are a way for sites to send notifications to users even when they are not actively using the site. These notifications can appear as pop-ups or banners in the user's browser, and can be used to alert the user of new content, events, or other important information.

Different browsers handle notifications differently, and some may have more functionality or customization options than others. For example, some browsers allow users to specify which sites can send them notifications, while others may allow users to customize the appearance of the notifications.

Enabling Notification Permissions for Your Website

In order to send browser notifications to your users, you will need to first ensure that you have permission to do so. In most browsers, users must grant permission for a website to send them notifications before they can receive them.

To request notification permissions from your users, you will need to add a script to the footer of your website. This script will prompt the user to allow or deny notification permissions for your site.

To add the script to the footer of your website, follow these steps:

1. Copy the following code:

<script>
Publisher.subscribe('notification', function(event, data) {
  var notification = new Notification(data.FromUserInfoDisplayName + ' ' + data.ActionText, {
    body: "New Passport notification",
    tag: 'notification' + data.ID
  });
  notification.onclick = function() {
    window.open(data.URL);
  };
});
</script>

Note: You can customize the subject line of the browser notification by replacing "New notification" in the code above with your own custom subject line.

Note: You can also customize the image that displays with the notification by adding an "icon" property to the script with the URL of the image you would like to use. Here is how you would do that (replace the highlighted text with the URL of your icon image).

<script>
Publisher.subscribe('notification', function(event, data) {
  var notification = new Notification(data.FromUserInfoDisplayName + ' ' + data.ActionText, {
    icon: 'https://yourintranet.com/Assets/Uploaded-Photos/icon.svg'
    body: "New Passport notification",
    tag: 'notification' + data.ID
  });
  notification.onclick = function() {
    window.open(data.URL);
  };
});
</script>

2. Navigate to General Settings, Header and Footer Scripts, and paste the copied code into the footer script of your site.

3. Save your changes and refresh any pages you may have had open.

Once the script is added to your website, it will prompt your users to allow or deny notification permissions when they visit your site. If the user grants permission, the site will send them browser notifications for any notifications they would have received via the web application - these are the same notifications that appear on the bell icon of the site.

Note: The exact process for granting notification permissions may vary slightly from browser to browser. Some browsers may require the user to click a button or link to grant permission, while others may automatically prompt the user for permission when the script is encountered.

Browser notifications | Communifire Documentation