The OpenWeb Developer Hub

Welcome to the OpenWeb developer hub. You'll find comprehensive guides and documentation to help you start working with OpenWeb as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Notification Bell

Allow users to easily view new activity and re-visit conversations they took part in, anywhere across the site.

Personalize your users’ connection to the community through an engaging on-site notification center. Easily embed the notification center as a bell anywhere on the page, including the page header or side panels.

As a powerful re-engagement tool, notifications keep users informed about relevant new activity. Notifications include real-time updates about the community's interaction with their content, moderation decisions and when another user mentions them. Publishers also have the ability to broadcast universal updates to the users’ notification feed, such as breaking news stories, event announcements, trending conversations/topics and more.

Personalized notifications drive higher user retention and help deepen your relationship with your audience. Users can update their notification preferences and privacy settings directly from the notification bell.

OW notifications integrated into IGN's header


Requirement

Ask your PSMPSM - Partner Success Manager to enable this feature for your account



Implementation

Use the following steps to enable your custom notifications button to launch the OpenWeb notifications menu:

  1. In a container, wrap a button followed by a new element.

    You can place the notifications button anywhere across your site. You should customize the notification button to align with your brand.
<div style="display: flex; flex-direction: column;">
  <button class="my-custom-bell-button">
  </button>
  <span data-ow-notifications-placeholder data-instance-id="EmbeddedNotifications"></span>
</div>

  1. Define a function to update the notifications button with the number of unseen notifications.

    OpenWeb populates the count argument of onNewUnseen(count) by passing a callback to __OW_SUBSCRIBE_TO_NOTIFICATIONS__ as part of step 4 below.

    In the following example, badgeNode.innerText = count; is used to update the button text with the number of unseen notifications.
function onNewUnseen(count) {
  // count is the number of unseen notifications. 
  // Here you can attach count to your badge.
  badgeNode.innerText = count;
}

  1. Add the following openNotifications() script snippet. Be sure to replace YOUR_POST_ID with the post ID.

📘

If you give your button class a custom name, you must update the querySelector argument in var button = document.querySelector('.my-custom-bell-button'); in the snippet below.

function openNotifications() {
  var payload = {
    postId: 'YOUR_POST_ID',
    instanceId: "EmbeddedNotification"
  };

  if (typeof window.__OW_OPEN_NOTIFICATIONS__ === 'function') {
    window.__OW_OPEN_NOTIFICATIONS__(payload);
    onNewUnseen(0) // reset the counter on your badge
  } else {
    document.addEventListener('ow-notifications-sdk-ready', function () {
      window.__OW_OPEN_NOTIFICATIONS__(payload);
      onNewUnseen(0) // reset the counter on your badge
    });
  }
}

var button = document.querySelector('.my-custom-bell-button');
button.onclick = openNotifications;

  1. Add a notification count badge above the button. This count badge indicates how many new notifications the user has.
function subscribeToNotifications() {
  if (typeof window.__OW_SUBSCRIBE_TO_NOTIFICATIONS__ === 'function') {
    window.__OW_SUBSCRIBE_TO_NOTIFICATIONS__('YOUR_POST_ID', onNewUnseen);
  } else {
    document.addEventListener('ow-notifications-sdk-ready', function () {
      window.__OW_SUBSCRIBE_TO_NOTIFICATIONS__('YOUR_POST_ID', onNewUnseen);
    });
  }
}

subscribeToNotifications();

  1. When embedding the notifications product on a page without other OpenWeb products, add the launcher code and set data-spotim-autorun="false".
<script 
    async 
    src="https://launcher.spot.im/spot/SPOT_ID"
    data-spotim-module="spotim-launcher"
    data-post-url="ARTICLE_URL"
    data-article-tags="ARTICLE_TOPIC1, ARTICLE_TOPIC2"    
    data-post-id="POST_ID"   
    data-spotim-autorun="false">
</script>

📘

If you have implemented one of OpenWeb’s products on the page, the launcher already exists. You do not need to add a separate launcher code or change the existing one.



Full Code Example

The following example shows a full code example.

<html>
  <head>...</head>
  <body>
  
    <div style="display: flex; flex-direction: column;">
  <button class="my-custom-bell-button">
  </button>
  <span data-ow-notifications-placeholder data-instance-id="EmbeddedNotifications"></span>
</div>
   <script>
      function onNewUnseen(count) {
     //count is the number of unseen notifications, here you can attach it.  
      // to your badge.
      }
    function openNotifications() {
  var payload = {
    postId: 'YOUR_POST_ID',
    instanceId: "EmbeddedNotification"
  };

  if (typeof window.__OW_OPEN_NOTIFICATIONS__ === 'function') {
    window.__OW_OPEN_NOTIFICATIONS__(payload);
    onNewUnseen(0) // resetting the counter on your badge
  } else {
    document.addEventListener('ow-notifications-sdk-ready', function () {
      window.__OW_OPEN_NOTIFICATIONS__(payload);
      onNewUnseen(0) // resetting the counter on your badge
    });
  }
}

var button = document.querySelector('.my-custom-bell-button');
button.onclick = openNotifications;
    </script>
}

function subscribeToNotifications() {
  if (typeof window.__OW_SUBSCRIBE_TO_NOTIFICATIONS__ === 'function') {
    window.__OW_SUBSCRIBE_TO_NOTIFICATIONS__('YOUR_POST_ID', onNewUnseen);
  } else {
    document.addEventListener('ow-notifications-sdk-ready', function () {
      window.__OW_SUBSCRIBE_TO_NOTIFICATIONS__('YOUR_POST_ID', onNewUnseen);
    });
  }
}

subscribeToNotifications();
    </script>
    
    ...
    
    
  </body>
</html>

Updated about 3 hours ago


Notification Bell


Allow users to easily view new activity and re-visit conversations they took part in, anywhere across the site.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.