MagicBell

Notify users when a new notification arrives

Learn how to add a hook to the new notification event

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://assets.magicbell.com/magicbell.esm.js';

  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 });
    },
  };

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