Skip to main content

Display In-App Notifications

While email or SMS notifications only require the back-end part, you need our front-end SDK to display in-app notifications:

1. Install a front-end SDK

# using npm:
npm install notificationapi-js-client-sdk
# using yarn:
yarn add notificationapi-js-client-sdk

2. Display

The example below creates the NotificationAPI widget in your front-end. The widget is placed in the container div specified by ID. The widget automatically connects to our servers and pull all the in-app notifications for the test user.

Create the following NotificationAPIComponent:

import NotificationAPI from 'notificationapi-js-client-sdk';
import 'notificationapi-js-client-sdk/dist/styles.css';
import { PopupPosition } from 'notificationapi-js-client-sdk/lib/interfaces';
import { memo, useEffect } from 'react';

const NotificationAPIComponent = memo((props) => {
useEffect(() => {
const notificationapi = new NotificationAPI({
clientId: 'CLIENT_ID',
userId: props.userId
popupPosition: PopupPosition.BottomLeft

return <div id="CONTAINER_DIV_ID"></div>;
export default NotificationAPIComponent;

React's state management and re-rendering would usually cause our widget to be destroyed and re-initialized with every state change. So, we have "memo"-ized the component to prevent re-rendering.

Now use the component anywhere you wish, for example, in App.js:

import NotificationAPIComponent from './NotificationAPIComponent';

function App() {
return (
<div>Hello World!</div>
<NotificationAPIComponent userId="USER_ID" />

export default App;