MagicBell

How to change the default images

The notification inbox shows an image when the user has no notifications. To change it set the images.emptyInboxUrl key with your image's url when you initialize the inbox. For example:

ESM
<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,
    images: {
      emptyInboxUrl: 'https://my-site.com/empty-inbox.png',
    },
  };

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