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 Bell icon

The Bell icon is an SVG image. You can create a custom bell using the code below. Pass ssBell in your bell element.

<suprsend-inbox>
  
  <!-- your custom design -->
  <p ssBell>Hello</p>

  
</suprsend-inbox>

You can also customize the color, height and width of the existing bell icon image. Here's an example code for customizing the bell icon. You can customize CSS of the specific element by overriding existing styles on the class like below code snippet.

@import url("@suprsend/ngx-inbox/assets/styles.css");

.ss-bell {
  color: red;
  height: 24px;
  width: 24px;
}

Property name	Default value	Customization method
bell color	black	`.ss-bell { color: red; }`
bell height	24px	`.ss-bell { height: 24px;}`
bell width	24px	`.ss-bell { width: 24px; }`

Customizing Badge (counter)

This element shows the number of unseen notifications for the current user. You use your custom badge component like below

Here's an example code for customizing the badge content

<suprsend-inbox>
  
  <ng-template #ssBadge let-count>
    
    <!-- your custom design -->
    <p style="color: red; margin: 0px">{{ count }}</p>
    <!-- your custom design -->
    
  </ng-template>
  
</suprsend-inbox>

or you can customize CSS of the specific element to change the background color, text color, and text margin of the existing badge.

Here's an example code for customizing the badge theme.

@import url("@suprsend/ngx-inbox/assets/styles.css");

.ss-badge {
  font-size: 10px;
  display: inline-block;
  position: absolute;
  right: -3px;
  top: -7px;
  padding: 3px 6px;
  background-color: red;
  color: white;
  text-align: center;
  border-radius: 50%;
}

Property name	Default value	Customization method
background color	red	`.ss-badge { background-color: blue; }`
text color	white	`.ss-badge { color: black; }`
text margin	0px 0px	`.ss-badge { right: -3px; top: -7px; }`
font family	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"	`.ss-badge { font-family: 'Roboto' }`
font size	10px	`.ss-badge { font-size: 15px; }`
font weight	400	`.ss-badge { font-weight: 500; }`
padding	3px 6px	`.ss-badge { padding: 4px 8px; }`
text align	center	`.ss-badge { text-align: right; }`
border radius	50%	`.ss-badge { border-radius: 80%; }`

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

@import url("@suprsend/ngx-inbox/assets/styles.css");

.ss-notification-header-text {
  font-size: 16px;
  margin: 10px 0px;
  white-space: pre-line;
}

Property name	Default value	Customization method
text color	black	`.ss-notification-header-text { color: blue; }`
text margin	0px	`.ss-notification-header-text { margin: 10px 0px; }`
text alignment	left	`.ss-notification-header-text { text-align: right; }`
font family	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"	`.ss-notification-header-text { font-family: 'Roboto'; }`
font size	14px	`.ss-notification-header-text { font-size: 16px; }`
font weight	400	`.ss-notification-header-text { font-weight: 500; }`

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 container

@import url("@suprsend/ngx-inbox/assets/styles.css");

.ss-notification-container {
  padding: 7px 14px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

Background (container)

Property name	Default value	Customization method
background color	white	`.ss-notification-container { background-color: #fff; }`
bottom border	white	`.ss-notification-container { border-bottom: 1px solid #f0f0f0; }`
cursor style	pointer	`.ss-notification-container { cursor: pointer; }`
padding	7px 14px	`.ss-notification-container { padding: 10px 12px; }`

Header text

Here's an example code for customizing the heading

@import url("@suprsend/ngx-inbox/assets/styles.css");

.ss-notification-header-text {
  font-size: 16px;
  margin: 10px 0px;
  white-space: pre-line;
}

Property name	Default value	Customization method
text color	black	`.ss-notification-header-text { color: blue; }`
text margin	0px	`.ss-notification-header-text { margin: 10px 0px; }`
text alignment	left	`.ss-notification-header-text { text-align: right; }`
font family	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"	`.ss-notification-header-text { font-family: 'Roboto'; }`
font size	14px	`.ss-notification-header-text { font-size: 16px; }`
font weight	400	`.ss-notification-header-text { font-weight: 500; }`

Body text

Here's an example code for customizing the body text

@import url("@suprsend/ngx-inbox/assets/styles.css");

.ss-notification-body-text {
  margin: 10px 0px;
  white-space: pre-line;
}

Property name	Default value	Customization method
text color	black	`.ss-notification-body-text { color: blue; }`
text margin	0px	`.ss-notification-body-text { margin: 10px 0px; }`
text alignment	left	`.ss-notification-body-text { text-align: right; }`
font family	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"	`.ss-notification-body-text { font-family: 'Roboto'; }`
font size	14px	`.ss-notification-body-text { font-size: 16px; }`
font weight	400	`.ss-notification-body-text { font-weight: 500; }`

Unread dot

Here's an example code for customizing the unread dot

@import url("@suprsend/ngx-inbox/assets/styles.css");

.ss-notification-unseendot {
  background: #358adf;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-top: 18px;
}

Property name	Default value	Customization method
background color	blue	`.ss-notification-unseendot { background: #358adf; }`
background border radius	50%	`.ss-notification-unseendot { border-radius: 80%; }`
dot size	7px	`.ss-notification-unseendot { width: 9px; height: 9px; }`
margin from top of notification card	18px	`.ss-notification-unseendot { margin-top: 18px; }`

Buttons

There are two types of buttons on a notification card - Primary (solid background) and Secondary button (outlined button)

Primary Button

Here's an example code for customizing the primary button

@import url("@suprsend/ngx-inbox/assets/styles.css");

.ss-action-primary {
  width: 150px;
  background: #358adf;
  border-radius: 5px;
  text-decoration: none;
}

.ss-action-primary-text {
  color: white;
  padding: 5px 0px;
  text-align: center;
  word-break: break-all;
}

Primary button background

Property name	Default value	Customization method
background color	# 358adf	`.ss-action-primary { background: #df357c; }`
background border radius	5px	`.ss-action-primary { border-radius: 8px; }`
button width	150px	`.ss-action-primary { width: 150px; }`
button text decoration	none	`.ss-action-primary { text-decoration: dashed; }`

Primary button text

Property name	Default value	Customization method
text color	white	`.ss-action-primary-text { color: #c9c7c7; }`
text padding	5px 0px	`.ss-action-primary-text { padding: 10px 0px; }`
text alignment	center	`.ss-action-primary-text { text-align: right; }`
font family	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"	`.ss-action-primary-text { font-family: 'Roboto'; }`
font size	14px	`.ss-action-primary-text { font-size: 16px; }`
font weight	400	`.ss-action-primary-text { font-weight: 500; }`
word-break (if the text overflows the button wdith)	break-all	`.ss-action-primary-text { word-break: normal; }`

Secondary Button

Here's an example code for customizing the secondary button

@import url("@suprsend/ngx-inbox/assets/styles.css");

.ss-action-outline {
  width: 150px;
  background: #358adf;
  border-radius: 5px;
  text-decoration: none;
  border-color: #358adf;
  border-style: solid;
  border-width: 1px;
}

.ss-action-outline-text {
  color: #358adf;
  padding: 5px 0px;
  text-align: center;
  word-break: break-all;
}

Secondary button background

Property name	Default value	Customization method
background color	white	`.ss-action-outline { background: #358adf; }`
background border radius	5px	`.ss-action-outline { border-radius: 8px; }`
button width	150px	`.ss-action-outline { width: 150px; }`
button text decoration	none	`.ss-action-outline { text-decoration: dashed; }`
border color	# 358adf	`.ss-action-outline { border-color: #c9c7c7; }`
border style	solid	`.ss-action-outline { border-style: dashed; }`
border width	1px	`.ss-action-outline { border-width: 2px; }`

Secondary button text

Property name	Default value	Customization method
text color	white	`.ss-action-outline-text { color: #c9c7c7; }`
text padding	5px 0px	`.ss-action-outline-text { padding: 10px 0px; }`
text alignment	center	`.ss-action-outline-text { text-align: right; }`
font family	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"	`.ss-action-outline-text { font-family: 'Roboto'; }`
font size	14px	`.ss-action-outline-text { font-size: 16px; }`
font weight	400	`.ss-action-outline-text { font-weight: 500; }`
word-break (if the text overflows the button wdith)	break-all	`.ss-action-outline-text { word-break: normal; }`

Design custom notification card component

You can either customize the CSS properties of 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

<suprsend-inbox>
  
  <ng-template #ssNotification let-notification>
    <!-- your custom design -->
    <div>
      <p>{{ notification.message.header }}</p>
      <p>{{ notification.message.text }}</p>
    </div>
    <!-- your custom code -->
  </ng-template>
  
</suprsend-inbox>

Set a custom click handler

On click of the notification card, SDK will internally mark it as seen and redirects to the action URL you provided in the template. You can also override redirection and provide a custom function as notificationClickHandler which will be called after marking seen. In the custom handler, notification payload data will be passed as a parameter.

<suprsend-inbox [notificationClickHandler]="customFunction"></suprsend-inbox>

import { SuprSendInboxService, IRemoteNotification } from '@suprsend/ngx-inbox';

// ...
export class MyComponent {
  constructor(private ssinbox: SuprSendInboxService) {}

  customFunction(notifications: IRemoteNotification) {
    console.log('called notification', notifications);
  }
}

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

Styling toast theme

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

background

Here's an example code for customizing the toast background

@import url("@suprsend/ngx-inbox/assets/styles.css");

.toast-success {
  background-color: white;
  background-image: none;
}

.toast-container .ngx-toastr {
  padding-left: 15px;
  max-width: 450px;
  min-width: 300px;
  width: auto;
}

Property name	Default value	Customization method
background color	white	`.toast-success { background-color: #808080; }`
if you want to add background image in the toast	none	`.toast-success { background-image: none; }`
toast width	150px	`.toast-container .ngx-toastr { padding-left: 15px; max-width: 450px; min-width: 300px; width: auto; }`

header text

Here's an example code for customizing the toast header text

@import url("@suprsend/ngx-inbox/assets/styles.css");

.toast-title {
  font-size: 16px;
  font-weight: 400;
  margin: 0px;
  color: #000;
  margin-top: 0px;
  margin-bottom: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

@media (max-width: 425px) {
  .toast-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 0px;
  }
}

Property name	Default value	Customization method
text color	black	`.toast-title { color: #c9c7c7; }`
text margin	0px	`.toast-title { margin: 0px; margin-top: 0px; margin-bottom: 10px; }`
font family	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"	`.toast-title { font-family: Roboto; }`
font size	16px	`.toast-title { font-size: 18px; }`
font weight	400	`.toast-title { font-weight: 500; }`
title overflow	hide (show only title in one line)	`@media (max-width: 425px) { .toast-title { text-overflow: ellipsis; overflow: hidden; } }`

body text

Here's an example code for customizing the toast header text

@import url("@suprsend/ngx-inbox/assets/styles.css");

.toast-message {
  font-size: 14px;
  font-weight: 400;
  margin: 0px;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  word-wrap: break-word;
  margin-top: 0px;
}

@media (max-width: 425px) {
  .toast-message {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 0px;
  }
}

Property name	Default value	Customization method
text color	black	`.toast-message { color: #c9c7c7; }`
text margin	0px	`.toast-message { margin: 0px; margin-top: 0px; margin-bottom: 10px; }`
font family	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"	`.toast-message { font-family: Roboto; }`
font size	16px	`.toast-message { font-size: 18px; }`
font weight	400	`.toast-message { font-weight: 500; }`
title overflow	hide (show only title in one line)	`@media (max-width: 425px) { .toast-message { text-overflow: ellipsis; overflow: hidden; } }`

Customizing Empty Inbox screen

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

Changing Empty screen content

The default empty screen looks like this

Here's an example code for customizing the toast header text

@import url("@suprsend/ngx-inbox/assets/styles.css");

.ss-no-notifications-text {
  text-align: center;
  font-style: italic;
  margin: 20px 0px;
  background-color: transparent;
  color: #707070;
}

Property name	Default value	Customization method
background color	white	`.ss-no-notifications-text { background-color: transparent; }`
text color	# 707070	`.ss-no-notifications-text { color: #7393B3; }`
text margin	20px 0px	`.ss-no-notifications-text { margin: 25px 5px; }`
text alignment	center	`.ss-no-notifications-text { text-align: right; }`
font family	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"	`.ss-no-notifications-text { font-family: Roboto; }`
font size	13px	`.ss-no-notifications-text { font-size: 18px; }`
font weight	400	`.ss-no-notifications-text { font-weight: 500; }`
font style	italic	`.ss-no-notifications-text { font-style: normal; }`

Customizing styles using HTML template file

Below is list of classnames of html elements. you can also refer sdks internal CSS file and HTML template file

ClassName	Usage
ss-badge	override the alert that shows on the bell icon when there are unseen notifications
ss-bell	bell icon style can be overridden using this class
ss-no-notifications-text	the class name of empty state text when no notifications are present
ss-notification-header-text	Notification card's header class name
ss-notification-body-text	Notification card's body text class name
ss-notification-unseendot	Notification cards unread dot class name, this appears when notification is not clicked
ss-action-primary	Primary action button's div class name
ss-action-primary-text	Primary action button's text class name
ss-action-outline	Secondary action button's div class name
ss-action-outline-text	Primary action button's text class name
ss-notification-created-text	Notification created on text class name