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 completeSign 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 completeSimply 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 completeThe 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.