MagicBell Developer FAQ

Can I change the font size?

Yes, you can! Just pass the font size to all elements you want to customize. In the following example we show how to set 16px as the font size for notifications in any state and 13px for the header:

<div id="notifications-inbox" />
<script type="text/javascript">
  (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://assets.magicbell.io/magicbell.min.js','magicbell');

  var targetEl = document.getElementById('notifications-inbox');
  var options = {
    apiKey: MAGICBELL_API_KEY,
    userEmail: CURRENT_USER_EMAIL,
    height: 500,
+   theme: {
+     header: { fontSize: '13px'  },
+     notification: {
+       default: { fontSize: '16px' },
+       unseen: { fontFamily: '16px' },
+       unread: { fontFamily: '16px' },
+     },
+   },
  };

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

How can I change the image shown when the inbox is empty?

To change the default image pass your image's url to the initialization options in the images.emptyInboxUrl key. For example:

<div id="notifications-inbox" />
<script type="text/javascript">
  (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://assets.magicbell.io/magicbell.min.js','magicbell');

  var targetEl = document.getElementById('notifications-inbox');
  var options = {
    apiKey: MAGICBELL_API_KEY,
    userEmail: CURRENT_USER_EMAIL,
    height: 500,
+   images: {
+     emptyInboxUrl: 'https://my-site.com/empty-inbox.png',
+   },
  };

  magicbell('render', targetEl, options);
</script>
Please provide images in the PNG orr JPEG formats. The image will be automatically resized to 200px of height and will preserve the aspect radius.

Can I add a hook to be executed when a new notification arrives?

Yes! You might want to play a sound or show a toast when a new notification arrives. To achieve it, just add a function called onNewNotification to the initialization options. This function receives the new notification as its only argument. For example:

<div id="notifications-inbox" />
<script type="text/javascript">
  (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://assets.magicbell.io/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) {
+     alert(notification.title);
+   },
  };

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