Skip to main content

🔔 Display in-app notifications


In-app notifications refer to notifications inside your front-end, for example, inside a bell button 🔔

We provide an in-app notification widget compatible with most front-end frameworks that works out-of-the-box. It even maintains a live connection to our servers to display new incoming notifications. And, it's fully customizable:

  • Styles and icons
  • Popup mode and full page mode
  • Different mark-as-read behavior
  • and more ...


See a demo and modify the code here on CodeSandbox.

Step 1: Install the Front-End SDK

Different from our back-end npm package.

npm install notificationapi-js-client-sdk
# yarn add notificationapi-js-client-sdk
# pnpm add notificationapi-js-client-sdk

Step 2: Render the In-App Widget

The example shows the NotificationAPI widget in your front-end. It will automatically pull the in-app notifications from our servers for the given userId and keeps a live connection to receive any new notifications. The widget is placed in the container div specified by ID.

Create the following component and use it anywhere in your app:

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
}, [props.userId]);

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

Next Steps

You are now receiving in-app notifications on your front-end! 🎉

Let's do a few more things: