MagicBell Documentation

Explore our guides and examples to integrate MagicBell.

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

Building blocks of MagicBell

Notification inbox

Add the notification inbox to your app in under ~30 minutes.

Rich text

Notification content supports HTML - make your notifications as pretty and robust as you want using inline CSS, images, inputs, etc.

Customization

Fully customize your inbox using our UI or with one of our React packages.

Categories

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.

API

Use our Rest API to send notifications. You can send notifications to your users using an email address or an id.

We offer API wrappers for convenience.

Channels

Select the channels you want to deliver notifications to: In-app, email, web push and mobile push.

Announcements

Easily send notifications to all users or a segment of them.

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.

Watch a quick demo and refer to our guides to learn more!

Try MagicBell

5 minutes to complete

Sign up for free! Then 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 paste our snippet of code in your application and 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 app.magicbell.com/projects 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.

JavaScript

Developers can change the styling directly in code as well.

ESM
<script type="module">
  import { renderWidget } from 'https://assets.magicbell.com/magicbell.esm.js';

  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: 'mary@example.com',
    height: 500,
    theme,
  });
</script>

React

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 hello@magicbell.com, and we'll answer as soon as humanly possible! Or request a demo if you want to learn more.