Customising Feed
Customising tenant
By default tenantId
prop is set to default
tenant. If you use multi-tenant architecture and want to fetch inbox notifications of other tenant, you can pass tenant_id
prop.
If you are passing tenant_id
in feed, make sure to pass scope key while creating userToken else 403 error will be thrown due to scope mismatching.
Adding tabs
You can pass stores
prop to add multiple tabs in feed. For each tab you can write your own logic to get notifications based on tags, notification categories and notification status like read, archived. Read more about it here.
Disable pagination
By default, feed supports infinite scrolling type pagination to get older notifications when you scroll through notifications list. If you want to remove infinite scroll, that is stop getting previous page notifications, you can set pagination=false
.
Enable dark mode
Light Theme | Dark Theme |
---|---|
![]() | ![]() |
Custom notification card click handler
Clicking on notification card will open the link if Action URL
field is present in triggered inbox template. If you want to override this with your custom callback function you can pass notificationClickHandler
.
Custom action button click handlers
Clicking on action buttons in notification card will open link if you provide url on action button fields in triggered inbox template. If you want to override this with your custom action button callback functions you can pass primaryActionClickHandler
and secondaryActionClickHandler
.
Popover position
Popover component is wrapper around NotificationFeed component and will be opened on click of bell icon. By default popover is shown at bottom ie., the inbox notifications popup list will be shown at bottom of the bell icon.
Example: Feed needs to be shown at bottom of left sidebar above profile icon, in that case on click of bell icon you would want to show notifications popover at right side.
Custom bell component
For Bell, you can customise either css styles of existing bell component or replace existing bell with your own bell component. To replace existing bell component with your own component use bellComponent
prop.
Custom badge component
This element shows the number of unseen notifications on Bell. You can customise either css styles of existing badge component or replace existing badge with your own badge component. To replace existing badge component with your own component use badgeComponent
prop.
Custom header component
You can add custom component on right side of Header, this will replace Mark all as read
text and add any JSX you pass as component in that place. You can even add custom icons like setting or preferences in that JSX and navigate user to that pages.
Custom notification card component
You can customise either css styles of existing notification card component or replace existing card with your own card component. To replace existing component use notificationComponent
prop.
BodyMarkdown component
We support markdown language in body field in inbox template. So while designing your own notification card component if you want to use our inbuilt body component which includes support for markdown language to save some time you could use BodyMarkdown
component.
Custom loader component
Existing loader icon which is displayed while getting notifications from SuprSend server, can be changed.
Custom no notifications component
When no notifications are present then we show empty component. This component can be overridden by using noNotificationsComponent
prop.
Customising CSS styles
If you don’t want to replace existing components, you have an option to change styles of them.