Identifying users

To render your MagicBell, 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="mary@example.com">
      {(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>
  );
}
Important. Please make sure that you use the `external_id` parameter to identify the users when creating the notifications using the API.