Notify Users When a New Notification Arrives

You might want to play a sound or show a toast when a new notification arrives. We expose the onNewNotification hook to help you achieve it. When you initialize your notification inbox, define the onNewNotification function. This function receives the new notification as its only argument.

The following example shows how to show an alert when a new notification arrives:

<div id="notifications-inbox" />
<script type="module">
  import { renderWidget } from 'https://unpkg.com/@magicbell/embeddable';

  let targetEl = document.getElementById('notifications-inbox');
  let options = {
    apiKey: MAGICBELL_API_KEY,
    userEmail: CURRENT_USER_EMAIL,
    height: 500,
    onNewNotification: function (notification) {
      alert(notification.title);
      console.log({ notification });
    },
  };

  renderWidget(targetEl, options);
</script>

<div id="notifications-inbox" />
<script type="text/javascript">
  // prettier-ignore
  (function(i,s,o,g,r,a,m) {i['MagicBellObject'] = r;(i[r] =i[r] ||function() {
    (i[r].q = i[r].q || []).push(arguments);}),(i[r].l = 1 * new Date());(a = s.createElement(o)), (
    m = s.getElementsByTagName(o)[0]);a.async = 1;a.src = g;m.parentNode.insertBefore(a, m);
    })(window,document,'script','https://unpkg.com/@magicbell/embeddable/dist/magicbell.min.js','magicbell');

  var targetEl = document.getElementById('notifications-inbox');
  var options = {
    apiKey: MAGICBELL_API_KEY,
    userEmail: CURRENT_USER_EMAIL,
    height: 500,
    onNewNotification: function (notification) {
      console.log({ notification });
      alert(notification.title);
    },
  };

  magicbell('render', targetEl, options);
</script>