In this guide, we'll walk through the process of integrating the SuprSend In-App Notification Center into your React applications. SuprSend offers a convenient SDK that allows you to seamlessly incorporate Inbox and Toast notifications into your web applications.

Try Playground/ Sandbox first -

Prerequisites

Before we begin, ensure that you have the following prerequisites installed:

• Node.js and npm/yarn: Make sure you have Node.js and npm (or yarn) installed on your development machine.

Installation

First, install the SuprSend React Inbox package using npm or yarn:

npm install --save @suprsend/react-inbox

or

yarn add @suprsend/react-inbox

Integration

Once you've installed the package, you can integrate the SuprSend In-App Notification Center into your React components.

import SuprSendInbox from '@suprsend/react-inbox';

function Example() {
  return (
    <SuprSendInbox
      workspaceKey='<workspace_key>'
      workspaceSecret='<workspace_secret>'
      subscriberId='<subscriber_id>'
      distinctId='<distinct_id>'
    />
  );
}

In the above code snippet:

• workspaceKey: This is your SuprSend workspace key.
• workspaceSecret: This is your SuprSend workspace secret.
• subscriberId: This is the unique identifier of the subscriber.
• distinctId: This is the unique identifier for the user. It can be a user ID or any other identifier that you use in your application.

https://www.suprsend.com/

Ensure that you replace the placeholder values with your actual SuprSend credentials and subscriber information.

Interaction with React Components - Example

Once integrated, the SuprSend In-App Inbox will automatically handle the display of messages within your React application. You can interact with the Inbox component using various methods provided by the SuprSend SDK.

For example, you can trigger the display of a notification message when a certain event occurs in your application. This can be achieved by calling the appropriate SDK method within your React components.

import { SuprSendInbox } from '@suprsend/react-inbox';

function Example() {
  const handleClick = () => {
    // Trigger a notification message
    SuprSendInbox.showNotification('New message received!');
  };

  return (
    <div>
      <button onClick={handleClick}>Show Notification</button>
      <SuprSendInbox
        workspaceKey='<workspace_key>'
        workspaceSecret='<workspace_secret>'
        subscriberId='<subscriber_id>'
        distinctId='<distinct_id>'
      />
    </div>
  );
}

Interaction with Your Application

The SuprSend In-App Inbox seamlessly integrates with your React application, allowing you to deliver targeted messages and notifications to your users based on their interactions and behaviors within the application.

• Contextual Messages: You can send contextual messages and announcements to users based on specific events or actions within your application.

• User Engagement: The In-App Inbox enhances user engagement by providing a centralized location for users to access important messages and updates.

• Personalization: You can personalize messages and notifications based on user attributes and preferences, ensuring relevant and meaningful communication.

Usage

Once integrated, the SuprSend In-App Notification Center will handle the display of inbox and toast notifications within your React application based on the configuration provided during integration.

Conclusion

Incorporating the SuprSend In-App Notification Center into your React application is a straightforward process. By following the steps outlined in this guide, you can enhance user engagement and communication by leveraging the power of inbox and toast notifications provided by SuprSend.

For more advanced usage and customization options, refer to the official documentation provided by SuprSend.

Happy coding!

Here is the Github react native repo for the same. Try headless to get your own custom native inbox:

npm install @suprsend/react-inbox

import SuprSendInbox from '@suprsend/react-inbox'
import 'react-toastify/dist/ReactToastify.css' // needed for toast notifications, can be ignored if hideToast=true

// add to your react component;
<SuprSendInbox
  workspaceKey='<workspace_key>'
  subscriberId='<subscriber_id>'
  distinctId='<distinct_id>'
/>

interface ISuprSendInbox {
  workspaceKey: string
  distinctId: string | null
  subscriberId: string | null
  tenantId?: string
  stores?: IStore[]
  pageSize?: number
  pagination?: boolean