Using Next.js In-App Inbox Component

Engagespot Next.js component helps you to build a notification feed for your Next.js.js app. This library includes Next.js components to build a Notification Inbox component in your app.

Quick Setup

You can add a notification feed to your Next.js app in minutes with the pre-built UI Components and APIs powered by Engagespot.

npm

npm install @engagespot/react-component

yarn

yarn add @engagespot/react-component

pnpm

pnpm install @engagespot/react-component

Client Side Rendering

We need to render EngageSpot on the client. This process differs based on the type of Next.js router that your are using.

1. App Router

You need to add 'use client' to the top of the file.

2. Page Router

You need to import Engagespot Component using next/dynamic and disable pre-rendering. This is done by setting the ssr option to false.

Then render Engagespot component where you want the bell icon to appear.

App Router

// EngageSpotNotification.tsx
'use client';

import { Engagespot } from '@engagespot/react-component';

const EngageSpotNotification = () => {
  return (
    <Engagespot
      apiKey="ENGAGESPOT_API_KEY"
      userId="unique-id-of-your-user"
      dataRegion="us" //us or eu based on your workspace data region
      userToken="Required if secure auth is enabled on your Engagespot app"
    />
  );
};

// import and call the component where you want bell icon to appear
import EngageSpotNotification from './EngageSpotNotification';

return <EngageSpotNotification />;

Page Router

// EngageSpotNotification.tsx
import { Engagespot } from '@engagespot/react-component';

const EngageSpotNotification = () => {
  return (
    <Engagespot
      apiKey="ENGAGESPOT_API_KEY"
      userId="unique-id-of-your-user"
      userToken="Required if secure auth is enabled on your Engagespot app"
    />
  );
};

// import and call the component where you want bell icon to appear
const EngageSpotNotification = dynamic(
  () => import('./EngageSpotNotification'),
  {
    ssr: false,
  },
);

return <EngageSpotNotification />;

You can find your ENGAGESPOT_API_KEY from your Engagespot Console.

What is userId?

As explained in the basic concepts chapter, userId should be any value to uniquely identify your app's users. It can be their email id, or UUID or a numerical id from your database. This value usually comes from your backend.

What is userToken?

The userToken is a token (JWT) generated for your users by your secure backend server using a secret private key generated from Engagespot console. This ensures secure authentication for your user's In-App inbox. Find more details on generating the userToken here.

warning

You must enable secure authentication mode for your production apps; otherwise, unauthorized access to your users' inbox messages is possible.