Customize Inbox

How to change the default inbox theme

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 nameDefault valueCustomization method
bell colorblack.ss-bell { color: red; }
bell height24px.ss-bell { height: 24px;}
bell width24px.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 nameDefault valueCustomization method
background colorred.ss-badge { background-color: blue; }
text colorwhite.ss-badge { color: black; }
text margin0px 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 size10px.ss-badge { font-size: 15px; }
font weight400.ss-badge { font-weight: 500; }
padding3px 6px.ss-badge { padding: 4px 8px; }
text aligncenter.ss-badge { text-align: right; }
border radius50%.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 nameDefault valueCustomization method
text colorblack.ss-notification-header-text { color: blue; }
text margin0px.ss-notification-header-text { margin: 10px 0px; }
text alignmentleft.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 size14px.ss-notification-header-text { font-size: 16px; }
font weight400.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 nameDefault valueCustomization method
background colorwhite.ss-notification-container { background-color: #fff; }
bottom borderwhite.ss-notification-container { border-bottom: 1px solid #f0f0f0; }
cursor stylepointer.ss-notification-container { cursor: pointer; }
padding7px 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 nameDefault valueCustomization method
text colorblack.ss-notification-header-text { color: blue; }
text margin0px.ss-notification-header-text { margin: 10px 0px; }
text alignmentleft.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 size14px.ss-notification-header-text { font-size: 16px; }
font weight400.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 nameDefault valueCustomization method
text colorblack.ss-notification-body-text { color: blue; }
text margin0px.ss-notification-body-text { margin: 10px 0px; }
text alignmentleft.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 size14px.ss-notification-body-text { font-size: 16px; }
font weight400.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 nameDefault valueCustomization method
background colorblue.ss-notification-unseendot { background: #358adf; }
background border radius50%.ss-notification-unseendot { border-radius: 80%; }
dot size7px.ss-notification-unseendot { width: 9px; height: 9px; }
margin from top of notification card18px.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 nameDefault valueCustomization method
background color# 358adf.ss-action-primary { background: #df357c; }
background border radius5px.ss-action-primary { border-radius: 8px; }
button width150px.ss-action-primary { width: 150px; }
button text decorationnone.ss-action-primary { text-decoration: dashed; }

Primary button text

Property nameDefault valueCustomization method
text colorwhite.ss-action-primary-text { color: #c9c7c7; }
text padding5px 0px.ss-action-primary-text { padding: 10px 0px; }
text alignmentcenter.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 size14px.ss-action-primary-text { font-size: 16px; }
font weight400.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 nameDefault valueCustomization method
background colorwhite.ss-action-outline { background: #358adf; }
background border radius5px.ss-action-outline { border-radius: 8px; }
button width150px.ss-action-outline { width: 150px; }
button text decorationnone.ss-action-outline { text-decoration: dashed; }
border color# 358adf.ss-action-outline { border-color: #c9c7c7; }
border stylesolid.ss-action-outline { border-style: dashed; }
border width1px.ss-action-outline { border-width: 2px; }

Secondary button text

Property nameDefault valueCustomization method
text colorwhite.ss-action-outline-text { color: #c9c7c7; }
text padding5px 0px.ss-action-outline-text { padding: 10px 0px; }
text alignmentcenter.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 size14px.ss-action-outline-text { font-size: 16px; }
font weight400.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 nameDefault valueCustomization method
background colorwhite.toast-success { background-color: #808080; }
if you want to add background image in the toastnone.toast-success { background-image: none; }
toast width150px.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 nameDefault valueCustomization method
text colorblack.toast-title { color: #c9c7c7; }
text margin0px.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 size16px.toast-title { font-size: 18px; }
font weight400.toast-title { font-weight: 500; }
title overflowhide (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;
  }
}

t

Property nameDefault valueCustomization method
text colorblack.toast-message { color: #c9c7c7; }
text margin0px.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 size16px.toast-message { font-size: 18px; }
font weight400.toast-message { font-weight: 500; }
title overflowhide (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 nameDefault valueCustomization method
background colorwhite.ss-no-notifications-text { background-color: transparent; }
text color# 707070.ss-no-notifications-text { color: #7393B3; }
text margin20px 0px.ss-no-notifications-text { margin: 25px 5px; }
text alignmentcenter.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 size13px.ss-no-notifications-text { font-size: 18px; }
font weight400.ss-no-notifications-text { font-weight: 500; }
font styleitalic.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

ClassNameUsage
ss-badgeoverride the alert that shows on the bell icon when there are unseen notifications
ss-bellbell icon style can be overridden using this class
ss-no-notifications-textthe class name of empty state text when no notifications are present
ss-notification-header-textNotification card's header class name
ss-notification-body-textNotification card's body text class name
ss-notification-unseendotNotification cards unread dot class name, this appears when notification is not clicked
ss-action-primaryPrimary action button's div class name
ss-action-primary-textPrimary action button's text class name
ss-action-outlineSecondary action button's div class name
ss-action-outline-textPrimary action button's text class name
ss-notification-created-textNotification created on text class name