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

npm/yarn

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

<script>

<script src="https://unpkg.com/notificationapi-js-client-sdk/dist/notificationapi-js-client-sdk.js"></script>

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.

React.js

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
    });
    notificationapi.showInApp({
      root: 'CONTAINER_DIV_ID',
      popupPosition: PopupPosition.BottomLeft
    });
  });

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

info

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>
      <div>Hello World!</div>
      <NotificationAPIComponent userId="USER_ID" />
    </div>
  );
}

export default App;

Vue.js

<script setup>
  import NotificationAPI from 'notificationapi-js-client-sdk';
  import 'notificationapi-js-client-sdk/dist/styles.css';
  import { onMounted } from 'vue';
  onMounted(() => {
    const notificationapi = new NotificationAPI({
      clientId: 'CLIENT_ID',
      userId: 'USER_ID'
    });

    notificationapi.showInApp({
      root: 'myNotifications'
    });
  });
</script>

<template>
  <div>Hello World!</div>
  <div id="myNotifications"></div>
</template>

JavaScript

<script>
  const notificationapi = new NotificationAPI({
    clientId: 'CLIENT_ID',
    userId: 'USER_ID'
  });
  notificationapi.showInApp({
    root: 'CONTAINER_DIV_ID',
    popupPosition: 'bottomLeft'
  });
</script>