React

This document will cover the methods to integrate Suprsend SDK in your React applications. Adding this SDK to your app will introduce a bell icon where all the inbox notifications can be viewed. A typical inbox, toast message will look like this.

Stage 1. Bell icon count and toast message as soon as the notification is delivered

Stage 2. Inbox view after clicking on the bell icon

You can also customize your inbox based on some simple customization options available in our SDK

Installation

You can install SuprSend inbox SDK using npm/yarn

npm i @suprsend/react-inbox

yarn add @suprsend/react-inbox

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'

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

Field	Description	Format
`workspaceKey`	WORKSPACE KEY available on Suprsend dashboard left navigation panel	string
`subscriberId`	Unique string used to prevent Man-in-the-browser attacks with predictable `distinct_id`. You can generate `subscriber_id` in your server-side code by following HMAC authentication steps	string
`distinctId`	unique identifier for your subscriber or user	int, bigint, string, UUID