Customize Inbox

The inbox component is highly customizable. For most parts in Inbox, we also support custom components using render props. This is how the default inbox looks like with its components marked in order.

Customizing Theme

Inbox supports light and dark themes.

<SuprsendInbox themeType="light / dark" />

Light Theme	Dark Theme

Customizing Bell icon

The Bell icon is an SVG image. You can create a custom bell using the code below. You can also customize the color of the existing bell icon image. Here's an example code for customizing the bell icon. You can add any valid CSS property to modify the style of the bell, inside the theme.

//method
<SuprsendInbox
  bellComponent?: React.FunctionComponent
  theme?: { bell?: React.CSSProperties }
/>

//example
<SuprsendInbox
  bellComponent={() => <p>MyBell</p>}
  theme={{ bell: { color: 'blue' }}}
/>

Customizing Badge (counter)

This element shows the number of unseen notifications for the current user. You use your custom badge component or change the background color, text color, and text margin of the existing badge.

Here's an example code for customizing the badge

//method
<SuprsendInbox
  badgeComponent?: React.FunctionComponent<{ count: Number }>
  theme?: { badge?: React.CSSProperties }
/>

//example
<SuprsendInbox
  badgeComponent={(count) => <p>{count}</p>}
  theme={{ badge: { backgroundColor: 'pink', color: 'black', margin: '0px' }}}
/>

Customizing Header

This is the heading of the Notifications Inbox. You can customize the background color, text color, and text size among other properties

Here's an example code for customizing the heading

//method
<SuprsendInbox
  theme?: {
    header?: {
      container?: React.CSSProperties
      headertext?: React.CSSProperties
      markAllReadText?: React.CSSProperties
    }
  }
/>

//example
<SuprsendInbox
  theme={{
    header: { 
      container: { backgroundColor: 'grey' }, 
      headertext: {color: 'black'},
      markAllReadText: {color: 'red'}
    }
  }}
/>

Customizing Notification Card

The style of notification depends on its state. It can be read or unread. Read state is the default state. The unread state just has an additional unseen dot on the card. You can customize the existing theme of the container, body text, header text, and unread dot. These are all the components of a notification card

Here's an example code for customizing the notification card

//method
<SuprsendInbox
  theme?: {
    notification?: {
      container?: React.CSSProperties
      headerText?: React.CSSProperties
      bodyText?: React.CSSProperties
      unseenDot?: React.CSSProperties
    }
  }
/>

//example
<SuprsendInbox
  theme={{
    notification: {
      container: { backgroundColor: 'gray' },
      headerText: { color: 'red' },
      bodyText: { color: 'blue' },
      unseenDot: { backgroundColor: 'red' }
    }
  }}
/>

Background (container)

Header text

Body text

The body text field supports markdown. You can add bold, italic, bold italic, blockquotes, ordered and unordered lists.

Unread dot

SubText

Action Buttons

There are 2 types of buttons, Primary and Secondary. You can customize the styles of both buttons.

Avatar

To hide the avatar in the notification card pass hideAvatar={true} in SuprsendInbox component. By default its value will be false.

Custom Notification Card Component

You can either customize the CSS properties of the default notification card as mentioned above or create your own notification card. You can override the data that you want to show on the card as well as the look and feel of the card

//method
<SuprsendInbox
  notificationComponent?: React.FunctionComponent<{ notificationData: Object }>
/>

//example
<SuprsendInbox
  notificationComponent={({ notificationData }) => (
    <p>{JSON.stringify(notificationData)}</p>
  )}
/>

Set Custom Click Handler

If you add a URL or deep-link in action URL or buttons, the default handling is to open the URL will in the same window when a user clicks on the notification. However, you can easily set a custom click handler by setting the click handler function.

Example: You can open a modal using a notification click handler

//method
<SuprsendInbox
  notificationClickHandler?: Function<notificationData>
/>

//example
<SuprsendInbox
  notificationClickHandler={(notificationData) => {
    console.log('notification clicked', notificationData)
  }}
/>

Customizing Inbox Popup Position

Popup position wrt bell icon can be adjusted using the popperPosition property. It supports 4 positions: top, bottom, left, and right. The default position is bottom ie.., the inbox notifications popup list will be shown bottom of the bell icon.

<SuprsendInbox popperPosition="top" / "bottom" / "left" / "right" />

Customizing Toast

A toast appears when a new inbox notification is received when the user is active on the platform. By default, the toast message is shown on the new message arrival showing the header and body text of the notification. You can customize the content shown on the toast and its styling or hide the toast altogether as per your requirement. These is the default toast with its components marked

Show / Hide Toast

You can hide the toast by passing hideToast={false}. By default, it is set to true.

//method
<SuprsendInbox
  hideToast: boolean
/>

//example
<SuprsendInbox hideToast={false} />

Collapse Toast Notifications

In case multiple notifications are received, by default, all notifications are shown on top of others with recent notifications on top. If you want to show only one notification in that case as you have received 5 new notifications then you can set collapseToastNotifications={true}.

Example:

//method
<SuprsendInbox
  collapseToastNotifications: boolean
/>

//example
<SuprsendInbox collapseToastNotifications={true} />

Change Toast Position

By default, a toast message appears on the bottom right corner of the screen on the desktop and the bottom center on mobile. You can change the position of the toast by passing position in toastProps.

//method
<SuprsendInbox
  toastProps?: {
    position?:'top-left'| 'top-right'| 'top-center'| 'bottom-left'| 'bottom-right'| 'bottom-center'
  }
/>

//example
<SuprsendInbox toastProps={{ position: 'top-center' }} />

Change Toast Duration

By default, toast stays for a duration of 3 seconds. You can customize the duration for which toast should stay on the screen by passing duration in toastProps

//method
<SuprsendInbox
  toastProps?: {
    toastOptions: { duration: number } // in ms defaults to 3000ms/3sec
  }
/>

//example
<SuprsendInbox  toastProps={{ toastOptions: { duration: 1000 } }} />

Custom Toast Content Component

By default, toast shows the header and body text of the notification. You can customize the content by setting toastComponent in toastProps

//method
<SuprsendInbox
  toastProps?: {
    toastComponent?: React.FunctionComponent<{ notificationData: object }>
  }
/>

//example
<SuprsendInbox
  toastProps={{ toastComponent: ({ notificationData }) => <p>New Notification received</p> }}
/>

Customize Toast Style

You can style the background color and text of the notification toast

//method
<SuprsendInbox
  theme?: {
    toast: {
      container?: React.CSSProperties
      headerText?: React.CSSProperties
      bodyText?: React.CSSProperties
    }
/>

//example
<SuprsendInbox
  theme={{
    toast: {
      container: { backgroundColor: 'red' },
      headerText: { color: 'white' },
      bodyText: { color: 'white' }
    }
  }}
/>

Customize toast background

Customize toast header text

Customize toast body text

Customizing Empty Inbox screen

The notification inbox shows the default empty component when the user has no notifications. You can change the content and styling of the blank screen.

Custom Empty Screen Component

The default empty screen looks like this

You can show your custom component by passing noNotificationsComponent

//method
<SuprsendInbox
  noNotificationsComponent?: React.FunctionComponent
/>

//example
<SuprsendInbox noNotificationsComponent={() => <p>No Notifications</p>} />

Customize Existing Empty Screen Style

You can style an empty screen by passing noNotificationsText in notificationsContainer theme

//method
<SuprsendInbox
  theme?: {
    notificationsContainer?: {
      noNotificationsText?: React.CSSProperties,
      noNotificationsSubtext?: React.CSSProperties
    }
/>

//example
<SuprsendInbox
  theme={{
    notificationsContainer: {
      noNotificationsText: { backgroundColor: 'blue', color: 'white' }
      noNotificationsSubtext: { backgroundColor: 'blue', color: 'white' }
    }
  }}
/>