React

React SDK to integrate Inbox, Toast notification functionality for React websites

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>"
/>

FieldDescriptionFormat
workspaceKeyWORKSPACE KEY available on Suprsend dashboard left navigation panelstring
subscriberIdUnique 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
distinctIdunique identifier for your subscriber or userint, bigint, string, UUID

Whatโ€™s Next

You'll be able to integrate our standard inbox view by following this documentation, check out our next section for customizing the inbox