Adding the Inbox to Your Product

<MagicBell
  apiKey="MAGICBELL_API_KEY"
  userEmail="[email protected]"
  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