Change the Position of the Notification Inbox

The notification inbox position is powered by the popper library. You can use placement property on the FloatingNotificationInbox component to position the notification inbox relative to the bell.

import React from 'react';
import MagicBell, { FloatingNotificationInbox } from '@magicbell/magicbell-react';

export default function Notifications() {
  return (
    <MagicBell apiKey="MAGICBELL_API_KEY" userExternalId="u001">
      {(props) => (
        <FloatingNotificationInbox
          height={500}
          placement="bottom-end"
          {...props}
        />
      )}
    </MagicBell>
  );
}