How can I close the notification inbox using JavaScript code?

[3v0k4]

See title. Thanks! 🙏

[smeijer]

If you need to close the inbox programatically, you'll need to take over control over the isOpen prop. The approach depends a bit on what SDK you're using.

@magicbell/magicbell-react

When using react, you'll need to control the isOpen prop. The exact implementation depends very much on your requirements, but here's the basic approach.

function MyApp() {
  const { showInbox } = useContext(AppContext);

  return (
    <MagicBell apiKey={apiKey} userEmail="[email protected]">
      {(props) => (
        <FloatingNotificationInbox {…props} isOpen={showInbox} />
      )}
    </MagicBell>
  );
}

@magicbell/embeddable

The embeddable currently doesn't expose a way to take over control. You could query the DOM to check the current state tho, and then simulate a click event to close it.

const magicbell = document.querySelector('[data-magicbell-bell]');
const expanded = magicbell.closest('[aria-expanded]').getAttribute('aria-expanded') === 'true';
if (expanded) magicbell.click();