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.
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:
suprsend / suprsend-react-inbox
SuprSend SDK for integrating inbox functionality in React applications
@suprsend/react-inbox
Integrating SuprSend Inbox channel in React websites can be done in two ways:
- SuprSendInbox component which comes with UI and customizing props.
- SuprSendProvider headless component and hooks, incase you want to totally take control of UI. (example: Full page notifications).
Detailed documentation can be found here: https://docs.suprsend.com/docs/inbox-react
Installation
You can install SuprSend inbox SDK using npm/yarn
npm install @suprsend/react-inbox
SuprSendInbox Integration
After installing, Import the component in your code and use it as given below. Replace the variables with actual values.
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
…
Top comments (0)