Quick Start

Add the Inbox to your Product

<NotificationInboxPreview
  code={`<MagicBell
  apiKey="MAGICBELL_API_KEY"
  userEmail="dan@example.com"
  defaultIsOpen
>
  {(props) => (
    <FloatingNotificationInbox
      height={350}
      placement="bottom-start"
      closeOnClickOutside={false}
      {...props}
    />
  )}
</MagicBell>`}
/>

The in-app Inbox is our favorite notification channel! The MagicBell Inbox is super themeable and offers dozens of customizations.

We suggest you start with the out of box experience first. It looks great, and bundles support web-push notifications, a pane for managing the notification preferences, and it works flawlessly on mobile and the web.
Once you are up and running, you can tweak it endlessly, or even create a custom Inbox.

The MagicBell Playground offers interactive showcases of the different styles and layouts. You can edit the code and preview changes, and when you are ready, you can copy the code and add it to your product!

You can also find code snippets for the most popular frameworks frontend frameworks in your MagicBell Dashboard, or browse a list of SDKs and wrappers

Once you are up and running with the Inbox, MagicBell offers several ways to improve the notification experience for your users and team.

Keep Building

  • Enable more Delivery Channels to reach your users where they are.
  • Use the category key when creating Broadcast to offer granular notification preferences to them.

Go live

Explore the Playground

The MagicBell Playground lets you explore various frontend integrations of MagicBell. It's a great way to get a feel for how MagicBell works and looks!

You'll find examples for Angular, React, Vue and vanilla JavaScript.

Join the Community

Please post any questions, feedback, or feature requests to GitHub Discussions or join our Slack Community!