Novu•2w ago

Preferences Button in Custom Header

Hi all, I am trying to customize the header within PopoverNotificationCenter. Is there anyway I can replicate the behavior of the settings/preferences button? I can't seem to find a way to change to the preferences view. https://docs.novu.co/notification-center/client/react/customization#header-footer-and-empty-state

Novu

Customizing Notification Center - Novu

Learn how to customize the pre built notification center component partially or building your own notification center component from scratch using Novu provided hooks

5 Replies

Ask Inkeep•2w ago

Hi @fyeung, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question.

Novu_Bot•2w ago

@fyeung, you just advanced to level 1!

Ask Inkeep•2w ago

----------------------------- While I generate an answer, here are some sources that might be helpful: * Preferences * API Reference * Customizing Notification Center * Subscriber Preference -----------------------------

Ask Inkeep•2w ago

Answer To customize the header in the PopoverNotificationCenter and include behavior similar to the settings/preferences button, you can utilize the header prop to define a custom header component. This component can include a button or another interactive element that triggers the preferences view. Here's an example of how you might set up a custom header with a preferences button:

import { PopoverNotificationCenter, useNovu } from '@novu/notification-center';

function CustomHeader() {
  const { showPreferences } = useNovu();

  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px' }}>
      <h1>Notifications</h1>
      <button onClick={showPreferences}>Preferences</button>
    </div>
  );
}

function App() {
  return (
    <PopoverNotificationCenter
      header={CustomHeader}
    />
  );
}

import { PopoverNotificationCenter, useNovu } from '@novu/notification-center';

function CustomHeader() {
  const { showPreferences } = useNovu();

  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px' }}>
      <h1>Notifications</h1>
      <button onClick={showPreferences}>Preferences</button>
    </div>
  );
}

function App() {
  return (
    <PopoverNotificationCenter
      header={CustomHeader}
    />
  );
}

In this setup, useNovu is a hook from Novu that provides access to various methods including showPreferences, which you can call to switch to the preferences view. This approach allows you to integrate custom functionality into the PopoverNotificationCenter header while maintaining a seamless user experience. Please note, ensure that the PopoverNotificationCenter is wrapped within a NovuProvider to properly manage the state and functionality of the notification system (1) .

Sources [1] Customizing Notification Center

Pawan Jain•2w ago

@fyeung Checkout this answer in #🪄│engineering channel https://discord.com/channels/895029566685462578/1254796503382360084/1254800112186822760

Gaming

Programming

Preferences Button in Custom Header