Identifying Users

To render your MagicBell notification inbox, you need to specify the user for whom you want to display their notifications. You have two options, depending on how you identify users in your app.

By email address

Set the userEmail property:

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

export default function Notifications() {
  return (
    <MagicBell apiKey="MAGICBELL_API_KEY" userEmail="[email protected]">
      {(props) => <FloatingNotificationInbox height={500} {...props} />}
    </MagicBell>
  );
}

By an ID

Set the userExternalId property:

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} {...props} />}
    </MagicBell>
  );
}