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 { 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
});
notificationapi.showInApp({
root: 'CONTAINER_DIV_ID',
popupPosition: PopupPosition.BottomLeft
});
});
return <div id="CONTAINER_DIV_ID"></div>;
});
export default NotificationAPIComponent;
important

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>
<NotificationAPIComponent userId="TEST_USER_ID" />
<div> ... </div>
</div>
);
}
export default App;