Configuring Multiple Tabs

Novu allows to create a multi-tab experience for a notification center, in a way you can fetch the notifications feed using a filtered query.

​

Defining stores

To create multiple stores you can use the prop stores on the NovuProvider component. Each store has storeId property that will be used to interact with information related to this store.

<NovuProvider
  stores={[
    /**
	storeId and feedIdentifier must be identical and should be copied from In-App editor feed
  */
    {
      storeId: "product-updates",
      query: { feedIdentifier: "product-updates" },
    },
    { storeId: "user-activity", query: { feedIdentifier: "user-activity" } },
  ]}
  subscriberId={"SUBSCRIBER_ID"}
  applicationIdentifier={"APPLICATION_IDENTIFIER"}
>
  <PopoverWrapper />
</NovuProvider>

Using the query object multiple fields can be passed for feed API:

• feedIdentifier - Can be configured and created on the WEB UI
• seen - Identifies if the notification has been seen or not

After specifying the stores prop, you can use the storeId property to interact with the store.

​

Managing feeds on the web UI

1. How to add a new feed or select existing feed for In-App step?

To add a new feed, enable Use Feeds checkbox in In-App editor. Select from existing feeds or create a new feed by writing in the input field and then clicking on plus icon in the right side.

Adding a new feed or selecting existing feed

2. How to copy feedIdentifier (storeId)

To copy feedIdentifier (storeId) click on the feed name of existing feeds. copy three dot icon. a menu will appear. click on Copy ID option to copy selected feed’s feedIdentifier

Copy feedIdentifier (storeId)

​

Using tabs prop on the notification center

<PopoverNotificationCenter
  colorScheme="dark"
  tabs={[
    // name can be any custom name
    { name: "Product Updates", storeId: "product-updates" },
    { name: "User Activity", storeId: "user-activity" },
  ]}
  colorScheme={colorScheme}
  onNotificationClick={handlerOnNotificationClick}
  onActionClick={handlerOnActionClick}
>
  {({ unseenCount }) => {
    return (
      <NotificationBell colorScheme={colorScheme} unseenCount={unseenCount} />
    );
  }}
</PopoverNotificationCenter>

Multiple Tabs in notification center example

​

Example

​

Important Links