Your App's Inbox. Drop-In. Infra-Grade.

A fully customizable notification inbox powered by MagicBell's real-time delivery infrastructure. Add it in minutes, scale it without worry.

View Docs Sign up
Floating Inbox
import * as React from "react";
import Provider from "@magicbell/react/context-provider";
import FloatingInbox from "@magicbell/react/floating-inbox";

function App(props: any) {
  return (
    <Provider token="${USER_JWT}">
      <FloatingInbox
        placement="bottom-start"
        height={500}
        width={400}
        offset={10}
      />
    </Provider>
  );
}

export default App;

Trusted by 7,000+ companies

Pitch
GitBook
Stacksi
Features

Don't Reinvent the Notification Center.

A drop-in notification inbox powered by MagicBell's real-time delivery infrastructure. Add it in minutes, customize it fully, scale without worry.

Instant Integration

Instant Integration

Add a production-ready inbox UI with just a few lines of code. Supports React, Svelte, Preact.

Real-Time by Default

Real-Time by Default

Notifications update live via WebSockets. No polling, no custom infra required.

Fully Customizable

Fully Customizable

Style with CSS variables. Replace components. Control layout. Matches your brand.

Your Auth, Your Users

Your Auth, Your Users

JWT-based auth you sign yourself. No extra API calls. Works with your existing system.

Powered by Serious Infra

Powered by Serious Infra

Leverages MagicBell's delivery pipeline, retries, fallback rules, and event logging.

Built for Developers

Built for Developers

Code-split friendly. Framework-agnostic styling. Well-documented SDKs and APIs.

Features

Copy. Paste. Notify.

Add an inbox to your app with just a few lines of code.

Floating Inbox
import * as React from "react";
import Provider from "@magicbell/react/context-provider";
import FloatingInbox from "@magicbell/react/floating-inbox";

function App(props: any) {
  return (
    <Provider token="${USER_JWT}">
      <FloatingInbox
        placement="bottom-start"
        height={500}
        width={400}
        offset={10}
      />
    </Provider>
  );
}

export default App;

Frequently asked questions

Everything you need to know about the product and billing.

Is there a free plan available? +
Yes, we have a free plan which supports 5,000 Notification Deliveries per month. If you want, we'll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.
Can I change my plan later? +
Yes, you can upgrade or downgrade your plan at any time from your account settings.
What is your cancellation policy? +
You can cancel your subscription at any time. Your account will remain active until the end of your billing period.
Can other info be added to an invoice? +
Yes, you can add additional information such as VAT number, company address, or purchase order number to your invoices.
How does billing work? +
Billing is monthly or annual, and you can choose your preferred payment method at checkout.
How do I change my account email? +
You can update your account email from your profile settings at any time.
Avatar 3 Avatar 2 Avatar 1

Still have questions?

Can't find the answer you're looking for? Please chat to our friendly team.

Get in touch
Our blog

Latest blog posts

Tools and strategies modern teams need to help their companies grow.

FireBase

Complete Guide to Firebase Web Push Notifications

Looking to add push notifications to your web app? Firebase Notification Web makes it easy.

Push Notifications

A Guide to React Native Expo Push Notifications

This guide will walk you through creating a React Native app using the Expo framework and setting it up with MagicBell.

Push Notifications

Mastering Push Notification in JavaScript

Looking to implement Push Notification in JavaScript? This guide will show you how, step-by-step.

View all posts