Set a Custom Click Handler

If you create notifications with an action_url, this URL will be opened in the same window when a user clicks on the notification. However, you can easily set a custom click handler by setting the onNotificationClick property on the FloatingNotificationInbox component.

<NotificationInboxPreview
floatingNotificationInboxProps={{
onNotificationClick: (notification) => {
alert(You clicked: ${notification.title});
},
closeOnNotificationClick: false,
}}
code={`<MagicBell
apiKey="MAGICBELL_API_KEY"
userEmail="dan@example.com"
defaultIsOpen

{(props) => (
<FloatingNotificationInbox
height={350}
closeOnNotificationClick={false}
onNotificationClick={(notification) => {
alert(notification.title);
}}
{...props}
/>
)}

`}
/>

Open the action url in a new tab

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

export default function Notifications() {
  const openActionUrl = (notification) => {
    // Open the action url in a new tab if the notification has one
    if (notification.actionUrl) window.open(notification.actionUrl);
  };

  return (
    <MagicBell apiKey="MAGICBELL_API_KEY" userExternalId="u001">
      {(props) => (
        <FloatingNotificationInbox
          height={500}
          onNotificationClick={openActionUrl}
          {...props}
        />
      )}
    </MagicBell>
  );
}

Single page application navigation

The following example shows how to do navigation in a single page application (SPA) that has React Router.

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

export default function Notifications() {
  const navigate = useNavigate();

  const navigateToActionUrl = (notification) => {
    if (notification.actionUrl) navigate(notification.actionUrl);
  };

  return (
    <MagicBell apiKey="MAGICBELL_API_KEY" userExternalId="u001">
      {(props) => (
        <FloatingNotificationInbox
          height={500}
          onNotificationClick={navigateToActionUrl}
          {...props}
        />
      )}
    </MagicBell>
  );
}