👋 Hello. We're MagicBell!

The notification inbox for your product

Get a complete, multichannel notification system in under an hour!

Building blocks of MagicBell

  • Embed our notification inbox in your app via our JavaScript snippet in under ~30 minutes
  • Fully customize your inbox using our UI or with the React SDK
  • Select the channels you want to deliver notifications to: In-app, email, web push and mobile push (SMS coming soon!)
  • Use our API to start sending notifications. recipients can be designated using an email address or external_id. You can also use our API wrappers instead of making HTTP calls directly.
  • Announcements allow you to easily send notifications to all users.
  • Notification content supports HTML - make your notifications as pretty and robust as you want using inline CSS, images, inputs, etc
  • Assign a category to each notification to enable users to manage their notification preferences. Categories also allow you to customize the delivery channels for a notification.
  • action_url controls where a user goes when clicking on the notification. You can also define a onNotificationClick function to program this behavior.

Whether you are using MagicBell's inbox or building your UI, our SDKs take care of real-time updates and asynchronous state management for you.

Refer to our guides to learn more!

Try MagicBell

5 minutes to complete

You can visit our dashboard to send a notification and instantly see it in your inbox on the right. It takes one click to see how MagicBell works!

Implement MagicBell

30 minutes to complete

Simply sign up for free and paste our snippet of code in your application. Follow the Getting Started walkthrough to get MagicBell up and running! Below is the MagicBell extension for Hacker News.

Customize MagicBell

5 minutes - 1 hour to complete

The theme of your inbox can easily be changed using our application or directly in JavaScript. The React SDK allows full customization. The inbox below was built by Pitch - a series B startup.

MagicBell dashboard

At you can change colors, typography, and additional styling. Then copy the code generated from 'Notification Inbox Code' and paste the updated code into your application.


Developers can change the styling directly in code as well.

<script type="module">
  import { renderWidget } from '';

  let theme = {
    icon: { borderColor: 'white', width: '20px' },
    header: { backgroundColor: '#7fccc4', textColor: '#f2faf9' },
    footer: { backgroundColor: '#7fccc4', textColor: '#f2faf9' },

  magicbell('render', target, {
    apiKey: 'MAGICBELL_API_KEY',
    userEmail: '',
    height: 500,


Our team built two React libraries to give you more power! An example is the ability to completely customize the in-app notification inbox to match the design of your product. See our theming guide and the package documentation to learn more.

Our Vision with MagicBell

Our goal is for customers to have a notification system as fast as possible - in under 30 mins - and continue to wow day after day. We vow to continue to make MagicBell a more powerful tool without compromising ease of use.

Building a notification system in-house is hard! There's a lot of complexity and a wide breadth of features needed: the in-app experience, multiple channels (email, SMS, push), managing notification preferences, branding, and more.

MagicBell takes care of all the work, so you never have to think about notifications again! 🙂

Still Have Questions?

Contact us at, and we'll answer as soon as humanly possible! Or request a demo if you want to learn more.