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 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;
}
}
t
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 |
Updated 9 months ago