Getting Started with SuprSend Inbox in Your Next.js App

Picture this: You're a business owner, and it's time for a big product sale — or maybe an important update that your customers absolutely need to know. You hit "Send," confident it’ll reach your audience.
Hours later, reality sets in — your users didn’t even notice it. The result? Missed opportunities and disengaged customers.

This is a problem that every business faces at some point, and it can be solved with the right tools. That’s where SuprSend Inbox comes in.

In this post, let's walk through on what is SuprSend Inbox and how it can boost your business. We'll also dive into a step-by-step guide on how to seamlessly integrate SuprSend Inbox into your Next.js application, so you can keep your users engaged and informed — every time.
You'll also get an introduction to Headless Inbox and how to leverage it for custom notifications.

By the end of this article, you'll have a working notification center in your app and a deeper understanding of how to personalize and extend it to meet your needs.

---

1. What is SuprSend Inbox?

SuprSend is a notification stack as a service platform for easily creating, managing and delivering notifications to your end users. SuprSend has all the features set which enable you to send notifications in a reliable and scalable manner, as well as take care of end-user experience, thereby eliminating the need to build any notification service in-house.

---

2. Benefits of Using SuprSend Inbox

• Effortless Integration: Minimal setup, easy to embed into React/Next.js apps without backend complexity.
• Real-time Engagement & Personalization: Deliver instant notifications directly to users, enhance the user experience by organizing them neatly in a persistent inbox, and personalize messaging based on user behavior and preferences.
• Scalable: SuprSend Inbox can handle notifications for both small and large applications as your user base grows.
• Headless Mode: Full control over notification display and design via API for a custom UI.

Whether you're working on a large-scale enterprise application or a smaller personal project, integrating a notification inbox provides a unified and user-friendly way to interact with your users.

---

3. Steps to Integrate SuprSend Inbox into Your Next.js App

Let's integrate SuprSend Inbox into your Next.js project in some simple steps:

Step 1: Sign Up and Set Up Your Workspace

1. Sign Up: Visit the SuprSend Dashboard and create your account.
2. If your company account is already set up, request your admin to invite you to the team.
3. We'll use the sandbox environment for demonstration purposes. A sample user will be created automatically for testing purposes during the workspace setup.

Step 2: Create a Notification Template

1. Navigate to the Templates section in the SuprSend Dashboard.
2. Click on New Template, and provide a name. This creates a draft template.
3. Open the newly created template and enable the Inbox channel.
4. Fill in the required details for the template, such as the header and text content. Once complete, click Publish Draft, and provide a version name for your internal tracking.

Step 3: Create a Workflow

1. Go to the Workflows section and click on New Workflow. Provide a name for the workflow and select the Notification Category to create a draft workflow. Alternatively, you can use one of SuprSend's pre-configured workflow templates.

1. Open the draft workflow and drag-and-drop the Inbox node from Delivery section into the workflow canvas, placing it between the Trigger and Exit nodes. You can also explore other nodes and functions as needed.

1. Select the Inbox node, configure it by linking the notification template you created earlier, and save the configuration.

1. Commit the workflow to make it live.

Step 4: Create a New Project and Install SuprSend

Here’s the GitHub repository containing the codebase we’ll be working on today. Feel free to refer to it alongside our session for better understanding.

Get started by creating a Next.js project and adding the SuprSend Inbox SDK:
Run the following commands:

# Create a new project
npx create-next-app@latest suprsend-next-inbox

# Navigate to the project directory
cd suprsend-next-inbox

# Install SuprSend React Inbox SDK using yarn
yarn add @suprsend/react-inbox

Step 5: Mount SuprSend Inbox Component in App.jsx

In the Next.js app, navigate to the pages directory and open the index.js file.
Here, we'll import the SuprSend Inbox component and mount it within our app.

import dynamic from "next/dynamic";
const SuprSendInbox = dynamic(() => import("@suprsend/react-inbox"), {
  ssr: false,
}); // for client side rendering

export default function Home() {
  return (
    <>
      <SuprSendInbox 
      />
    </>
  );
}

This simple step integrates the Inbox component directly into your app, ready for use. Now let's add the required props.

Step 6: Extract All Props from the SuprSend Dashboard

To get it working with your workspace in the sandbox environment, you'll need to get a few credentials from the SuprSend Dashboard.

• workspaceKey: You can find it in SuprSend Dashboard inside Settings -> API Keys.
• subscriberId: This is a unique string for every distinctId used for authentication to the inbox service. You can check generation docs.
• distinctId: This ID uniquely identifies a user (often an email or user account ID) and can be found on the Users page.

tenantId, pageSize, pagination, and stores are some additional props that you can pass but are not mandatory.

Step 7: Passing the Appropriate Props to SuprSend Components

Now that you've got the necessary credentials, it's time to modify the index.js file like so:

import dynamic from "next/dynamic";

const SuprSendInbox = dynamic(() => import("@suprsend/react-inbox"), {
  ssr: false,
});

export default function Home() {
  return (
    <>
      <SuprSendInbox 
      workspaceKey="<workspace-key>" // Replace with your workspace key
      subscriberId="<subscriber_id_>" // Replace with your subscriber ID
      distinctId="<distinct_id>" // Replace with the user's distinct ID
      />
    </>
  );
}

For production setup, pass the necessary props through environment variables.
That's it. You don't need to initialize the SDK client separately.
This step connects your app with the SuprSend Inbox, linking it to a specific user and workspace. When you visit http://localhost:3000/, you should see a fully functional notification inbox tied to your provided values.
Missing these props would give you 401 (Unauthorized) access error.

Step 8: Triggering a Test Notification

1. Once everything is set up, navigate to the workflow you created and click on the Test button.
2. Enter the recipient details in the required fields and click on Trigger Test.
3. Voilà! The test notification will appear in the Inbox, verifying that your setup works perfectly.

For further customization, refer to our docs.

---

4. Headless Inbox: Advanced Use Case

While the default SuprSend Inbox component is easy to set up and great for most use cases, you may need more flexibility in certain situations. This is where the Headless Inbox option comes in.

Headless Inbox Setup and Overview

1. Introduction to Headless Inbox

Headless Inbox is a powerful way to integrate and manage notifications within a React app without relying on a pre-built UI for handling messages. It allows developers to manage notification data and UI elements independently, offering flexibility to build customized notification systems that fit any design or workflow.

The concept of a "headless" system means you have full control over how the notification logic works, without being tied to a specific interface or display method. This separation of concerns is particularly useful when you're building dynamic applications with personalized notifications.

2. Importance of Headless Inbox

Headless Inbox is a powerful way to integrate and manage notifications within your app without relying on a pre-built UI for handling messages. It allows you to manage notification data and UI elements independently, offering flexibility to build customized notification systems that fit any design or workflow.

The concept of a "headless" system means you have full control over how the notification logic works, without being tied to a specific interface or display method. This separation of concerns is particularly useful when you're building dynamic applications with personalized notifications.

• Customizable UI: Unlike the traditional inbox that comes with its own visual design, you can design the notification experience exactly how you want it.
• More Control: The logic for marking notifications as seen, counting unseen notifications, and triggering new notifications can be fully managed by the developer. This gives them fine-grained control over the app’s notification flow.
• Decoupling of Logic: By isolating the notification logic from its display, you can change the UI without affecting the notification handling and vice versa, making the system more modular and maintainable.

In comparison to existing solutions like SuprSend inbox, Headless Inbox allows for a more scalable approach, particularly when you need to embed notifications within an existing application structure or have complex requirements for managing notifications.

3. Steps to Set Up the Headless Inbox

For demo purpose, let's set up the Headless Inbox with the following steps:

1. Clone the GitHub Repository

• Start by cloning the SuprSend Headless Inbox repository from GitHub
• This repository contains all the necessary code and configuration files to get started.

2. Add the Required API Keys

• You will need to insert your workspaceKey, subscriberId, and distinctId into the _app.js file to authenticate your connection to the SuprSend service. These keys ensure that notifications are linked to the correct workspace and user.

3. Understanding Key Files

• _app.js: This file contains the <SuprSendProvider /> component, which wraps the entire application. It initializes the connection to SuprSend using the workspace and subscriber information.
• HeadlessSDKComponent.js: This component manages the core functionality of the Headless Inbox. It handles unseen counts, marks notifications as seen, and reacts to new notifications by triggering custom events (e.g., alerts when new notifications arrive).
• NotificationsComponent.js: This is the customizable UI component that renders the notifications in a Material UI Card format. It displays a bell icon and a notification list, with options to toggle the card visibility. You can style and customize this component to fit the design of your app.

4. Run the App

• After setting up the keys and reviewing the important files, simply run the app. The notifications should start coming through, and you'll see them in the custom notification component.

This setup provides you with a fully functional Headless Inbox without requiring you to design complex notification handling systems. You can focus on customizing the UI and extending functionality based on your needs.

Why Use the Headless Mode?

• Customization: You have complete control over the notification display.
• Flexibility: Pull notifications into your app in any format you like.
• Integration: Integrate SuprSend into existing designs without relying on predefined UI components.

---

Conclusion: Effortless Notification Integration

By following these steps, you've successfully integrated SuprSend Inbox into your Next.js application, providing a rich and interactive notification experience for your users. Not only did you achieve this with minimal setup, but you also learned how to customize the inbox using headless mode to tailor the notifications to your unique needs.

To recap, here are the steps:

1. Set up a new Next.js project and install SuprSend.
2. Mount the SuprSend Inbox component in your app.
3. Extract the necessary props from the SuprSend Dashboard.
4. Pass the props to the SuprSendInbox component for a personalized experience.

Start building better user engagement today with SuprSend Inbox! Head over to SuprSend Docs for more customization options and take your app's notifications to the next level.

Because nothing says "I care" like a well-timed notification that doesn’t ghost your users! 🚀